Før du bruker rammer i praksis, ville det ikke skade å finne ut hva de er, samt fordelene ved å bruke rammer for å organisere informasjon på nettsider sammenlignet med de samme tabellene.

Alle eksemplene tidligere i boken så på justering av tekst, grafikk, tabeller og annet innhold i HTML-dokumenter i et nettleservindu. Den kan imidlertid vise innholdet i bare ett dokument. Ved å bruke rammer kan du dele opp nettleservinduet i flere deler, der forskjellige HTML-dokumenter kan vises. For eksempel, som vist i fig. 8.1.

Ris. 8.1. Tre dokumenter i ett vindu

I dette tilfellet er innholdet i hvert dokument justert i forhold til sin egen vindu - ramme. Tenk deg nå at den øvre venstre rammen inneholder koblinger til nettstedsressurser, den nedre venstre inneholder noe reklame eller annen informasjon, og den store høyre rammen inneholder tekst. La oss si at når du navigerer på et nettsted, endres bare teksten som vises i høyre ramme. I dette tilfellet tillater bruken av rammer følgende.

Rull gjennom innholdet i noen rammer uavhengig av innholdet i andre.

Naviger mellom nettstedssider, last bare inn innhold i høyre ramme. Dette sparer brukeren tid, siden det statiske innholdet på siden kun lastes ned fra serveren én gang.

Nå som du har blitt kjent med rammer, kan du se på hvordan nettsteder opprettes og konfigureres ved hjelp av rammer.

Selv det enkleste nettstedet vist i fig. 8.1, består av fire HTML-dokumenter. Innholdet i tre av dem vises i nettleservinduet. Det fjerde dokumentet, som må åpnes av nettleseren, inneholder beskrivelser av rammene som vinduet er delt inn i, og inkluderer også instruksjoner til nettleseren hvorfra sider skal lastes inn i de opprettede rammene. Innholdet i HTML-dokumentet er vist i eksempel 8.1.

Eksempel 8.1. Rammebeskrivelsesfil

Her kan du se to nye HTML-elementer: FRAMESET og FRAME. Den første brukes til å dele nettleservinduet eller overordnet rammevindu i separate rammer. FRAMESET-elementet er spesifisert av sammenkoblede tagger Og. Når du deler et vindu i rammer, brukes følgende attributter til FRAMESET-elementet:

Cols - en liste over breddeverdier for de opprettede rammene (både absolutte verdier i piksler og prosenter, så vel som proporsjonale, kan brukes, se eksempel 8.1);

Rader – liste over høydeverdier for opprettede rammer (verdier ligner på verdiene til cols-attributtet).

Du kan angi verdiene til bare ett av attributtene. Dessuten, hvis bare col-attributtet er angitt, vil de opprettede rammene oppta hele høyden på nettleservinduet. Hvis bare rows-attributtet er angitt, vil de opprettede rammene oppta hele bredden av nettleservinduet. Hvis begge attributtene er angitt, opprettes rammer fra venstre til høyre og topp til bunn.

Mellom tagger Og må inneholde enten beskrivelser av hver ramme ved hjelp av HTML FRAME-elementet, eller definisjoner av nestede rammer. La oss først se på å beskrive rammer ved hjelp av FRAME-elementet. Dette HTML-elementet er spesifisert ved hjelp av en enkelt kode . Nedenfor er de mest brukte attributtene:

Navn – spesifiserer navnet på rammen, slik at den kan brukes som en målramme i hyperkoblinger;

Src – URI for dokumentet hvis innhold vises i rammevinduet;

Noresize – boolsk attributt som blokkerer muligheten til å endre størrelse på rammevinduet;

Rulling – lar deg vise eller skjule rullefelt i et rammevindu, kan ta verdiene ja (vis rullefelt), nei (ikke vis rullefelt) eller auto (standard: vis rullefelt bare hvis innholdet ikke gjør det) passer inn i vindusrammen);

Frameborder – indikerer om nettleseren skal vise rammevindusrammen, kan ta verdier 1 (rammen er vist som i fig. 8.1, brukt som standard) eller 0 (rammen vises ikke);

Marginhøyde – angir den vertikale avstanden mellom kantene og innholdet i rammen.

Konseptet med nestede rammer ble berørt tidligere. Nå er det på tide å se på rammehekking i detalj. I HTML kan rammer nestes i hverandre et hvilket som helst antall ganger. Dette brukes når du trenger å dele et nettleservindu, for eksempel, som gjort i fig. 8.1. Studer følgende avsnitt nøye.

Dette skaper et ytre sett med to rammer som opptar hele høyden på nettleservinduet. Dette skaper et nytt rammesett i venstre ramme av det ytre settet. Det skal bemerkes at blokken … ligner på et enkelt FRAME-element (beskriver innholdet i én ramme fra det ytre settet). Ved å analysere fragmentet ovenfor kan vi tydelig si at den venstre rammen til det ytre settet er delt, og innholdet i side3.html-dokumentet lastes inn i høyre ramme.

Det er en mer bemerkelsesverdig forskjell i rammesettdokumentet - det har ikke en kropp (BODY-element). Et slikt dokument har ikke lov til å inneholde annet innhold enn rammesettdefinisjonen.

Nesten helt i begynnelsen av dette kapittelet ble det sagt at du ved hjelp av rammer kan organisere nettstednavigering på en slik måte at bare nødvendig informasjon vil bli lastet ned fra serveren, og alle statiske deler (for eksempel en liste over nettstedkoblinger, nettstednavn osv.) vil bli gjenstand for endringer eller omstart fra serveren. Denne muligheten oppnås ved å spesifisere en målramme for hyperkoblinger, når du klikker på hvilken det er nødvendig å endre bare innholdet i en av rammene.

Målattributtet brukes til å spesifisere målrammen for hver hyperkobling, det vil si rammen der innholdet i HTML-dokumentet som åpnes av koblingen vil bli vist. Verdien til dette attributtet kan enten være navnet på den ønskede rammen (verdien til den rammens navneattributt) eller en av følgende forhåndsdefinerte strengverdier:

Blank – åpne dokumentet i et nytt vindu;

Selv – åpne dokumentet i samme vindu der hyperkoblingen er plassert;

Foreldre – åpne dokumentet i vinduet til overordnet ramme (samme som _selv, hvis rammen der hyperkoblingen er plassert ikke har en overordnet);

Topp – erstatter innholdet i nettleservinduet med innholdet i dokumentet som åpnes, og forkaster alle tidligere opprettede rammer.

Målattributtet støttes for alle HTML-elementer som lar deg lage hyperkoblinger: A, LINK, AREA.

Nå, for å konsolidere kunnskapen vi har fått, vil vi omarbeide dokumentet fra eksempel 7.11 i forrige kapittel, og plassere lenker, navnet og teksten til nettstedet i separate rammer.

Dokumentet som beskriver rammesettet vil få navnet index.html. Innholdet er vist i eksempel 8.2.

Eksempel 8.2. Rammesett Beskrivelse Fil

marginheight = 0 rammekant = 0>

I eksemplet ovenfor er navnet kun tildelt én ramme (den nederste til høyre). Det er i denne rammen innholdet i dokumentene vil vises.

Links.html-filen inneholder et dokument med hyperkoblinger til eksempelfilene (den inneholder også en lenke til startsiden). Det antas at eksempelfilene ligger i mappen Eksempler. Nedenfor er innholdet i links.html-filen (merk verdien av målattributtet til hyperkoblinger) (eksempel 8.3).

Eksempel 8.3. Fil med hyperkoblinger

Kapitteltekst

Eksempel 7.1

Eksempel 7.2

Eksempel 7.3

Eksempel 7.4

Eksempel 7.5

Eksempel 7.6

Eksempel 7.7

Eksempel 7.8

Eksempel 7.9

Eksempel 7.10

title.html-filen inneholder tittelen på nettstedet (sammen med en hypotetisk logo), som vises i den tilsvarende rammen (eksempel 8.4).

Eksempel 8.4. Fil for rammen med sideoverskriften

7. Tabeller

Som du kan se av teksten i HTML-dokumentet (se eksempel 8.4), for å oppnå en akseptabel plassering for logobildet, måtte vi ty til å bruke en tabell. På eksempelsiden under vurdering, er en annen fil brukt - start.html. Denne filen inneholder startsiden til nettstedet. Innholdet i denne filen kan være hva som helst. Når du skrev eksemplet, ble en del av teksten til Chapter plassert i start.html-filen. 7. For å spare plass i boken er ikke innholdet i denne filen gitt. Etter at alle sidefilene er opprettet, kan du beundre resultatet (fig. 8.2). Ris. 8.2. Nettsted laget med rammer Standard målramme Til slutt, la oss se på hvordan du kan redusere mengden tekst i et HTML-dokument når du bruker den samme rammen som en målramme for mange hyperkoblinger. Ta en ny titt på teksten i eksempel 8.3. Hver hyperkobling i dette eksemplet har samme målattributtverdi. For å unngå å måtte spesifisere det mange ganger, kan du tilordne en standard målramme. Standard HTML-målrammen er satt til BASE-elementet (en enkelt tag ). Dette elementets målattributt er satt til navnet på standardrammen. Hvis BASE-elementet brukes, må det plasseres i HEAD av HTML-dokumentet. Med det sagt kan eksempel 8.3 omskrives som følger (eksempel 8.5). Eksempel 8.5. Bruke standard målramme Kapitteltekst Eksempel 7.1 Eksempel 7.2 Eksempel 7.3 Eksempel 7.4 Eksempel 7.5 Eksempel 7.6 Eksempel 7.7 Eksempel 7.8 Eksempel 7.9 Eksempel 7.10 8.4. NORAMES-element Rammer er et veldig attraktivt middel for å designe nettsider, som burde vært tydelig fra eksemplene gitt tidligere. Rammer i HTML dukket imidlertid ikke opp umiddelbart, og i lang tid var de ikke standardiserte, så behandlingen og presentasjonen av dokumenter med rammer av forskjellige nettlesere kan fortsatt variere betydelig. I tillegg kan et ganske stort antall brukere fortsatt ha eldre versjoner av nettlesere som ikke støtter rammer i det hele tatt. Hvis det er viktig at brukeren ser minst noe når han ser på et nettsted som bruker rammer, bør du bruke NOFRAMES HTML-elementet. Dette elementet er spesifisert av sammenkoblede tagger Og. Den er plassert i én fil med en beskrivelse av rammesettet. HTML-tekst plasseres mellom kodene til NOFRAMES-elementet, som nettleseren viser hvis den ikke støtter rammer (eller hvis brukeren har deaktivert rammestøtte i nettleseren). Hvis nettleseren er i stand til å vise rammer, ignoreres teksten mellom NOFRAMES-elementtaggene. Tekst mellom tagger Og kan formateres nøyaktig det samme som om det var mellom tagger Og. Det er klart at mye mer bærbare nettsteder kan opprettes ved å bruke NOFRAMES-elementet, spesielt hvis man sørger for at ingen viktig informasjon går tapt når rammer ikke kan vises. For nettstedet diskutert tidligere kan du lage en versjon som ikke bruker rammer (laget for eksempel ved å bruke bare tabeller), og inne i NOFRAMES-elementet kan du plassere en informasjonsmelding og en lenke til denne versjonen av nettstedet (eksempel 8.6 ). Eksempel 8.6. Bruk av NORAMES-elementet marginheight = 0 rammekant = 0> Merk følgende! Nettleseren din støtter ikke rammer. For å åpne en versjon av nettstedet som ikke bruker rammer, klikk her. 8.5. Flytende rammer I tillegg til de vanlige rammene som er omtalt tidligere, tillater HTML bruk av såkalte flytende rammer. Flytende rammer ser nøyaktig det samme ut som innebygde HTML-dokumenter: de vises av nettleseren i et vindu som ligger direkte i teksten (Figur 8.3). Ris. 8.3. Utseendet til en flytende ramme For å lage flytende rammer, bruk HTML IFRAME-elementet (sett med parede tagger ). Den flytende rammen er konfigurert ved hjelp av følgende attributter: Src – URI for HTML-dokumentet som vises i rammevinduet; Rammekant – visningsmodus for rammekant, kan ha verdier 0 (viser ikke kantlinje) eller 1 (vis kantlinje); Rulling – visningsmodus for rullefelt for rammeinnhold, kan ta verdiene nei (ikke vis rullefelt), ja (vis rullefelt) eller auto (brukt som standard, vis rullefelt bare hvis innholdet ikke passer); Margbredde – angir den horisontale avstanden mellom rammekantene og innholdet (i piksler); Marginhøyde – angir den vertikale avstanden mellom kantene og innholdet i rammen; Juster – setter posisjonen til den flytende rammen i teksten, kan ta verdiene til venstre, høyre og senter; Bredde – angir bredden på det flytende rammevinduet verdien kan være enten absolutt (i piksler) eller prosent; Høyde – angir høyden på det flytende rammevinduet. Tekst mellom tagger vises av nettleseren bare hvis det er umulig å vise selve den flytende rammen. Som et eksempel på bruk av IFRAME-elementet, nedenfor er teksten til et HTML-dokument, hvis utseende er vist i fig. 8.3 (eksempel 8.7). Eksempel 8.7. Flytende rammedokument En flytende ramme ser slik ut: