Frames in html 5 voorbeelden. Definieer framestijlen in het brondocument. Wat zijn kaders

laat een reactie achter 6,950

Voorbeeld framestructuur

Het browservenster kan worden opgesplitst in frames, d.w.z. op naast elkaar gelegen gebieden. U kunt uw eigen html-pagina's uploaden naar elk van deze gebieden. Een voorbeeld maakt het duidelijker, maak nieuw bestand genaamd index.html met de volgende code:

Frames in html

In een browservenster ziet het er als volgt uit:

Het browservenster is verdeeld in 3 delen. Ik moet zeggen dat dit het enige geval is wanneer er geen tags in het html-document staan.

... In plaats daarvan worden tags gebruikt , die de browser vertellen om het venster in verschillende gebieden te splitsen - frames.

Hoeveel van dergelijke gebieden zullen zijn en hoe ze zich zullen bevinden, hangt af van twee parameters van de tag :

rijen- geeft aan dat het venster in horizontale gebieden moet worden gesplitst. Bovendien zijn er net zoveel gebieden als er waarden zijn voor deze parameter. In ons voorbeeld rijen = "30%, 10%, 60%", d.w.z. drie horizontale gebieden: de breedte van de eerste is 30% van de breedte van het scherm, de breedte van de tweede is 10% en de derde is 60%.
cols- geeft aan dat het venster in verticale gebieden moet worden gesplitst.

Binnentags enkele tags bevinden zich , en er moeten er zoveel zijn als de opgegeven gebieden. Zonder parameters zijn deze tags nutteloos.

We zullen kijken naar de parameters van de tag door voorbeelden.

Dus hebben we alle parameters van de tag onderzocht. .

De finishing touch: verwijder de frames. Om dit te doen, in de tag voeg twee parameters toe border = "0" frameborder = "0".

Frames in html

Onze pagina ziet er nu als volgt uit:

Voor- en nadelen van frames

Nu je een goed begrip hebt van frames, is het tijd om te praten over de voor- en nadelen van geframede sites.

Een onbetwistbaar voordeel is de vermindering van de hoeveelheid informatie die naar de computer van de gebruiker wordt gedownload. De header en het menu van de site worden immers maar één keer geladen, en dan verandert alleen de inhoud. Dit scheelt natuurlijk in de laadtijden.

Maar er zijn nog veel meer nadelen. Ten eerste is het gemakkelijk om in de war te raken over de structuur van frames.

Ten tweede ligt ons menu in apart bestand... Dit betekent dat als een gebruiker bijvoorbeeld uw content.html-pagina heeft gevonden via een zoekmachine, hij deze alleen kan lezen, omdat er geen links en menu-items op deze pagina staan.

Ten slotte ondersteunen niet alle browsers de framestructuur. Daarom zijn er tags , ze bevinden zich binnen de tags en bevatten alternatieve informatie voor browsers die geen frames ondersteunen. In wezen zul je moeten doen dubbel werk en maak twee versies van de site: met en zonder frames.

Vandaar de conclusie: gebruik geen frames tenzij dit absoluut noodzakelijk is.

Voorbeelden van frameconstructies

Zoals u zich herinnert, zijn twee parameters verantwoordelijk voor het opsplitsen in frames: rijen en cols... Door ze te combineren, kunt u het raam op elke manier in kozijnen splitsen. We zullen voorbeelden van een dergelijke partitie bekijken.

Voorbeeld 1:

Frames in html

We krijgen drie verticale frames. De eerste is 150 pixels breed, de tweede 300 en de derde is de rest van het venster.

Resultaat:

Voorbeeld 2:

Frames in html

We krijgen twee verticale frames. De breedte van de eerste wordt gelijk aan één genomen en de tweede is twee keer zo breed als de eerste (d.w.z. 33% en 67% van de raambreedte).

Resultaat:

Voorbeeld 3:

Frames in html

We krijgen twee horizontale frames. De eerste is 100 pixels hoog en de tweede is de rest van de ruimte.
Verdeel het tweede horizontale frame in twee verticale: één met een breedte van 200 pixels, en de tweede neemt de rest van de ruimte in beslag. Dit wordt bereikt met geneste tags .

Goeie dag iedereen. Alexey Gulynin heeft contact. In het vorige artikel hebben we besproken hoe je een favicon op een website installeert. In dit artikel vertel ik je graag wat frames in html... Vertaald uit het Engels. frame betekent "frame". Vanuit het oogpunt van html is een frame een soort gemarkeerd gebied op een pagina dat naar een andere pagina linkt en de inhoud ervan weergeeft (dezelfde pagina of site). Er moet meteen worden opgemerkt dat frames niet veel ontwikkeling hebben ondergaan en nu bijna nooit worden gebruikt, behalve in enkele gespecialiseerde projecten. CSS gebruiken en Javascript.
Met behulp van een frame kan de pagina in verschillende blokken worden verdeeld, die elk onafhankelijk zijn van de andere. Laten we het hoofddocument index.html en twee aanvullende (interne) documenten maken, waarvan de inhoud op de hoofdpagina wordt weergegeven: menu.html (die de opmaak van de sitenavigatie zal bevatten) en content.html (de inhoud van de site ). De index.html-opmaak ziet er als volgt uit:

Frames in HTML

Let op: de tag ontbreekt hier , de tag verscheen in plaats daarvan ... Deze tag heeft verschillende attributen:

cols - gegeven attribuut geeft aan dat frames in kolommen worden geplaatst. In de waarde van dit attribuut worden de afmetingen van frames aangegeven, gescheiden door komma's. In ons geval hebben we 2 frames. De eerste is 40% van de paginabreedte, * betekent de rest van de paginaruimte (in in dit geval 60% had geschreven kunnen worden). U kunt de grootte ook in pixels instellen.
rijen - Dit kenmerk geeft aan dat frames in rijen worden geplaatst.

De inhoud van het menu.html-bestand is als volgt:

1 menu-item
2 menu-item
3 menu-item

De inhoud van het content.html-bestand is als volgt:

Frames testen

Paragraaf van tekst

Om de inhoud van een ander document weer te geven, moet u de tag . gebruiken met het src-attribuut, waarvan de waarde het pad naar het bestand aangeeft. U kunt ook de url specificeren van de site die we in dit blok willen weergeven. Laten we eerst onze menu.html- en content.html-pagina's weergeven:

Zorg ervoor dat u typt gegeven code om te zien hoe het allemaal werkt.

De frametag heeft de volgende attributen:

src - het pad naar de pagina of de url van de site (sitepagina's). Het is vermeldenswaard dat sommige sites insluitbeveiliging hebben,
naam - geeft het frame een naam waarmee dit frame gemanipuleerd kan worden,
noresize - verbiedt het formaat van het frame,
scrollen - de mogelijkheid om door inhoud te bladeren.

Maak voor huiswerk 2 kaders en plaats deze op een lijn. Geef het pad naar sites op als de waarde voor het kenmerk src.

De term "frame" is bij ons vandaan gekomen: in Engels... Vertaald betekent dit woord "frame" en is het een apart gedeelte van het raam. Door zijn structuur is zo'n sectie een volledig compleet HTML-document.

Afzonderlijke frames verdelen browservensters in secties die naast elkaar worden geplaatst. Tegelijkertijd wordt zijn eigen volwaardige pagina in elk van de frames geladen. Frametechnologie zorgt nog steeds voor veel controverse, maar het moet gezegd worden dat het hoogtepunt van zijn populariteit al voorbij is. V dit moment deze technologie wordt als verouderd beschouwd en reguliere frames worden niet langer ondersteund in HTML5.

Geschiedenis van de technologie

Vandaag kunnen we stellen dat het besluit om af te stappen van het werken met frametechnologie eindelijk is genomen. De site https://www.w3.org/TR/html5-diff/#obsolete-elements stelt duidelijk dat de gebruikelijke tags voor het maken van zo'n structuurframe, frameset en noframes zijn verouderd. Als argument worden gegevens aangevoerd dat het gebruik van een dergelijke structuur een negatief effect heeft op de bruikbaarheid van sites en hun beschikbaarheid op het web.

Maar moderne technologieën ondersteunen het IFRAME-element. Het gebruik ervan stelt u in staat om frames in te voegen in tekstblokken op de pagina's. Bovendien kunnen dergelijke elementen worden uitgelijnd ten opzichte van de tekst zelf. Een belangrijk punt: Inline-frames kunnen in principe niet worden vergroot of verkleind. Ze hebben geen overeenkomstig kenmerk voor het wijzigen van de grootte.

In de toekomst, zonder sprongen in technologie, is verder gebruik van frames onwaarschijnlijk. En het is de moeite waard om te onthouden dat de toonaangevende organisatie voorie, de W3C, duidelijk heeft gemaakt dat dergelijke structuren niet door site-ontwikkelaars mogen worden gebruikt.

Dat wil zeggen dat frames in principe niet mogen worden gebruikt voor de paginastructuur bij het maken van nieuwe bronnen. Maar met de ondersteuning en verfijning van bestaande sites, zal kennis van de functies van de technologie en het gebruik ervan zeer nuttig en productief zijn.

Voordelen van lijsten

De voordelen van frametechnologie zijn onder meer gebruiksgemak, hoge snelheid werk, het vermogen om informatie op bepaalde plaatsen in het venster nauwkeurig te positioneren.

Het gebruik van frames zorgt voor besparingen op het volume van het verzonden verkeer tijdens het werken met de site. Inderdaad, wanneer naar een ander gedeelte met informatie wordt verwezen, wordt meestal slechts één gedeelte van de pagina bijgewerkt, en niet alle code.

Deze structuur biedt: interessante kansen navigatie door de inhoud van bronnen. Binnen het browservenster in aangrenzende frames kunt u inderdaad verschillende informatieblokken bekijken. Het is belangrijk dat gebruikers weten dat zoeken binnen een frame gelijk staat aan het uitvoeren van een dergelijke bewerking op een aparte pagina.

Tijdens het werken met de site kunt u de grootte van een afzonderlijk gebied dynamisch wijzigen, wat moeilijk te implementeren is met andere technologische oplossingen.

Mogelijke nadelen

Problemen met sites die frames gebruiken, stapelden zich geleidelijk op, maar vandaag hebben ze een drempelwaarde bereikt. Een van de belangrijkste nadelen zijn:

Slechte bruikbaarheid. Aandeel gebruikers vandaag mobiele toestellen en tablets met een kleine schermresolutie groeit en overtreft nu al het aantal mensen dat sites bezoekt met stationaire computers en laptops. En hier veroorzaakt het gebruik van frames ernstige problemen met de responsiviteit van pagina's wanneer ze worden weergegeven op verschillende apparaten... Dit probleem heeft vandaag geen praktische oplossing.
Verslechterende toegankelijkheid van de website voor verschillende programma's... Het aantal verhogen aanvullende programma's(Bijvoorbeeld, schermlezers) onthult een veel slechtere leesbaarheid van informatie.
Onjuiste weergave van pagina's. Vaak ziet de lay-out van pagina's met een dergelijke structuur er vanuit een ontwerpoogpunt onjuist uit in browsers. En dit komt door de eigenaardigheden van de technologie. Vanuit oogpunt SEO gebruik frames in de html-lay-out van de pagina is zeer ongewenst.
De aanwezigheid van een enkel adres voor de hele structuur. Als resultaat binnenpagina's een dergelijke site kan niet worden gemarkeerd als bladwijzer. Dit leidt tot ongemak in de gebruikerservaring.
Onjuiste indexering door zoekmachines. De aanwezigheid op de site van verschillende volwaardige documenten, waaruit één pagina wordt gevormd, bemoeilijkt het werk aanzienlijk zoekmachines... Dit leidt tot aanzienlijke indexeringsfouten. Bijgevolg - verkeerde definitie onderwerpen en pagina-adressen, verlies van kritieke inhoud door indexering.
Respectloosheid. Dit is een nogal ongebruikelijk nadeel voor online bronnen. En toch moet worden gezegd dat het feit dat de lay-out van sites op frames verouderd is, ertoe leidt dat de auteurs en eigenaren van dergelijke bronnen als retrogrades worden beschouwd. Maar er is geïsoleerde uitzonderingen... Zelfs moderne sites die chatrooms hosten, gebruiken meestal frames.

Indexering van frames door zoekmachines

De informatie die van zoekmachines komt, vertelt ons duidelijk dat sites met frames merkbaar langzamer worden geïndexeerd. Tegelijkertijd treden vaak fouten op die verband houden met de structuur zelf. In elk van de frames wordt immers een volwaardige webpagina getoond. En zo'n deel van de site kan in de indexeringsdatabase terechtkomen.

Het negatieve aspect van een dergelijke indexering is dat de gebruiker bij het navigeren naar het binnenste deel van de pagina meestal het menu en andere navigatiemechanismen niet ziet. En dit is niet verwonderlijk. U moet begrijpen dat het bijwerken van het frame in dit geval geen oplossing voor het probleem is. Alle navigatiemechanismen bevinden zich immers in een andere container.

Een ander probleem is dat de hoofdpagina van de containerstructuur vaak alleen de titel, de beschrijving van de metatags en de FRAMESET-tag bevat. En dat lijkt ook logisch - betekenisvolle content wordt immers in aparte documenten geplaatst. Het zijn deze die de sitebezoeker op de pagina binnen het kader zal zien.

Maar hier zoekrobot zo'n pagina wordt bijna nooit geïndexeerd. Hij vindt er geen inhoud op die nuttig is voor bezoekers. Zoekbots zijn zo geconfigureerd dat ze informatie proberen te krijgen en te indexeren die erin is gepost body-tag... Het is daar dat het zoeken naar inhoud die nuttig is voor de gebruiker plaatsvindt. Maar er is geen dergelijke tag op de framepagina, deze wordt vervangen door FRAMESET.

Dit probleem kan gedeeltelijk worden opgelost met NOFRAMES. Maar op veel sites wordt bij het openen alleen informatie gegeven dat de browser geen frames ondersteunt. En je moet een ander programma gebruiken om de pagina te bekijken.

Dergelijke gevallen veroorzaken veel problemen voor gebruikers die, wanneer ze naar de site gaan, het menu en andere informatie die moet worden weergegeven niet zien. In het geval van het plaatsen van frames op de site, de parameters vanaf het punt SEO perspectief afwijzen. Tegelijkertijd suggereren de statistieken van gebruikersgedrag dat de autoriteit van de bron bij zoekmachines afneemt. Dit heeft zeker een negatief effect op het websiteverkeer.

Het is vooral moeilijk voor zoekmachines en indexerende bots om geneste en meerdere personeelsstructuren te verwerken. Het feit dat elke container alle kenmerken van een afzonderlijk document heeft, maar geen volledige navigatie en andere informatie bevat, maakt de situatie nog ingewikkelder.

Het is mogelijk om het werk van zoekmachines te vergemakkelijken door de juiste koppelingen op de pagina's toe te passen. In dit geval is het noodzakelijk om alle menulinks te dupliceren, zodat ze binnen elk afzonderlijk deel van de pagina kunnen worden gevonden. Maar dit bemoeilijkt en vertraagt het werk van het optimaliseren van de site en het bijwerken van informatie erop aanzienlijk.

De ervaring van veel SEO's en webmasters suggereert ook dat ingelijste pagina's geen hoge ranking krijgen in Zoekresultaten... Dit gebeurt zelfs als ze in de indexeringsdatabase terechtkomen.

Kenmerken van websitepromotie in frames

Sommige zoekmachines indexeren foutief of zeer incorrect framegestructureerde bestanden. Als gevolg hiervan wordt de indexbasis niet gevuld met de adressen van de bovenliggende bronnen (zoals het had moeten zijn), maar met links naar subsites.

Om de problemen van het indexeren van sites op basis van frames te minimaliseren, worden speciale tags en parameters gebruikt in hun beschrijvingen. Het belangrijkste element van de containerstructuur is de frameset. Hij is het die vervangt in broncode standaard lichaam; Elke individuele container in de structuur wordt beschreven door een frame. Het bedrag in de paginacode komt overeen met het aantal afzonderlijke secties dat in het browservenster wordt weergegeven wanneer het wordt bekeken.

De opgegeven tags moeten zich op . bevinden Startpagina site, en dupliceer vervolgens de inhoud binnen elk van hen.

Dus, frames.. waar zijn ze voor en welke voordelen hebben ze? Dit is waar ik in dit hoofdstuk over zal proberen te praten, en natuurlijk over hoe ik ze kan implementeren en ermee kan werken ..

Vaak is het bij het maken van een site nodig om meerdere HTML-documenten tegelijkertijd in één browservenster te openen ... en dus worden de frames gewoon gemaakt om werkruimten voor elk document te definiëren. Frames zijn ook goed hulpmiddel, waarmee je pagina-opmaak kunt doen, ze dienen als een waardig "alternatief" voor de tabelmethode van pagina-indeling.. Ik nam het woord "alternatief" tussen aanhalingstekens omdat dit een heel andere manier is om een site met zijn eigen voor- en nadelen en het is best moeilijk om het te vergelijken met het tot nu toe bekende bouwen van een site .. maar first things first ..

Laten we beginnen? Laten we zeggen dat we drie HTML-documenten tegelijk in één browservenster moeten openen en ze bijvoorbeeld op deze manier ordenen:

Wat hebben we hiervoor nodig? Om te beginnen moeten we natuurlijk drie aparte html-document die we in feite in één venster zullen openen .. Laat het eerste document dragen grafische afbeelding en zal fungeren als een logo, laten we het logotype.html noemen, het tweede document zal wat inhoud zijn... laten we het menu.html noemen, en het derde document met een hoop tekst. tekst.html. Natuurlijk kun je je eigen namen bedenken, evenals de inhoud van de documenten, maar voor nu is het beter om de mijne te kopiëren ... het zal handiger zijn voor mij en jou.

Er zijn dus drie bestanden logotype.html, menu.html en text.html .. die we onder één dak moeten plaatsen, maar we hebben alleen nog geen dak ..

We schrijven "dak", hoofd document waarmee we onze bestanden zullen verbinden. Omdat het de belangrijkste zal zijn, noemen we het index.html.

frames

Hier is de structuur van het document, dat ons bekend is, waar we aan het begin van onze training op hebben gekauwd .. Frames doorbreken de heersende stereotypen! De structuur van het documentframe ziet er als volgt uit:

frames

Ontbrekende tag compenseert nieuwe tag - zet een frame of een set frames.. met deze vriend gaan we echt verder.

Label heeft attributen rijen en cols- deze attributen vertellen de browser hoe frames in het browservenster moeten worden gerangschikt

rijen- horizontaal cols- verticaal

In ons geval hebben we horizontale plaatsing van frames nodig .. dus we schrijven als volgt:

frames

rijen = "15%, 15%, 70%">

De percentages na het gelijkteken zijn niets meer dan de grootte van onze kozijnen in één groot raam browser, moeten we drie vensters plaatsen - vandaar dat de waarden gescheiden door komma's ook drie zijn. Onthoud hoe we de grootte van de cellen voor de tabel instellen, hier hetzelfde principe .. Net als in het geval van tabelcellen, kan de grootte van frames worden gespecificeerd als een percentage van het totale gebied en in pixels.

Hier zijn enkele voorbeelden van schrijven:
- zo'n record geeft aan dat er drie horizontale vensters zullen zijn waarbij de laatste 70% van het gebied van het browservenster in beslag zal nemen, en de eerste twee elk 15%.
- hier bevinden zich drie vensters verticaal, waarvan de breedte wordt aangegeven in pixels.
- een dergelijke invoer betekent dat het eerste en derde venster respectievelijk 100 en 180 pixels breed zullen zijn en dat het tweede frame het gehele resterende gebied zal beslaan.

We zijn klaar met het plaatsen van documenten, nu moet je ze aansluiten en genieten van het eerste resultaat..

Label en zijn attribuut src zal de browser het pad vertellen naar het html-document dat op de aangewezen plaats moet worden geopend. We hebben drie afzonderlijke documenten logotype.html, menu.html en text.html nu moeten we voor elk een pad registreren, wat we ook doen. (Ik neem aan dat je alle vier de bestanden in dezelfde map hebt staan en dat de paden ernaartoe de meeste hebben) eenvoudige invoer type: )

Index.html-bestand

frames

Logotype.html-bestand

frames

Menu.html-bestand

frames

Menu:

Champignonsoep
Potbonen in het Italiaans
Australische zomersalade
... ... ...

Het bestand text.html

frames

Champignonsoep

een hoop tekst..

V dit voorbeeld Ik heb alle vier de HTML-documenten opgemaakt waarbij index.html de belangrijkste is, en de andere drie zijn inplugbare pagina's, die elk in principe autonoom kunnen werken en alles bevatten wat je maar wilt, afbeeldingen, tabellen, teksten, links .. Dat heb ik gedaan dit om u inzicht te geven in het principe van het werken met frames. In verdere voorbeelden zal ik alleen het head-bestand met frames uploaden (anders nemen ze allemaal veel ruimte in beslag op de pagina), maar je weet dat ik alle andere bestanden heb met afbeeldingen, teksten, misschien iets anders .. nou, blijf niet achter me, bewerk langzaam je eigen pagina's voor de toekomstige trainingssite.. Ik weet niet waar je de jouwe over zult schrijven, maar hier beloofde ik een meisje te helpen bij het schrijven van een website gewijd aan koken..) ) zodat ik besloot om te mikken op twee vliegen in één klap .. een meisje een konijntje en een website ..)) zoiets ..))

In het bovenstaande voorbeeld hebben we alle vensters horizontaal gerangschikt door het attribuut te wijzigen rijen op de cols je kunt ze verticaal rangschikken. Maar wat als je onze ramen wilt plaatsen?

zoals dit ?: of zo ?: of zelfs zo ?:

Er is een uitgang. Laten we eens kijken naar voorbeelden.

Laten we beginnen met het eerste geval.. wat zien we? En we zien twee lijnen, waarvan de tweede is verdeeld in twee kolommen.

En nu, in volgorde:

- verdeel het browservenster in twee regels
- in de eerste regel laden we ons logo
- en verdeel de tweede rij in twee kolommen
- de eerste heeft een menu
- en in de tweede een hoop tekst
- sluit de kolomverdelingstag
- sluit de lijnverdelingstag

Over het algemeen is het onjuist om kolommen en rijen te zeggen, aangezien frames niets met tabellen te maken hebben behalve als een visuele overeenkomst, is het correct om horizontale en verticale frames te zeggen .. nou, dit is wat ik zeg zodat het duidelijker zou zijn voor jou ..

Nou, oké, laten we eens kijken naar een voorbeeld:

frames

In het tweede geval hebben we twee kolommen waarin de tweede is verdeeld in twee regels, dus we zullen als volgt schrijven:

- verdeel het venster in twee kolommen
- de eerste bevat inhoud
- en de tweede is verdeeld in twee regels
- logo
- en de hoofdtekst
- sluit lijnverdeling
- sluit de indeling in kolommen

frames

Het derde geval is iets ingewikkelder, maar je moet er niet bang voor zijn.. vooral omdat ik persoonlijk zo'n constructie heb gekozen voor een website over culinaire kunsten, zal ik hieronder uitleggen waarom. Wat we hebben? drie kolommen en de tweede kolom bevat in wezen ons eerste geval ..

- we verdelen het venster in drie kolommen (merk op dat de tweede kolom precies 800 pixels in beslag neemt en dat de twee extreme exacte afmetingen de resterende ruimte niet hebben en halveren)
- laad in de eerste kolom het html-document dat een puur decoratieve functie zal vervullen

-
-
- voeg ons "eerste geval" in de tweede kolom in
-
-
-
-

- laad hetzelfde bestand met versieringen in de derde kolom
- we slaan

Kijk naar een voorbeeld, dan zal ik uitleggen waarom ik het pad met vijf vensters heb gekozen.

frames

Dus waarom vijf ramen? Ik herinner me dat ik al schreef over het feit dat verschillende gebruikers internet op de monitoren, verschillende resoluties worden ingesteld en dienovereenkomstig aan verschillende schermen onze site zal er anders uitzien .. en als er geen specifieke afmetingen zijn, zullen al onze afbeeldingen, teksten en tabellen "zweven" voor die gebruikers wiens monitorresoluties anders zijn dan die van u. Toen we de site opmaakten met behulp van een tabel, werd het probleem met paginaformaten opgelost door een specifieke breedte en hoogte aan deze tabel toe te kennen, helaas kan dit niet met frames.. zelfs als je de breedte van de frames niet in procent opgeeft , maar in pixels is het nog steeds de laatste kolom die zal worden uitgerekt over de resterende breedte van het browservenster en de pagina, zoals ze zeggen, zijn "presentatie" zal verliezen. Dus wat kan er gedaan worden? We moeten kleine trucjes uithalen .. Nadat we de centrale kolom (waarin we eigenlijk de hele pagina hebben) de grootte van 800 pixels hebben ingesteld, hebben we voor eens en voor altijd de breedte ervan bepaald, en de dimensieloze eerste en derde kolom, naast het decor, fungeren als een soort "veren" waaraan het wordt opgehangen centrale kolom.. Dus voor mensen met een lage resolutie van de monitor zullen deze vensters / velden smal zijn, en voor mensen met een hoge resolutie, breed, dus de centrale kolom zal op geen enkele manier lijden en nu kunnen we er met volledig vertrouwen alle objecten in plaatsen, met nauwkeurige lokale referentie, zonder ons er zorgen over te maken verder lot... Vergelijk het eerste voorbeeld, waar er drie vensters zijn en het derde, waar er al vijf zijn, is het niet beter?

Op dit punt zullen we eindigen met de plaatsing en grootte van de frames .. en dus bleven we hier lang hangen .. laten we verder gaan.

Opruimen van de kozijnen.

In ons laatste voorbeeld is het eerste dat je opvalt een hele reeks schuifbalken, die zijn waar je wel en niet nodig hebt.. Laten we ze wegdoen, nou, je kunt ze ergens achterlaten.. Dit is gedaan met behulp van het attribuut scrollen- label , kan het een van de volgende drie waarden hebben:

Nee
Ja- altijd laten zien,
auto

frames

scrollen = "nee">

scrollen = "nee" >

scrollen = "nee">

Framemarges of anderszins de afstand van de randen van het frame tot de tekst of afbeelding, zoals in ons geval, worden ingesteld in pixels met behulp van attributen margebreedte en margehoogte label

frames

margebreedte = "0" margehoogte = "0">

margebreedte = "10" margehoogte = "10">

Laten we het even hebben over de frames rond onze frames.

Als u in het laatste voorbeeld hebt opgelet door de cursor over de rand van het frame te bewegen, krijgt de cursor een ander uiterlijk (grijpen en verplaatsen) en nu kan deze rand in beide richtingen worden gesleept door ingedrukt te houden de linkermuisknop. Soms speelt deze "mobiliteit" van frameranden de webmaster in de kaart, maar vaker hindert het nog steeds.. Om te voorkomen dat de gebruiker gaat spelen met de venstergroottes voor de tag bedacht een attribuut noresize

frames

noresize>

noresize>

noresize>
noresize>

noresize>

En hier is al lang een bekend attribuut grens stelt de breedte in pixels in van dezelfde frames tussen frames .. het wordt in de tag geschreven ... Zoals eerder de betekenis grens = "0" ons volledig ontlasten van het raamwerk.

frames

grens = "0">

grens = "0">

grens = "0">

Kaders en koppelingen.

Het is tijd om onze site nieuw leven in te blazen met links, maar hier is het probleem, een gewone link die ons bekend is Potbonen in het Italiaans zal openen dit document in hetzelfde frame waar het zich bevindt, in ons geval direct in het frame met de inhoud, en de inhoud zelf op het moment van klikken op deze link zal in de vergetelheid raken.. je kunt het onhandige voorbeeld bekijken.. klik op een link erin .. Wat er in de toekomst zou gebeuren dit is niet gebeurd, je moet de browser vertellen in welk frame het document moet worden geopend dat we nodig hebben, tenzij je het natuurlijk echt niet hoeft te openen in hetzelfde kader.

Ik herinner me dat we al kennis hebben gemaakt, in het hoofdstuk gewijd aan links, met attributen naam- naam en doel- het doel, ze worden ook toegepast en bij het werken met frames is het mechanisme enigszins gewijzigd, en is dus bijna hetzelfde. allereerst moet het frame waarin we eventuele documenten willen openen een individuele naam krijgen.

zo geschreven:

name = "osnovnoe"> je kunt elke naam bedenken .. het belangrijkste is om het niet te vergeten ..

Het is zo geschreven:

target = "osnovnoe"> Potbonen Italiaanse Stijl

Nou, ik denk dat je niet langer hoeft uit te leggen dat voordat je naar documenten verwijst, je ze moet maken .. in mijn geval hebben de bestanden (recepten) de namen text.html, text1.html, text2.html .. .

Bekijk een voorbeeld:

Index.html-bestand

frames

name = "osnovnoe" marginwidth = "10" marginheight = "10" noresize>

Menu.html-bestand

frames

Menu:

target = "osnovnoe"> Champignonsoep

target = "osnovnoe"> Potbonen Italiaanse Stijl

target = "osnovnoe"> Australische Zomersalade

... ... ...

Net als voorheen kan het document worden geopend in apart venster... Laat me je eraan herinneren dat het als volgt is geschreven:

doel = "_ leeg"> Potbonen Italiaanse Stijl

Of door het attribuut toe te wijzen doel betekenis _bovenkant open het in hetzelfde browservenster, maar op volledig scherm .. "op nul zetten" van alles wat er niet is .. geschreven als volgt:

doel = "_ boven"> Potbonen Italiaanse Stijl

Zo'n website bleek te zijn ... natuurlijk moeten we er nog aan werken en werken ... bovendien zal het, volgens mijn idee, een iets andere structuur hebben wat betreft het navigeren op de site, het zal nog steeds een hele stapel pagina's, mooi menu, maar wat betreft de framestructuur, ik denk dat die hetzelfde zal blijven..

Zwevend frame

Soms is het nodig om een ander HTML-document of zelfs een aantal van dergelijke documenten in te voegen op een pagina met een niet-geframede structuur in een apart venster. Om dit te bereiken, is er een tag </b>- het zogenaamde zwevende frame.</p> <p>Deze tag heeft een aantal attributen:</p> <b>src</b>- een vereist attribuut dat het pad aangeeft naar de pagina die wordt geopend <br><b>breedte</b>- de breedte van het zwevende frame in pixels of percentage <br><b>hoogte</b>- hoogte van het drijvende frame <p><b>scrollen</b>- de schuifbalk tonen</p><ul><li><b>Nee</b>- laat nooit de schuifbalk zien,</li><li><b>Ja</b>- altijd laten zien,</li><li><b>auto</b>- tonen in het geval dat het nodig is.</li> </ul><b>uitlijnen</b>- zwevende frame-uitlijning <ul><li><b>links</b>- links</li><li><b>Rechtsaf</b>- aan de rechterkant</li><li><b>bovenkant</b>- boven</li><li><b>onderkant</b>- onderstaand</li> </ul><b>frameborder</b>- de aanwezigheid van een rand rond het zwevende frame <ul><li><b>1 </b>- frame inschakelen</li><li><b>0 </b>- zet het frame uit</li> </ul><p>Alles bij elkaar is als volgt geschreven:</p> <b><iframe src="primer.html" width="300" height="250" align ="left" scrolling="auto" frameborder="1" >

Een voorbeeld van een zwevend framedocument:

Zwevend frame

Zwevend frame

Op deze pagina is een zogenaamd "zwevend frame" geïntroduceerd.
In een apart venster opent het een ander html-document voor weergave.

… … …

Geen frames

Sommige browsers ondersteunen de framestructuur van het document niet of interpreteren deze verkeerd, bovendien schakelen gebruikers in hun browserinstellingen vaak opzettelijk frameondersteuning uit html-structuren document. En hoewel het percentage van dergelijke browsers en gebruikers klein is, bestaan ze toch.

Stel je nu voor dat je je site hebt gebouwd met een framestructuur en dat sommige bezoekers, die misschien niet weten wat het probleem is, je site proberen te openen en dat hun browser een foutmelding geeft! Wat zullen ze van je site vinden? Ik denk zoiets van: "Ugh.. een soort onzin.. Ik kom hier niet meer!"

Om de gebruiker duidelijk te maken dat zijn browser/browserinstellingen geen frames ondersteunen, is er een tag

Het resultaat van het voorbeeld zal merkbaar zijn als je browser echt geen frames ondersteunt (hier dacht ik lange tijd .. :) zo ja, waarom zou je dit hoofdstuk überhaupt lezen?), Of als een experiment heb je ondersteuning voor frames uitgeschakeld in uw browser.

Label