Iframe och Frame - vad de är och hur man bäst använder ramar i HTML. Använda ramar i HTML Hur man öppnar dokument med en länk i en ram

Termen "ram" kom till oss från på engelska. Översatt betyder detta ord "ram" och representerar ett separat område av fönstret. I sin struktur är ett sådant avsnitt ett helt färdigt HTML-dokument.

Enskilda ramar delar upp webbläsarfönster i sektioner som placeras sida vid sida. I det här fallet laddas varje ram med sin egen helsida. Ramteknologi orsakar fortfarande mycket kontrovers, men det måste sägas att toppen av dess popularitet redan har passerat. I det här ögonblicket denna teknik är föråldrad och vanliga ramar stöds inte längre i HTML5.

Teknikens historia

Idag kan vi konstatera att beslutet att gå bort från att arbeta med ramteknik äntligen är taget. Webbplatsen https://www.w3.org/TR/html5-diff/#obsolete-elements anger tydligt att de vanliga frame-, frameset- och noframes-taggarna för att skapa en sådan struktur är utfasade. Som ett argument tillhandahålls uppgifter om att användningen av en sådan struktur negativt påverkar användbarheten av webbplatser och deras tillgänglighet på Internet.

Men modern teknik stödjer IFRAME-elementet. Dess användning gör att du kan infoga ramar i textblock på sidor. Dessutom kan sådana element justeras i förhållande till själva texten. En viktig punkt: du kan inte ändra storleken på inbyggda ramar i princip. De har inte ett motsvarande attribut för storleksändring.

I framtiden, utan tekniksprång, är ytterligare användning av ramar osannolikt. Och det är värt att komma ihåg att den ledande organisationen för standardisering av internetteknologier - W3C - tydligt har indikerat att sådana strukturer inte bör användas av webbplatsutvecklare.

Det vill säga, ramar ska i princip inte användas för att strukturera sidor när man skapar nya resurser. Men med stöd och förbättring av befintliga webbplatser kommer kunskap om teknikens funktioner och deras användning att vara mycket användbar och produktiv.

Fördelar med ramar

Bland fördelarna med ramteknik är användarvänlighet, hög hastighet och möjligheten att korrekt positionera information i vissa delar av fönstret.

Användningen av ramar ger besparingar på volymen av överförd trafik när du arbetar med webbplatsen. När allt kommer omkring, när du kommer åt ett annat avsnitt med information, uppdateras vanligtvis bara en del av sidan, och inte hela koden.

Denna struktur ger intressanta navigeringsalternativ genom resursinnehåll. När allt kommer omkring, i webbläsarfönstret i angränsande ramar kan du se olika informationsblock. Det är viktigt för användare att veta att sökning inom en ram motsvarar att utföra en sådan operation på en separat sida.

När du arbetar med webbplatsen kan du dynamiskt ändra storleken på en separat sektion, vilket är svårt att implementera med andra tekniska lösningar.

Möjliga nackdelar

Problem med webbplatser som använder ramar ackumulerades gradvis, men idag har de nått en tröskelnivå. Bland de största nackdelarna är:

  1. Otillfredsställande användbarhet. Idag växer andelen användare av mobila enheter och surfplattor med små skärmupplösningar och överstiger redan antalet som besöker sajter från stationära datorer och bärbara datorer. Och här skapar användningen av ramar allvarliga problem med sidornas anpassningsförmåga när de visas på olika enheter. Detta problem har ingen praktisk lösning idag.
  2. Försämring av webbplatsens tillgänglighet för olika program. En ökning av antalet ytterligare program (till exempel skärmläsare) avslöjar mycket sämre tillgänglighet för information för läsning.
  3. Sidorna visas inte korrekt. Ofta ser layouten av sidor med en sådan struktur felaktig ut i webbläsare ur designsynpunkt. Och detta beror på teknikens funktioner. Ur SEO-synpunkt är användningen av ramar i HTML-layouten på en sida högst oönskad.
  4. Tillgänglighet för en enda adress för hela strukturen. Som ett resultat kan de interna sidorna på en sådan webbplats inte bokmärkas. Detta leder till olägenheter för användarna.
  5. Felaktig indexering av sökmotorer. Närvaron på en webbplats av flera fullfjädrade dokument, från vilka en sida bildas, komplicerar avsevärt sökmotorernas arbete. Detta leder till betydande fel under indexeringen. Som ett resultat leder felaktig definition av ämnen och sidadresser till förlust av kritiskt innehåll från indexering.
  6. Respektlöshet. Detta är ett ganska ovanligt fel för resurser på nätverket. Och ändå måste det sägas att det faktum att layouten av webbplatser på ramar blir föråldrad leder till att författarna och ägarna av sådana resurser anses vara retrograda. Men det finns några undantag. Även moderna sajter som är värd för chattrum använder vanligtvis ramar.

Indexering av ramar av sökmotorer

Informationen som kommer från sökmotorer säger oss tydligt att sajter med ramar indexeras märkbart långsammare. I det här fallet uppstår ofta fel relaterade till själva strukturen. När allt kommer omkring visar varje ram en fullfjädrad internetsida. Och just en sådan del av webbplatsen kan inkluderas i indexeringsdatabasen.

Den negativa aspekten av sådan indexering är att när användaren går till insidan av sidan, ser användaren vanligtvis inte menyer och andra navigeringsmekanismer. Och detta är inte förvånande. Du måste förstå att uppdatering av ramen inte är en lösning på problemet i det här fallet. När allt kommer omkring är alla navigeringsmekanismer placerade i en annan container.

Ett annat problem är att huvudsidan i en containerstruktur ofta bara innehåller en titel, metabeskrivningstaggar och en FRAMESET-tagg. Och detta verkar logiskt - trots allt placeras meningsfullt innehåll i separata dokument. Det är dessa som webbplatsbesökaren kommer att se på sidan i ramar.

Men en sökrobot indexerar nästan aldrig en sådan sida. Han hittar inget innehåll på den som är användbart för besökarna. Sökrobotar är konfigurerade på ett sådant sätt att de försöker hämta och indexera information placerad inuti body-taggen. Det är här sökandet efter användbart innehåll för användaren sker. Men på ramsidan finns det ingen sådan tagg, den ersätts av FRAMESET.

Detta problem kan delvis lösas genom att använda NOFRAMES. Men på många webbplatser ges endast information om att webbläsaren inte stöder ramar när du kommer åt den. Och för att se sidan måste du använda ett annat program.

Sådana fall skapar många problem för användare som när de besöker en sida inte ser menyn och annan information som ska visas. Om ramar placeras på en webbplats reduceras dess parametrar ur SEO-synpunkt. Samtidigt indikerar användarbeteendestatistik att resursens auktoritet bland sökmotorer sjunker. Detta har definitivt en negativ inverkan på webbplatstrafiken.

Det är särskilt svårt för sökmotorer och indexeringsrobotar att bearbeta kapslade och flera personalstrukturer. Det faktum att varje behållare har alla funktioner i ett separat dokument, men inte innehåller fullständig navigering och annan information, komplicerar situationen ytterligare.

Du kan göra sökmotorernas arbete enklare genom att använda korrekta länkar på sidor. I det här fallet måste du duplicera alla menylänkar så att de kan hittas inom varje enskild del av sidan. Men detta komplicerar och bromsar avsevärt arbetet med att optimera sajten och uppdatera information om den.

Erfarenheterna från många optimerare och webbansvariga tyder också på att sidor på ramar inte får hög ranking i sökresultaten. Detta händer även om de ingår i indexeringsdatabasen.

Funktioner av webbplats marknadsföring i ramar

Vissa sökmotorer indexerar inramade filer felaktigt eller mycket felaktigt. Som ett resultat är indexdatabasen inte fylld med adresser till överordnade resurser (som det borde vara), utan med länkar till underordnade webbplatser.

För att minimera problemen med att indexera webbplatser baserat på ramar, används speciella taggar och parametrar när de beskrivs. Huvudelementet i behållarstrukturen är ramuppsättningen. Det är han som ersätter standardkroppen; i källkoden. Varje enskild behållare i strukturen beskrivs av en ram. Dess kvantitet i sidkoden motsvarar antalet enskilda avsnitt som visas i webbläsarfönstret när de visas.

Dessa taggar bör placeras på startsida webbplats och duplicera sedan innehållet i var och en av dem.

Användningsområden för ramar

Utvecklare av HTML-dokument har ett ganska brett urval av formulär för att visa information på sidor. Text och grafisk information kan ordnas och organiseras med hjälp av listor, tabeller eller helt enkelt med hjälp av justeringsalternativ, ställa in horisontella linjer och dela in i stycken. Ibland räcker inte dessa funktioner och då måste du dela upp webbläsarfönstret i separata områden eller ramar. I ett antal ryskspråkiga beskrivningar av HTML-språket används termen frames istället för termen frames. Användningsfrekvensen för båda termerna är ungefär densamma.

Valet av en ramstruktur för att visa information på WWW är motiverat i följande fall:

  • vid behov, hantera inläsningen av dokument till ett av underområdena i webbläsarens visningsfönster medan du arbetar i ett annat underområde;
  • att lokalisera information på en viss plats i visningsfönstret som alltid måste finnas på skärmen, oavsett innehållet i andra delområden av skärmen;
  • att presentera information som bekvämt är anordnad i flera intilliggande delområden av fönstret, som var och en kan ses oberoende av varandra.

Den givna listan uttömmar inte alla möjliga fall där ramar kan appliceras, men är av rekommendationskaraktär.

Låt oss först överväga typiska användningar av ramar med hjälp av exempel på verkliga HTML-dokument och sedan gå till reglerna för att utveckla dokument som innehåller ramar.

I fig. Figur 5.1 visar en av HTML-sidorna för Finmarket-byrån, som är specialiserad på att tillhandahålla information från finans- och aktiemarknaderna i Ryssland.

Ris. 5.1. Ett typiskt webbdokument med ramstruktur

Den här sidan delar upp webbläsarfönstret i tre ramar. Nedre delen fönstret upptar 20% av höjden på hela fönstret och innehåller permanent information, vilket i detta fall är en grafisk meny som låter dig komma åt de viktigaste avsnitten när som helst. Den här ramen kan inte ändra sin storlek baserat på användarkommandon och har inga rullningslister. Övre del fönster (80% av höjden) delas horisontellt i två ramar. Den vänstra ramen innehåller innehållsförteckningen för dokument som kan ses av användaren. Den högra ramen, som upptar större delen av visningsfönstret, är avsedd att visa själva dokumenten. När de initialt laddades delade dessa två ramar webbläsarfönstret horisontellt med ett förhållande på 15 % till 85 %. Detta förhållande kan ändras av användaren under visning, vilket gör att du kan välja de optimala ramstorlekarna med hänsyn till innehållet i de laddade dokumenten. Var och en av dessa ramar har sin egen rullningslist, så att du kan se hela innehållet i ramen, oavsett storleken på själva ramen, hela webbläsarfönstret eller de teckensnitt som används. När du väljer en länk i den vänstra ramen, kommer motsvarande dokument att laddas i den högra ramen. Denna struktur låter dig samtidigt se både innehållsförteckningen för dokument och innehållet i det valda dokumentet på skärmen.

Här, utan förklaring, är ett fragment av HTML-koden som används för att bygga ett dokument med denna struktur:

Det här exemplet visar den mest typiska användningen av ramstrukturer, där en ram fungerar som en innehållsförteckning för dokument och en annan används för att ladda deras innehåll. Att lösa ett sådant problem utan att använda ramar görs vanligtvis på följande sätt. På en av sidorna finns en innehållsförteckning, bestående av länkar till andra dokument eller deras enskilda fragment. När du klickar på en sådan länk försvinner innehållsförteckningen, och det nödvändiga dokumentet laddas på sin plats, efter att ha läst vilket du vanligtvis behöver återgå till innehållsförteckningen. Vid användning av ramar blir denna retur onödig, eftersom innehållsförteckningen alltid finns på en del av skärmen.

Du kan hitta den på Internet webbplats för den elektroniska utgåvan av den populära adress- och telefonkatalogen "All Petersburg" i St. Petersburg.

Den elektroniska versionen av katalogen finns tillgänglig på http://www.allpetersburg.ru och låter dig hitta nödvändig information baserat på användarförfrågningar. Den här dokumentsidan har också en ramstruktur och består av två ramar, varav den första är 100 pixlar bred och den andra tar upp hela den återstående bredden av visningsporten. Ramen på vänster sida används för en grafisk meny som ständigt finns på skärmen, och innehåller även Nevalinks företagslogotyp. Den andra ramen innehåller dokumentet, som i det här fallet är ett användarformulär. Strukturen på denna sida definieras av följande HTML-kod:

Ramar är väldigt lika tabeller - de delar båda upp webbläsarfönstret i rektangulära områden där viss information finns. Men med hjälp av ramar kan du inte bara lösa problemet med att formatera dokumentsidor, utan också organisera interaktionen mellan dem. Den grundläggande skillnaden mellan ramar och tabeller är att varje ram måste ha sitt eget separata HTML-dokument, men innehållet i alla tabellceller är alltid en del av samma dokument. Dessutom kan sidan som visas i ramen rulla när den visas oberoende av de andra. Varje ram är i huvudsak en separat "mini-webbläsare". Till skillnad från ramar, vars hela struktur alltid visas på skärmen, kanske bord inte passar helt i fönstret och kan bara ses i delar. Det följer att om det totala antalet celler i HTML-tabeller är praktiskt taget obegränsat och kan nå flera hundra, överstiger antalet ramar i ett dokument vanligtvis inte flera enheter.

Råd

Om du bara behöver formatera ett dokument räcker det med att begränsa dig till att använda tabeller. Om du behöver lösa mer komplexa problem, till exempel organisera interaktion mellan fönsterdelområden eller skapa delområden som är permanent placerade på skärmen, är det praktiskt att använda ramar.

I slutändan beror valet av dokumentstruktur - tabellform eller ram - på många faktorer och kan inte entydigt förutbestämmas.

Det finns ocksåsidor som verkar vara byggda på liknande sätt som de tidigare. Till exempel kan du ta sida av en mycket populär världsomspännande samling av mjukvaruprodukter som främst är utformade för att arbeta med Internet. Server adress http://www.tucows.com. Observera att namnet på servern bestämdes av en förkortning som härrör från förkortningen av samlingens fullständiga namn - The Ultimate Collection of Winsock Software. Eftersom förkortningen tucows visade sig vara konsonant med frasen två kor (två kor), finns bilder av kor ofta på serversidorna, och värderingen av mjukvaruprodukter uppskattas i antalet ljuvningar ("Moo") och är grafiskt avbildad som en rad med motsvarande antal kor. De flesta av serversidorna är byggda på samma sätt - på vänster sida av fönstret finns en lista över tillgängliga sektioner, och på höger sida finns en lista över mjukvaruprodukter för den valda sektionen. Vid första anblicken bör strukturen på dokumentet se ungefär ut som i de tidigare exemplen. Detta dokument använder dock inte ramar! Den här sidan är byggd med en tabell som består av bara en rad med två celler. Tabellen har ingen ram och tjänar endast syftet att formatera sidan. Intrycket av en vertikalt delad skärm skapas genom att använda en bakgrundsgrafik som innehåller vertikal linje, och inte ett tabellrutnät alls. Du kan verifiera detta genom att titta på sidan utan att ladda bilder. Användningen av en tabell här beror tydligen på överväganden om större tillgänglighet för dokument, eftersom ramar inte tillåter visning i alla webbläsare.

Nackdelen med detta tillvägagångssätt i det här fallet är behovet av att upprepa hela listan med avsnitt (vänster sida av sidan) i varje dokument, vilket ökar filstorleken något.

En jämförelse av exemplen ovan visar att användningen av tabeller och ramar ibland kan vara utbytbara och bestäms av utvecklarnas önskemål. Observera att det ofta är omöjligt att avgöra hur den är uppbyggd när man tittar på en sida med ett dokument som visas på den. Slutanvändaren behöver inte känna till dokumentets interna struktur, men när han utvecklar sina egna webbsidor skulle det vara mycket användbart att bekanta sig med källkoden för befintliga dokument. I det första exemplet (se fig. 5.1) är dokumentets ramstruktur omedelbart synlig - närvaron av två vertikala rullningslister bestämmer redan närvaron av individuella ramar. Följande två exempel är mycket lika i utseende, och det är omöjligt att avgöra att det första av dem är byggt med ramar och det andra - med tabeller. Skillnader visas bara när du arbetar med dem. I exemplet med en telefonkatalog, när du rullar ett dokument, kommer den vänstra delen av fönstret att förbli på plats, vilket endast är möjligt om det finns en ramstruktur. I följande exempel (en samling mjukvaruprodukter) kommer rullning att flytta hela innehållet i fönstret.

Du kan se dokumentstrukturen när du arbetar med Netscape-webbläsaren med hjälp av alternativet Sidinformation (i version 3.x av Netscape-webbläsaren kallades detta menyalternativ Dokumentinformation) i Visa-menyn (Fig. 5.2).

Ris. 5. 2 . Netscape Browser View Menu

Dessutom kan du alltid se HTML-källkoden för hela dokumentet genom att använda alternativet Sidkälla i Visa-menyn (eller alternativet View Frame Source på högerklicksmenyn för att se HTML-koden för dokumentet som laddas i vald ram).

Råd

Du bör inte missbruka användningen av ramar i onödan, och deras antal bör inte överstiga tre eller fyra.

Ofta på riktiga sidor på Internet kan du se följande fall av användning av ramar:två intilliggande ramar används för att ladda dokument som är bekväma att se samtidigt och jämföra med varandra. Vart och ett av de två dokumenten som laddas in i ramar använder en tabellform för att presentera information. Som ett resultat av denna organisation av data kan var och en av de två tabellerna ses (eller skrivas ut) separat, eller studeras i jämförelse med den andra.

Alla exempel som ges i det här avsnittet är hämtade från sidorna på populära WWW-servrar och kan kanske fungera som exempel på användningen av ramar i HTML-dokument.

Efterföljande avsnitt i detta kapitel täcker regler för att skriva dokument som innehåller ramar.

Regler för att beskriva ramar

Låt oss nu gå vidare och överväga reglerna för att skriva taggar som används för dokument med ramstrukturer.

Låt oss först titta på den fullständiga HTML-koden som skapar ett dokument med mediumkomplexa ramar:

</p> <p>

Detta exempel skapar den inramade sidan som visas i figuren. 5.3. Som du kan se definierar denna HTML-kod fyra ramar. Den övre ramen spänner över hela sidans bredd och innehåller rubriken. Därefter kommer två centrala ramar, varav den ena är placerad på vänster sida och tar upp 25 procent av skärmens bredd, och den andra tar upp det återstående utrymmet. Den sista, fjärde bildrutan upptar den nedre fjärdedelen av skärmen. Ett separat HTML-dokument läses in i varje ram, vars namn bestäms av SRC-parametern.

Som framgår av exemplet används taggar för att beskriva strukturen hos ramar , Och . Låt oss titta på syftet med dessa taggar.</p> <span> <br><img src='https://i0.wp.com/webnav.ru/books/html4/frames/07.gif' width="100%" loading=lazy loading=lazy></span> <p><i><b>Ris. 5. <span>3 . </b> Resultatet av att webbläsaren Netscape visar HTML-dokumentet med ramar som visas i exemplet</span> </i></p> <p><b>Märka <FRAMESET> </b></p> <p>Ramar definieras i en struktur som kallas FRAMESET, som används för sidor som innehåller ramar istället för en BODY-sektion <a href="https://whatsappss.ru/sv/tips/pole-html-dokumenta-1s-obychnye-formy-upravlyaemye-formy-pole-html.html">vanliga dokument</a>. Webbsidor som består av ramar kan inte innehålla en BODY-sektion i sin HTML-kod. I sin tur kan sidor med en BODY-sektion inte använda ramar.</p> <p><i><b>Råd</b> </i></p> <p><i> <span>Eftersom inramade sidor inte har en BODY-sektion, finns det inget sätt att ställa in en bakgrundsbild och bakgrundsfärg för hela sidan. Kom ihåg att dessa inställningar bestäms av parametrarna BACKGROUND och BGCOLOR skrivna i BODY-taggen. Detta hindrar dig dock inte från att ladda dokument med sina egna bakgrundsinställningar i varje ram.</span> </i></p> <p>Behållare av taggar <FRAMESET>Och</FRAMESET> ramar in varje ramdefinitionsblock. Inuti behållaren <FRAMESET>kan bara innehålla taggar <FRAME>och kapslade taggar <FRAMESET>. </p> <p>Märka <FRAMESET>har två parametrar: ROWS (rader) och COLS (kolumner) och skrivs enligt följande:</p> <p><FRAMESET ROWS="список_ значений" COLS="список_ значений">. </p> <p><i><b>Notera</b> </i></p> <p><i> <span>Vissa webbläsare tillåter ytterligare taggparametrar <FRAMESET></span> </i></p> <p>Du kan definiera värden för ROWS eller COLS, eller båda. Det är nödvändigt att definiera minst två värden för minst en av dessa parametrar. Om en annan parameter utelämnas antas dess värde vara 100 %.</p> <p><i><b>Råd</b> </i></p> <p><i> <span>Om i en tagg <FRAMESET>Om endast ett värde är definierat för ROWS och COLS, kommer denna tagg att betraktas som ogiltig och webbläsaren kommer att ignorera den. Det är med andra ord omöjligt att avgöra <FRAMESET>, bestående av endast en ram.</span> </i></p> <p>Lista över tagg ROWS och COLS parametervärden <FRAMESET>är en kommaseparerad lista med värden som kan anges i pixlar, procent eller relativa enheter. Antalet rader eller kolumner bestäms av antalet värden i motsvarande lista. Till exempel spela in</p> <p><FRAMESET ROWS="100,240,140"> </p> <p>definierar en uppsättning av tre ramar. Dessa värden är absoluta pixelvärden. Med andra ord, den första bilden (första raden) är 100 pixlar hög, den andra är 240 pixlar och den sista är 140 pixlar hög.</p> <p>Att ställa in ramstorleksvärden i pixlar är inte särskilt bekvämt. Detta tar inte hänsyn till att webbläsare körs på olika operativsystem och med olika skärmupplösningar. Samtidigt är det möjligt att definiera absoluta storleksvärden för vissa fall, till exempel för att visa en liten bild med kända dimensioner. Det bästa alternativet skulle vara att ställa in värdena i procent eller relativa enheter, till exempel:</p> <p><FRAMESET ROWS="25%,50%,25%">. </p> <p>Det här exemplet skapar tre ramar som är placerade som rader över hela skärmens bredd. Den översta raden kommer att ta upp 25 procent av den tillgängliga skärmhöjden, den mittersta raden kommer att ta upp 50 procent och den nedre raden kommer att ta upp 25 procent. Om summan av de angivna procentsatserna inte är lika med 100%, kommer värdena att skalas proportionellt så att resultatet blir exakt 100%.</p> <p>Värdena i relativa enheter är följande:</p> <p><FRAMESET COLS="*,2*,3*">. </p> <p>En asterisk (*) används för att dela mellanrummet proportionellt. Varje stjärna representerar en del av helheten. Genom att lägga ihop alla värden för talen bredvid asteriskerna (om ett tal utelämnas, antas ett), får vi nämnaren för bråket. I det här exemplet kommer den första kolumnen att ta upp 1/6 av fönstrets totala bredd, den andra kolumnen tar upp 2/6 (eller 1/3) och den sista kommer att ta upp 3/6 (eller 1/ 2).</p> <p>Kom ihåg att ett numeriskt värde utan några tecken anger det absoluta antalet pixlar för en rad eller kolumn. Ett värde med ett procenttecken (%) anger andelen av den totala bredden (för COLS) eller höjden (för RADER) för visningsporten, och ett värde med en asterisk (*) anger den proportionella fördelningen av det återstående utrymmet.</p> <p>Här är ett exempel som använder alla tre alternativen för att ställa in värden:</p> <p><FRAMESET COLS="100,25%,*,2*">. </p> <p>I det här exemplet kommer den första kolumnen att vara 100 pixlar bred. Den andra kolumnen kommer att ta upp 25 procent av hela visningsportens bredd, den tredje kolumnen tar upp 1/3 av det återstående utrymmet och slutligen kommer den sista kolumnen att ta upp 2/3. Det rekommenderas att tilldela absoluta värden först i ordning från vänster till höger. De följs <a href="https://whatsappss.ru/sv/utilities/formula-v-eksel-umnozhenie-na-odnu-yacheiku-kak-v-eksele.html">procentuella värden</a> av utrymmets totala storlek. Slutligen registreras värden som bestämmer den proportionella uppdelningen av det återstående utrymmet.</p> <p><i><b>Råd</b> </i></p> <p><i> <span>Om du använder absoluta COLS- eller ROWS-värden, håll dem små så att de kan passa i vilket webbläsarfönster som helst, och fyll dem efter behov. <a href="https://whatsappss.ru/sv/browser/adaptaciya-tablicy-dlya-vseh-razmerov-ekranov-povorachivat.html">minst</a>, ett enstaka värde, specificerat i procent eller relativ form, för att fylla det återstående utrymmet.</span> </i></p> <p>Om taggen används <FRAMESET>, där både COLS och ROWS är specificerade, kommer ett rutnät av ramar att skapas. Till exempel:</p> <p><FRAMESET ROWS="*,2*,*" COLS="2*,*"> </p> <p>Den här raden med HTML-kod skapar ett ramrutnät med tre rader och två kolumner. Första och sista raden tar upp 1/4 av höjden vardera, och mittlinjen tar upp hälften. Den första kolumnen tar upp 2/3 av bredden och den andra - 1/3.</p> <p>Behållare <FRAMESET> </FRAMESET> kan kapslas in i en annan liknande behållare, som visades i det första exemplet. Låt oss överväga användningen av taggen ytterligare <FRAME>. </p> <p><i><b>Notera</b> </i></p> <p><i> <span>Vissa källor på HTML-språket indikerar att parametrarna COLS och ROWS för taggen <FRAMESET>utesluter varandra. Men både Netscape och Microsoft Internet Explorer tillåter att de används tillsammans.</span> </i></p> <p><b>Märka <FRAME> </b></p> <p>Märka <FRAME>definierar en enda ram. Den måste placeras inuti ett par taggar <FRAMESET>Och</FRAMESET>. Till exempel:</p> <p><FRAMESET ROWS="*,2*"> </p> <p><FRAME> </p> <p><FRAME> </p> <p></FRAMESET> </p> <p>Observera att taggen <FRAME>är inte en behållare och till skillnad från <FRAMESET>har ingen slutetikett. Hela definitionen av en enda ram görs med en rad HTML-kod.</p> <p>Det finns så många taggar att spela in <FRAME>hur många individuella ramar som definieras när taggen anges <FRAMESET>. I föregående exempel, taggen <FRAMESET>två strängar gavs, så två taggar behövde skrivas <FRAME>. Detta exempel är dock i princip värdelöst, eftersom ingen av ramarna har något innehåll!</p> <p>Märka <FRAME>har sex parametrar: SRC, NAME, MARGINWIDTH, MARGINHEIGHT, SCROLLING och NORESIZE.</p> <p><i><b>Notera</b> </i></p> <p><i> <span>Vissa webbläsare tillåter dig att använda ett antal ytterligare taggparametrar <FRAME>. En översikt över funktionerna hos webbläsarna Netscape och Microsoft Internet Explorer ges i slutet av kapitlet.</span> </i></p> <p>Här är taggen: <FRAME>med alla parametrar:</p> <p><FRAME SRC="url" NAME="window_name" SCROLLING=YES|NO|AUTO </p> <p>MARGINWIDTH="värde" MARGINHEIGHT="värde" NORESIZE></p> <p>I praktiken i taggen <FRAME>Sällan används alla parametrar samtidigt.</p> <p>Mest <a href="https://whatsappss.ru/sv/office-programs/grafika-dlya-gta-5-s-avtomaticheskoi-ustanovkoi-grand-theft-auto-v.html">viktig parameter</a>- SRC (förkortning av källa). Ganska ofta i taggen <FRAME>en enda SRC-parameter anges. Till exempel:</p> <p><FRAME SRC="url">. </p> <p>Värdet på SRC-parametern bestämmer URL:en för dokumentet som initialt kommer att laddas in i denna ram. Vanligtvis är denna adress namnet på en HTML-fil som finns i samma katalog som huvuddokumentet. Då kommer ramdefinitionslinjen att se till exempel ut så här:</p> <p><FRAME SRC="sample.htm">. </p> <p>Observera att alla HTML-filer som anges i ramdefinitionen måste vara ett komplett HTML-dokument, inte ett fragment. Detta innebär att dokumentet måste ha HTML, HEAD, BODY, etc.-taggar.</p> <p>Naturligtvis kan SRC-värdet vara vilken giltig URL som helst. Om ramen till exempel används för att visa en GIF-bild som finns på servern för utgivaren av denna bok, bör du skriva:</p> <p><FRAME SRC="http://www.bhv.ru/example.gif">. </p> <p><i><b>Råd</b> </i></p> <p><i> <span>Ta inte med något innehåll i dokumentet som beskriver ramstrukturen.</span> </i></p> <p>Oformaterad text, rubriker, grafik och andra element kan inte användas direkt i ett dokument som beskriver en ramstruktur. Allt innehåll i ramar måste definieras i separata HTML-filer, vars namn anges av SRC-parametern för taggen <FRAME>. </p> <p>NAME-parametern anger ett ramnamn som kan användas för att referera till denna ram. Vanligtvis sätts länken från en annan ram som finns på samma sida. Till exempel:</p> <p><FRAME SRC="sample.htm" NAME="Frame_1">. </p> <p>Den här posten skapar en ram med namnet "Frame_1" som kan refereras till. Till exempel:</p> <p>Klicka här för att ladda ner</p> <p>dokument other.htm i en ram med namnet Frame_1.</p> <p>Notera TARGET-parametern, som refererar till ramnamnet. Om en ram inte får ett namn skapas en namnlös ram och det kommer inte att vara möjligt att referera till den från en annan ram. Ramnamn måste börja med ett alfanumeriskt tecken.</p> <p>Parametrarna MARGINWIDTH och MARGINHEIGHT låter dig ställa in bredden på rammarginalerna. Detta skrivs så här:</p> <p>MARGINWIDTH="värde",</p> <p>där "värde" är det absoluta värdet i pixlar. Till exempel:</p> <p>Den här ramen har marginaler upptill och längst ned på 5 pixlar och till vänster och höger - 7 pixlar. Kom ihåg att vi pratar om marginaler här, inte ramar. Parametrarna MARGINWIDTH och MARGINHEIGHT definierar utrymmet inom ramen inom vilket ingen information kommer att finnas. Det minsta acceptabla värdet för dessa parametrar är ett.</p> <p>Ramar kommer automatiskt att skapa och visa rullningslister om ramens innehåll inte passar helt inom det tilldelade utrymmet. Ibland bryter detta designen av sidan, så det skulle vara praktiskt att kunna styra visningen av rullningslister. Parametern SCROLLING används för dessa ändamål. Inspelningsformat:</p> <p><FRAME SCROLLING="YES|NO|AUTO">. </p> <p>SCROLLING-parametern kan ha tre värden: YES, NO eller AUTO. AUTO-värdet har samma effekt som om det inte fanns någon SCROLLING-parameter. Värdet JA gör att rullningslister visas oavsett om de behövs, och NEJ förhindrar att de visas. Till exempel:</p> <p><FRAME SCROLLING=YES>. </p> <p>Vanligtvis kan användaren ändra storlek på ramar när de tittar på sidan. Om du placerar muspekaren på ramramen kommer markören att anta en form som indikerar möjligheten att ändra storlek och låter dig flytta ramen till önskad plats. Detta bryter ibland strukturen hos vackert designade ramar. För att förhindra att användaren ändrar storleken på ramar, använd parametern NORESIZE:</p> <p><FRAME NORESIZE>. </p> <p>Denna parameter kräver inga värden. Naturligtvis, när NORESIZE-parametern är inställd för en av ramarna, kan storleken på någon av de intilliggande ramarna inte heller ändras. Ibland, beroende på layouten på ramarna, räcker det att använda parametern NORESIZE på en av ramarna för att förhindra att någon av dem ändras storlek på skärmen.</p> <p><b>Märka <NOFRAMES> </b></p> <p>Möjligheten att arbeta med ramar var inte avsedd i vare sig HTML 3.0- eller HTML 3.2-standarden. Här, tills nyligen, var det en ganska typisk situation då faktiskt använda funktioner aktivt används på många WWW-sidor, men inte är en del av standarden. Detta innebar att webbläsare med rätta kunde ignorera ramar. Med tillkomsten av HTML 4.0-standarden har situationen förändrats - nu är stöd för ramstrukturer inskrivet i standarden. Observera att de flesta moderna webbläsare kände igen ramar redan före tillkomsten av HTML 4.O. Det är dock nödvändigt att tillhandahålla information till användare som använder webbläsare som inte stöder ramar. För sådana webbläsare är det möjligt att tillhandahålla alternativ information som skrivs mellan ett par taggar <NOFRAMES>Och. Det ser ut så här:

</p> <p>hela HTML-dokumentet</p> <p>

Allt placerat mellan taggar Och, kommer att visas av webbläsare som inte har stöd för ramar. Rammedvetna webbläsare ignorerar all information mellan dessa taggar.

Observera att HTML-sidautvecklare i verkligheten ofta inte använder taggens funktioner att skapa sidor utan ramstrukturer, utan helt enkelt skapa två versioner av sina HTML-dokument. För detta alternativ <a href="https://whatsappss.ru/sv/browser/kak-sdelat-stranicu-startovoi-v-mozile-ustanovka-nachalnoi-stranicy-v.html">startsida</a> Vanligtvis erbjuds du att välja mellan att ladda ett dokument med eller utan ramstruktur. Sedan, beroende på användarens val, laddas endast en version av dokumentet.</p> <p><b><span>Funktioner för att beskriva ramstrukturer</span> </b></p> <p>En av de viktigaste taggarna som används när man beskriver ramstrukturer är taggen <FRAME>. En tagg har ett antal parametrar, varav ingen är nödvändig eller beroende av de andra, men det finns ett antal saker att tänka på när du skriver dem.</p> <p>Det visar sig att om du behöver skapa en ram som ett dokument senare kan laddas in i, till exempel genom kommando från en annan ram, bör du använda taggen <FRAME>skriv SRC-parametern. Om det här</p> <p>parametern utelämnas, ramen kommer inte att skapas, även om utrymme kommer att lämnas för den. Till exempel en skiva som <FRAME NAME="B">är ganska logisk och skulle kunna definiera en ram med namnet "B" i vilken inget dokument initialt laddas. Men på grund av frånvaron av SRC-parametern kommer en ram med det namnet inte att existera, så ytterligare försök att ladda in något dokument i den kommer att förbli misslyckade och utrymmet i fönstret som tilldelats för denna ram kommer att vara tomt. Dessutom kommer vissa webbläsare (till exempel Microsoft Internet Explorer version 3 för Windows Z.xx) att visa ett felmeddelande och avsluta när de försöker ladda ett dokument i en sådan ram.</p> <p>Kravet på att ställa in SRC-parametern kan inte förklaras logiskt, så det är bäst att helt enkelt notera detta faktum. Sedan, även om det inte finns något dokument som behöver laddas in i denna ram från första början, bör du ange namnet på en fil i SRC-parametern. Till exempel kan en sådan fil kallas empty.htm (tom), vars innehåll kommer att vara minsta möjliga korrekta HTML-dokument, nämligen:</p> <p><HTML> </p> <p><HEAD> </p> <p></HEAD> </p> <p><BODY> </p> <p></BODY> </p> <p></HTML> </p> <p>Du kan reducera detta dokument till två taggar: <HTMLX/HTML>, som också kommer att vara ett giltigt HTML-dokument. Genom att följa sökvägen för att maximalt minska storleken på ett "tomt" dokument, kan du begränsa dig till en fil vars storlek är lika med en byte, som lagrar mellanslagstecknet (eller något annat tecken som inte kan visas). Den här filen kommer inte att vara ett giltigt HTML-dokument, men kommer inte att orsaka problem med de flesta webbläsare. Att ytterligare reducera storleken på en sådan fil till noll är inte motiverat, eftersom när den laddas av webbläsaren Netscape kommer den att visa ett varningsmeddelande (Fig. 5.4) om att dokumentet inte innehåller data.</p> <span> <img src='https://i0.wp.com/webnav.ru/books/html4/frames/08.gif' height="119" width="332" loading=lazy loading=lazy></span> <p><i><b>Ris. 5. <span>4 . </b> Varningsmeddelande vid uppladdning av en noll-längd fil</span> </i></p> <p>Samtidigt på <a href="https://whatsappss.ru/sv/security/akkompanirovat-otpravit-kopiyu-na-moi-e-mail-avtomaticheskaya-otpravka-kopii.html">det här meddelandet</a> du måste reagera genom att trycka på en knapp <Enter>eller musknapp. Varje gång dokumentet laddas om eller storleken på webbläsarfönstret ändras visas meddelandet igen.</p> <p>Du kan också ange namnet på en icke-existerande fil, men i det här fallet kommer Netscape-webbläsaren att visa ett varningsmeddelande (fig. 5.5), vilket inte kommer att förhindra vidare arbete, men kommer att leda till liknande olägenheter.</p> <span> <img src='https://i0.wp.com/webnav.ru/books/html4/frames/09.gif' height="139" width="314" loading=lazy loading=lazy></span> <p><i><b>Ris. 5. <span>5 . </b> Varningsmeddelande när du försöker ladda ner en fil som inte finns</span> </i></p> <p><i><b>Råd</b> </i></p> <p><i> <span>Skapa en fil som heter empty.htm som är en byte stor och innehåller ett mellanslag. Gör det till en regel när du skriver en tagg <FRAME>ange alltid SRC=tom.htm om det är omöjligt att omedelbart ange namnet på en specifik fil.</span> </i></p> <p>Exempel på ramar</p> <p>Det här avsnittet ger några typiska exempel på ramdefinitioner.</p> <p>Låt oss återgå till exemplet i början av detta avsnitt (fig. 5.3). Det här exemplet använder en kapslad struktur <FRAMESET>. Extern tagg <FRAMESET>skapar tre höjdrader, 25, 50 respektive 25 procent av visningsportens totala höjd:</p> <p><FRAMESET ROWS="25%,50%,25%">. </p> <p>Inom detta definitionsområde är den första och sista raden enkla ramar:</p> <p><FRAME SRC="header.htm"> <FRAME SRC="footer.htm"> </p> <p>Var och en av dessa linjer fyller hela skärmens bredd. Den första raden längst upp på skärmen tar upp 25 procent av höjden, och den tredje raden längst ner tar också upp 25 procent av höjden. Mellan dem finns det dock en kapslad tagg <FRAMESET>: </p> <p><FRAMESET COLS="25%,75%"> </p> <p><FRAME SRC="list.htm"> </p> <p><FRAME SRC="info.htm"> </p> <p></FRAMESET> </p> <p>Denna tagg definierar två kolumner i vilka den mellersta raden på skärmen är uppdelad. Raden som innehåller dessa två kolumner tar upp 50 procent av skärmhöjden, enligt definitionen i den yttre taggen <FRAMESET>. Den vänstra kolumnen använder 25 procent av skärmens bredd, medan den högra kolumnen tar upp de återstående 75 procenten av bredden.</p> <p>Ramarna för dessa kolumner definieras i ett kapslat par taggar <FRAMESET>Och</FRAMESET>, medan definitionen av ramar för den första och sista raden skrivs utanför detta par, men innanför den yttre <FRAMESET>i lämplig ordning.</p> <p>Poststrukturen är lätt att förstå om du tänker på den som ett kapslat block <FRAMESET>som ett separat element <FRAME>. I vårt exempel, den yttre taggen <FRAMESET>definierar tre linjer. Var och en av dem måste fyllas i. I det här fallet fylls de först med ett separat element <FRAME>, sedan - som ett kapslat block <FRAMESET>två kolumner breda och sedan ytterligare ett element <FRAME>. </p> <p>Nu kan frågan uppstå om värdet på SRC-taggparametern kan vara <FRAME>ställ in namnet på filen, som i sin tur innehåller en beskrivning av ramstrukturen. Ja, detta är acceptabelt. I det här fallet taggen <FRAME>kommer att användas för att peka på ett HTML-dokument som är en ramstruktur och används som en separat ram.</p> <p>Låt oss gå tillbaka till exemplet och ersätta det kapslade <FRAMESET>till en separat <FRAME>. Naturligtvis behöver du två HTML-filer istället för en, eftersom kapslade <FRAMESET>kommer nu att finnas i ett separat dokument. Här är innehållet i den första (externa) filen:</p> <p><HTML> </p> <p><HEAD> </p> <p></HEAD> </p> <p><FRAMESET ROWS="25%,50%,25%"> </p> <p><FRAME SRC="header.htm"> </p> <p><FRAME SRC="frameset.htm"> </p> <p><FRAME SRC="footer.htm"> </p> <p></FRAMESET> </p> <p><NOFRAMES> </p> <p>Din webbläsare kan inte visa ramar</p> <p>

Den andra filen, som heter frameset.htm, innehåller följande kod:

I det här fallet beter sig de övre och nedre linjerna på samma sätt. Men den andra raden är nu en enkel ram som de andra. Dock definierar filen frameset.htm som SRC-parametern pekar på sin egen ramstruktur. Som ett resultat kommer skärmen att visa exakt samma som i det ursprungliga exemplet.

Notera

Det är i princip möjligt att skapa kapslade strukturer , med taggar , som refererar till samma fil som beskriver ramstrukturen, men detta bör inte göras. Denna situation kommer att leda till oändlig rekursion och kommer inte att tillåta ytterligare arbete. Vissa webbläsare kontrollerar denna situation och förhindrar risken för fel. Om adressen som skrivs till SRC matchar en av de tidigare adresserna i ramhierarkin, ignoreras den, som om SRC-parametern inte fanns alls.

Råd

Använda kapslade strukturer i olika kombinationer är det möjligt att skapa nästan vilken ram som helst som man kan tänka sig. Kom dock ihåg att skapa ett användarvänligt gränssnitt och inte bara visa din förmåga att arbeta med ramar.

Här är ett exempel på hur du skapar ett vanligt rektangulärt rutnät med ramar:

Detta exempel skapar ett ramrutnät med två rader och tre kolumner (Figur 5.6). Eftersom en uppsättning av sex ramar är definierade är det också nödvändigt att definiera sex individuella ramar . Observera att ramdefinitioner ges rad för rad. Det vill säga den första taggen definierar innehållet i den första kolumnen i den första raden, den andra definierar innehållet i den andra kolumnen och den tredje avslutar definitionen av data för den sista kolumnen i den första raden. De tre sista ramarna fyller sedan kolumnerna i den andra raden.

Ris. 5. 6 . 2 x 3 ram rutnät

Observera också att summan av procentvärdena i COLS-parametern inte är 100, utan bara 90 procent. Det är inget fel med detta, eftersom webbläsaren automatiskt proportionellt kommer att ändra bredden på kolumnerna för att eliminera denna motsägelse.

Funktioner för navigering när du använder ramar

Att arbeta med dokument som har en ramstruktur har några funktioner som du behöver känna till. Dessa egenskaper hos JB manifesteras huvudsakligen i navigering vid inläsning av dokument. Betydande skillnader i navigering är kännetecknande inte bara för olika webbläsare utan också olika versioner samma webbläsare.

Netscape-webbläsarversionerna 3.x och 4.x, när du klickar på Tillbaka-knappen, återställer dokumentet till den ram som senast åtgärdades. Samma åtgärder kommer att utföras om alternativet Tillbaka väljs när snabbmenyn anropas i någon av ramarna. Låt oss påminna dig om att snabbmenyn öppnas genom att högerklicka. Oavsett vilken ram sammanhangsmenyn kallades in, kommer alltså att trycka på Tillbaka-knappen avbryta den senaste operationen, även om den utfördes i en annan ram.

Webbläsaren Netscape 2.x fungerade helt annorlunda. Kontextmenyn innehåller kommandot Tillbaka i ram, som returnerar dokumentet till den aktuella ramen istället för att ångra den senaste operationen.

I alla versioner av Netscape kan du bokmärka ett dokument som finns i en vald ram. För att göra detta måste du välja läget Lägg till bokmärke från snabbmenyn som nämns ovan. Om du helt enkelt väljer läget Lägg till bokmärke från webbläsarens huvudmeny kommer ett bokmärke att skapas på dokumentet med en beskrivning av ramstrukturen , som inte pekar exakt på en specifik bildruta. Möjligheten att skapa ett bokmärke på ett dokument av en separat ram betyder inte att samma ramstruktur kommer att uppstå när du fortsätter att använda detta bokmärke. Dokumentet som bokmärket pekar på kommer att laddas i ett helt fönster utanför ramstrukturen.

Interaktion mellan ramar

Den enklaste formen av att visa information på WWW består av att läsa sidor och följa länkar, där det aktuella dokumentet i webbläsarfönstret ersätts av ett annat dokument. När du arbetar med ramar kan du organisera ett mer användarvänligt dokumentladdningsschema.

Interaktion mellan ramar är möjligheten att ladda dokument i den valda ramen med hjälp av kommandon från en annan ram. För detta ändamål används TARGET-taggparametern<А>. Denna parameter anger namnet på ramen eller webbläsarfönstret i vilket dokumentet som den här länken pekar på kommer att laddas in. Som standard, om det inte finns någon TARGET-parameter, läses dokumentet in i den aktuella ramen (eller fönstret). Denna standard kan åsidosättas genom att ange en tagg med önskat värde för TARGET-parametern. Att ange namnet på standardramen som ska laddas in i är mycket användbart när ett stort antal länkar behöver dirigera dokument till en specifik ram. En typisk situation med en innehållsförteckning i en ram, länkar från vilka man laddar motsvarande dokument till en intilliggande ram, visades i början av detta kapitel (Figur 5.1). För detta exempel i avsnittet fil med namnet LIST.htm, är det lämpligt att skriva följande rad: . Annars måste du ange en TARGET-parameter för varje länk.

Ramnamn måste börja med en latinsk bokstav eller siffra. Namnet kan vara namnet på ett befintligt fönster eller en ram, eller ett nytt namn kan anges under vilket ett nytt fönster kommer att öppnas. Det finns fyra reserverade namn som utför speciella åtgärder när de anges. Dessa namn börjar med ett understreck (_): "_blank", "_self", "_parent" och "_top". Alla andra namn som börjar med ett understreck är inte giltiga.

TARGET="_blank" - ser till att dokumentet läses in i ett nytt fönster. Det här fönstret kommer inte att ha ett namn, och det kommer därför inte att vara möjligt att ladda ett annat dokument i det.

TARGET="_själv" - dokumentet kommer att laddas i den aktuella ramen (eller fönstret). Denna post ska användas för att kringgå standardinställningen som anges av taggen .

TARGET="_top" - gör att dokumentet laddas i hela fönstret. Om dokumentet redan är i ett fullt fönster, har detta värde samma effekt som"_själv".

TARGET="_förälder" - gör att dokumentet läses in i området som upptas av den överordnade ramen för den aktuella ramen. Om det inte finns någon överordnad ram har detta parametervärde samma effekt som"_topp" .

Notera

Vissa HTML-källor anger felaktigt att om en ram inte har någon förälder är värdet "_parent" ekvivalent med "_self". Detta påstående är inte alltid korrekt.

Varning

De reserverade ramnamnen "_blank", "_self", "_parent" och "_top" måste skrivas med små latinska bokstäver. Observera att sådan noggrannhet är unik för Netscape. Microsoft Internet Explorer känner korrekt igen reserverade namn skrivna i alla fall.

Här är exempel på interaktion mellan ramar och enskilda webbläsarfönster. Tänk på följande HTML-kod:

Använda ramar

Detta HTML-dokument beskriver en struktur som består av tre ramar med namnet "A", "B" och "C". Ramnamn kommer att behövas senare för att organisera länkar mellan ramar. Observera att ramen med namnet "A" i i detta exempel det kommer inte att finnas några referenser, så det kunde ha lämnats utan ett namn alls. När du laddar dokumentet ovan i en webbläsare kommer ramarna att visa informationen som finns i filerna som identifieras av SRC-parametern. Ram "A" kommer att ta emot innehållet i filen frame_a.htm, och de återstående två ramarna kommer att ta emot data från filen tomma.htm, som inte har några data att visa. Låt oss återigen påminna dig om att HTML-dokumentet som beskriver strukturen för ramar inte har ett avsnitt .

Här är texten till filen som heter frame_a.htm:

Dokument för ram A

D

4. Ladda ett dokument i ett nytt fönster

5. Ladda ett dokument i hela fönstret

6. Ladda ett dokument i den aktuella ramen

Detta dokument är ett komplett HTML-dokument med sektioner Och och har i sin tur länkar till en fil som heter test.htm, som finns i samma katalog som filen frame_a.htm.

Texten i filen test.htm är extremt enkel:

Testdokument

Testdokumenttext

Filen frame_a.htm, vars innehåll laddades in i ram "A", har sex länkar till samma fil test.htm med olika värden för TARGET-parametern.

Låt oss överväga de åtgärder som kommer att inträffa när dessa länkar implementeras. Den första länken med värdet TARGET="B" kommer att ladda filen test.htm i en ram med namnet "in". Observera att efter att ha implementerat någon av de sex länkarna kommer Netscape-webbläsaren automatiskt att färga alla sex i en annan färg, eftersom de pekar på samma fil. Microsoft Internet Explorer markerar bara länkar som faktiskt är implementerade.

Den andra länken kommer att göra samma sak för ram "C". Inledningsvis finns det ingenting i ramarna "B" och "C" (mer exakt, innehållet i den tomma filen empty.htm laddas). Implementeringen av den första och andra länken kommer att fylla dessa ramar.

Den tredje länken med värdet TARGET=MD" kommer att leda till bildandet av ett nytt webbläsarfönster med namnet "D" och laddar filen test.htm i den. Observera att formen för att skriva denna länk inte skiljer sig från den första 2. Skillnaden är att i det första I två fall gavs referenser till befintliga ramar, vars namn definierades i filen med ramstrukturen, och i detta fall gavs referensen till ett icke-existerande objekt. denna referens görs minst en gång, sedan skapas ett fönster med namnet "D" och ett upprepat klick på länken kommer bara att ladda om data till det nu befintliga fönstret "D". Naturligtvis kan användaren stänga det när som helst tid och återskapa den genom att välja den här länken. Figur 5.7 visar situationen efter att de tre första länkarna har implementerats. Kom ihåg att platsen och storleken på fönster på skärmen bestäms av användaren.

Ris. 5. 7 . Situationen erhålls efter sekventiell implementering av de första tre länkarna tillgängliga i den vänstra ramen

Den femte länken med värdet TARGET="_top" kommer att ladda dokumentet i hela fönstret istället för hela ramstrukturen. Med detta värde på TARGET-parametern skapas inte ett nytt fönster. Du kan återgå till ramstrukturen genom att klicka på knappen Tillbaka.

Notera

Namnen på ramar eller webbläsarfönster ska inte förväxlas med namnen på nedladdade dokument. Namnen på ramarna är inte synliga någonstans när de visas, de krävs bara för att organisera interaktion och är därför dolda för användaren. Du kan bara se dem när du tittar på källtexten för HTML-filer.

Råd

Låt oss påminna dig om att namnen på nedladdade dokument anges av taggen . Om ett dokument laddas i ett helt fönster, visas dess namn längst upp i webbläsarfönstret. Om ett dokument läses in i en ram visas inte dess namn någonstans, och titeln på dokumentet som innehåller en beskrivning av dokumentets ramstruktur kommer fortfarande att finnas i den övre delen av fönstret. Därför är namnen på dokument som är avsedda att visas i ramar inte särskilt viktiga. Till exempel, i fig. 5.7 samma dokument laddas i ramarna "B" och "C", samt i ett separat fönster med namnet "D", medan namnet på dokumentet endast är synligt i fönstret "D". Det är dock knappast att rekommendera att utelämna namnen på dokument som laddats in i ramar, eftersom de kan förekomma till exempel i listan Bokmärken när du skapar ett bokmärke för ett dokument som finns i en ram eller lista över visade dokument.</span> </i></p> <p>Låt oss titta på ett annat intressant exempel på att organisera interaktion mellan ramar och webbläsarfönster. Låt det vara texten i det huvudladdade HTML-dokumentet:</p> <p><HTML> </p> <p><HEAD> </p> <p><TITLE>Använder fönsternamn

Ett dokument med en ramstruktur till ett nytt fönster

Använda ramar

Observera att om huvuddokumentet är ett standard HTML-dokument, så innehåller frame.htm-filen som laddas från en länk från huvuddokumentet ramstrukturen och länkar i sin tur till den tomma.htm-filen.

Efter att ha laddat huvuddokumentet kommer webbläsarfönstret att se ut som visas i fig. 5.8 (vänster fönster). Hela dokumentet består av två länkar. Låt oss följa den första länken. Ett nytt fönster kommer att skapas med namnet "D", där texten i filen test.htm kommer att visas (Fig. 5.8, höger fönster). Upprepa denna länk kommer bara att ladda om data i fönster "D".

Ris. 5.8. Exempel på interagerande ramfönster

Låt oss följa den andra länken. Ett nytt fönster kommer att skapas utan namn, i vilket filen frame.htm kommer att laddas, som definierar två ramar med namnen "C" och "D" (Fig. 5.8, nedre fönstret). Det finns inget i båda ramarna (närmare bestämt läses ett tomt dokument tomt.htm). Lägg märke till att det nu finns ett öppet fönster som heter "D" och ett fönster med ramar, varav ett också heter "D". Låt oss följa den första länken igen. Till skillnad från det första fallet kommer data inte att laddas in i fönstret "D", utan i en ram med namnet "D". Resultatet av alla beskrivna åtgärder visas i fig. 5.8.

Notera

Utseendet på öppningsbara fönster och deras innehåll kan ibland till och med bero på ordningen på användarnas åtgärder. Att arbeta med dokument vars beteende är svårt att förutsäga orsakar vanligtvis berättigad irritation för användaren och indikerar bristande eftertänksamhet i datastrukturen hos utvecklarna.

Om du ändrar ordningen på åtgärderna, dvs först kör den andra länken och sedan den första, så kommer inte fönstret med namnet "D" att visas alls! Detta kommer att hända eftersom efter implementering av den andra länken kommer en ram med namnet "D" att skapas och det kommer inte att behövas öppna ett nytt fönster för den första länken.

Det här exemplet är inte alls en förebild utan visar bara den möjliga komplexiteten i att organisera interaktion. Tvärtom, du bör försöka att inte onödigt komplicera organisationen av data, än mindre skapa situationer där resultatet ändras beroende på ordningen för användarens handlingar.

Råd

Undvik kollisioner i ram- och fönsternamn. Även om det inte är formellt förbjudet att ha ramar med samma namn, kan det leda till förvirring.

Varning

Ram- och fönsternamn jämförs på ett skiftlägeskänsligt sätt. Så, till exempel, ramar med namnet "frame_1" och "Frame_1" kommer att vara olika.

Exempel på mer komplexa interaktioner mellan ramar

Ganska enkla typiska exempel på interaktion mellan ramar diskuterades ovan. Uppgifterna att skapa nya fönster, ersätta innehållet i enskilda ramar, samt visa ett dokument i ett helt fönster med förstörelse av hela ramstrukturen övervägdes. Exempel ges på att använda anpassade ramnamn, liksom de reserverade namnen "_blank", "_self" och "_top". Att använda det sista reserverade namnet "_parent" är mer komplext och kommer att beskrivas nedan.

Det här avsnittet kommer att titta på mer komplexa alternativ för interaktion mellan ramar. I synnerhet kommer ersättning av innehållet i flera intilliggande ramar att genomföras.

En av de vanligaste användningsområdena för ramar, som redan har nämnts i detta kapitel, är fallet med två ramar, varav den ena innehåller en lista med länkar och den andra innehåller själva dokumenten (fig. 5.1).

Låt oss försöka utöka formuleringen av problemet. Anta att du vill visa innehållet i ett ganska stort dokument som består av kapitel uppdelade i sektioner på skärmen. Ett typiskt exempel är teknisk litteratur om ett visst ämne. Låt oss beskriva den önskade presentationen av ett sådant dokument på skärmen. Låt oss dela upp skärmen i tre ramar, varav en kommer att innehålla en lista med bokkapitel, den andra - en lista med avsnitt i det valda kapitlet och den tredje - texten i det valda avsnittet. När du väljer en länk i den andra ramen bör innehållet i den tredje ramen ändras. Implementeringen av detta krav är trivialt. När du väljer en länk i den första ramen bör innehållet i både den andra och tredje ramen ändras samtidigt. Vid första anblicken är det omöjligt att implementera denna uppgift i HTML (utan att använda programmering i JavaScript eller andra), eftersom när en länk exekveras laddas bara ett dokument, och inte två eller fler. Ändå är det fullt möjligt att lösa detta problem.

Låt oss visa en möjlig lösning på ett sådant problem med ett enkelt exempel. Anta att du vill visa tre ramar på skärmen och ladda några dokument i dem. Låt oss sätta uppgiften att skapa länkar i var och en av dessa ramar, vars implementering, till exempel, bytte innehållet i två ramar. Låt den första ramen ta upp 50 % av fönstrets bredd och 100 % av dess höjd och placera den på vänster sida av fönstret. Den högra halvan av fönstret är också delad horisontellt på mitten och innehåller två andra ramar. Denna struktur beskrivs av följande kod:

Med hjälp av denna HTML-kod kommer den nödvändiga strukturen att skapas, men att lösa problemet är omöjligt. Det är nödvändigt att ta bort den kapslade strukturen till en separat fil, och beskriv i denna HTML-kod en ram som refererar till den skapade filen. Då kommer texten i källdokumentet att se ut så här:

Exempel på interaktion mellan ramar

Skapat fil med kapslad struktur har namnet 1_2.htm och innehåller följande kod:

1-2

Vid första anblicken har ingenting förändrats alls. I båda fallen finns det tre ramar i vilka dokumenten left.htm, 1.htm respektive 2.htm laddas. Men när ramarna samverkar kommer skillnaden att visas. Om i det första fallet ingen av ramarna har en överordnad ram, kommer föräldern i det andra fallet för två ramar att vara en ram med namnet "Två_Frames". Därför, om du i någon av två ramar tillämpar en länk med ett TARGET-parametervärde lika med "_parent", kommer resultatet att vara olika för det första och andra fallet. I det första fallet kommer en sådan länk att ladda dokumentet i ett helt fönster och ersätta den befintliga ramstrukturen. Det är här värdeegenskapen "_parent" kommer in i bilden, som fungerar som "_top" i frånvaro av en överordnad ram. I det andra fallet kommer en ram med namnet "Two_Frames" att ersättas, som upptar den högra halvan av skärmen och i huvudsak består av två ramar.

Det andra fallet skiljer sig formellt från det första också genom närvaron av en ram med namnet "Two_Frames" till vilken referenser kan göras. Det är just denna funktion som gör att vi kan lösa problemet.

Här är innehållet i left.htm-filen, som initialt laddas in i den första av de övervägda ramarna:

Vänster ram

dokument i två ramar på höger sida av fönstret.

Välj alternativ för dokumentplats:

1 _2.htm" TARGET="Two_Frames">Alternativ 1-2

Alternativ 2-1

2-1<TITLE> </p> <p></HEAD> </p> <p><FRAMESET ROWS="*,*"> </p> <p><FRAME SRC="2.htm"> </p> <p><FRAME SRC="1.htm"> </p> <p></FRAMESET> </p> <p></HTML> </p> <p>Observera att texten i filerna 1_2.htm och 2_1.htm endast skiljer sig i ordningen på länkarna till filerna 1.htm och 2.htm.</p> <p>Låt oss nu överväga konstruktionen av ett dokument laddat i den vänstra ramen. Den innehåller två länkar med parametern TARGET="Two_Frames". Implementeringen av någon av dessa länkar skapar två ramar vid platsen för "Two_Frames"-ramen (detta är den högra halvan av skärmen), laddar dokument 1.htm och 2.htm i en eller annan ordning. När man väljer alternativ 1-2 laddas alltså dokument 1.htm i den övre högra ramen och 2.htm i den nedre högra ramen. När du väljer alternativ 2-1 ändras ordningen på dokumenten. Som ett resultat skapar det omväxlande urvalet av alternativ intrycket av att dokumenten i de två ramarna byter plats. Det är precis den effekt vi försökte uppnå (Fig. 5.9).</p> <p>Innehållet i dokument 1.htm och 2.htm spelar ingen roll för det beskrivna exemplet. Men, till exempel, istället för triviala dokument, kommer vi att skapa dokument med länkar som implementerar samma åtgärder.</p> <p>Text till fil 1.htm:</p> <p><HTML> </p> <p><HEAD> </p> <p><TITLE>Dokument 1

Dokument 1

Alternativ 1 -2

Alternativ 2-1

Fil 2.htm skiljer sig från 1.htm endast i rubriken.

Det finns två länkar med värdet TARGET="_parent" som pekar på den överordnade ramen. Dessa länkar kan också skrivas med ett explicit namn på den överordnade ramen, d.v.s. TARGET="Two_Frames", men att använda ett implicit namn är vanligtvis bekvämare. Till exempel, om du utesluter länkar från den vänstra ramen (dokument left.htm), kan du utelämna ramnamnet "Two_Frames" som anges när du beskriver huvudramstrukturen. Detta skulle skapa en ram utan namn, men länkarna från dokument 1.htm och 2.htm med TARGET="_parent" skulle fortfarande fungera korrekt.

Råd

Använd implicit ramnamn när det är möjligt. Till exempel "förälder", "överst", "själv" istället för att ange specifika namn.


Ris. 5.9. Interagerande ramfönster med effekten av att ändra laddade dokument

Skillnad mellan ramar och webbläsarfönster

När man arbetar med ramar uppstår frågan om den grundläggande skillnaden mellan att organisera ramstrukturen i ett webbläsarfönster och att skapa flera fönster. Vid första anblicken kan det tyckas att du skulle klara dig med möjligheten att skapa flera fönster, eftersom arbetet med fönster och ramar är väldigt likt. Varje ram kräver att ett separat dokument laddas, har möjlighet att rulla innehåll oberoende och kan ändras med kommandon från andra ramar. Dessa egenskaper hos ramar liknar egenskaperna hos webbläsarfönster. Med en tabellformad organisation av data är det omöjligt att uppnå en sådan handlingsfrihet.

Det finns dock en betydande skillnad mellan ramar och fönster. Med ramorganisering utförs uppdelningen av visningsområdet i ramar av själva HTML-dokumentet, som anger måtten och deras plats. Vid visning kan användaren ändra storleken på ramarna, om inte detta är förbjudet i beskrivningen av deras struktur. Arrangemanget av fönster bestäms av de allmänna reglerna för att arbeta med Windows-systemet - användaren kan expandera vilket fönster som helst till helskärm, minimera det till en ikon eller godtyckligt ställa in dess storlek och plats. Fönster kan, till skillnad från ramar, överlappa varandra. Denna rikedom av val har sin baksida - du måste manuellt placera fönster på skärmen varje gång och ändra storlek på dem för att uppnå det optimala visningsalternativet. När det gäller ramar anges det optimala storleksförhållandet vanligtvis av utvecklaren i beskrivningen av ramstrukturen och behöver ofta inte ändras.

Råd

Även om ramar inte kan ge alla möjligheter att arbeta med individuella fönster, kommer deras rationella organisation att skapa maximal bekvämlighet för användaren.

Att arbeta med fönster har också andra nackdelar. Att skapa varje fönster kräver mycket minne. I Netscape är varje fönster i princip en annan kopia av webbläsaren, komplett med en komplett uppsättning knappar och menyer. Samma situation är typisk för Microsoft Internet Explorer.

Observera att organisationen av enskilda fönster i webbläsare görs annorlunda. Att skapa ett nytt fönster med ett dokument resulterar i att en separat uppgift visas i Windows-systemet, vilket du kan se när du visar listan över pågående uppgifter. Därför kan växla mellan fönster göras på samma sätt som att växla mellan olika uppgifter, till exempel genom att trycka på ett kortkommando +.

Många populära Windows-program har konceptet med ett dokumentfönster. Exempel är ordbehandlaren i Microsoft Word eller grafikprogrammet Paint Shop Pro och många andra. Var och en av dessa applikationer tillåter samtidig användning av flera fönster med data och som regel finns det en fönstermeny som ger en lista över fönster och ger möjlighet att växla mellan dem. Skapandet av ett nytt fönster i sådana applikationer sker vanligtvis när man öppnar en befintlig fil eller skapar en ny. Men i dessa program, när ett nytt fönster skapas, skapas inte en ny pågående uppgift.

Netscape har också en fönstermeny som listar befintliga fönster. (I Netscape 4.x-versioner tillhandahålls den här funktionen av alternativet Fönster på Communicator-menyn.) Låt oss återgå till fig. 5.8. I det här exemplet är tre fönster öppna samtidigt, som vart och ett är en separat webbläsare. Men för användaren är de alla fönster i samma webbläsare som kan interagera med varandra. I vilket som helst av dessa fönster kan du öppna menyn Fönster och se en lista med tre fönster. I fig. Figur 5.10 visar situationen när detta är gjort för det nedre fönstret.

Ris. 5.10.Öppna Frame Windows i Netscape Browser

Varje fönster kan stängas separat (med hjälp av kommandot Stäng från Arkiv-menyn). För att avsluta arbetet med webbläsaren i valfritt fönster kan du öppna Arkiv-menyn och välja Avsluta (Fig. 5.11).

Om flera fönster var öppna stängs alla, men innan detta visas ett varningsmeddelande (Fig. 5.12).

Varje webbläsarfönster kan ha sina egna inställningar (men inte alla). Titta på fig. 5.11. Två fönster är öppna, varav ett är uppdelat i tre bågar. Samma dokument laddas i två av de tre ramarna, samt i ett separat fönster. Möjligheten att självständigt konfigurera parametrarna för varje fönster gör att du kan visa samma dokument på olika sätt. I exemplet ovan är teckenstorleken på dokumentet i det ena fönstret större än i det andra. Denna effekt uppnås genom att ställa in olika kodningar för varje fönster (objektet Dokumentkodning i Alternativ-menyn eller Teckenuppsättning-alternativet i Visa-menyn för version 4.x), med båda kodningarna med samma teckensnitt, men av olika storlekar. Att ändra valfritt objekt i menyn Allmänna inställningar påverkar alla fönster.

Ris. 5.11. Avsluta Netscape-webbläsaren

Ris. 5.12. Varning om att stänga fönster i Netscape-webbläsaren

Ytterligare webbläsarfunktioner

Alla ovanstående rambeskrivningstaggar med motsvarande parametrar implementeras nästan identiskt i webbläsarna Netscape och Microsoft Internet Explorer, men var och en av dessa webbläsare låter dig dessutom använda sina egna unika taggar eller parametrar.

Netscape webbläsares funktioner

Netscape-webbläsaren, som börjar med version 3.0, tillåter ytterligare tre alternativ: BORDER, FRAMEBORDER och BORDERCOLOR. Parametern BORDER gäller endast taggen . Värdet på parametern BORDER bestämmer tjockleken på gränserna mellan bildrutor i pixlar.

Parametern FRAMEBORDER kan användas både i taggen , och i taggen och bestämmer närvaron av en ram mellan ramar. Denna parameter kan vara Ja eller NEJ. Om parametern är skriven i taggen , då gäller dess effekt för alla bildrutor i den här gruppen. För en enskild bildruta kan värdet åsidosättas. Standardvärdet är Ja.

Observera att parametrarna BORDER och FRAMEBORDER fungerar oberoende av varandra. Till exempel, om BORDER är inställt på NO och BORDER är satt till ett annat värde än noll, kommer gränsen mellan ramar inte att ritas, men utrymmet som specificeras av BORDER-parametervärdet kommer fortfarande att tilldelas för det.

Parametern BORDERCOLOR kan användas som i taggen , och i taggen och definierar kantfärgen, som kan specificeras av färgnamnet eller dess hexadecimala representation.

Här är ett exempel:

Den första raden i denna HTML-kod specificerar tre ramar, med utrymme mellan dem för en 10-pixel tjock ram (Figur 5.13).

Ris. 5.13. Rita gränser mellan ramar i Netscape-webbläsaren

Mellan ramfönster "A" och "B" ritas ingen ram på grund av NO-värdet för parametern BRAMEBORDER, men den röda färgen definieras för ramen. För den sista bildrutan "c" sätts RAMBORDER-värdet till Ja och åsidosätter värdet som ställts in på den första raden. Därför kommer en röd ram med en tjocklek på 10 pixlar fortfarande att ritas mellan ramarna med namnet "B" och "C".

Notera

Om gränser mellan ramar inte ritas, tillåter inte Netscape-webbläsaren storlek på ramar genom att dra dem med musen, även utan parametern NORESIZE. För Microsoft Internet Explorer är situationen annorlunda.

Observera att ramar utan ramar inte används särskilt sällan. Man bör komma ihåg att frånvaron av ramar inte förhindrar uppkomsten av rullningslister (Fig. 5.14).

Ris. 5.14. Rullningslister i ram utan ramar

Webbläsarfunktioner i Microsoft Internet Explorer

Webbläsaren Microsoft Internet Explorer låter dig använda parametern FRAMEBORDER för samma ändamål som beskrivits ovan, men tillåter dig inte att ställa in färg och tjocklek på ramarna. Däremot kan endast det numeriska värdet "O" användas som ett värde för parametern FRAMEBORDER för att avbryta ritningen av en ram, eller ett numeriskt värde som inte är noll för att rita en ram.

Skillnaden i reglerna för att ställa in värdena för parametern FRAMEBORDER för olika webbläsare är mycket obehaglig. Försök till exempel att ställa in FRAMEBORDER=Ja. Denna post är korrekt för Netscape, men för Microsoft Internet Explorer kommer det att resultera i frånvaron av en ram. Det föregående exemplet (Fig. 5.13) när det visas i Microsoft Internet Explorer kommer att visas utan ram.

Råd

Det rekommenderas att alltid skriva värdet på parametern FRAMEBORDER i numerisk form, till exempel RAMEBORDER=0. Detta följer reglerna för att skriva en parameter för Microsoft Internet Explorer, men bryter mot reglerna för Netscape (även om det uppfattas korrekt av den senare).

Notera

Om ramarna mellan ramarna inte ritas, kommer webbläsaren Microsoft Internet Explorer (till skillnad från Netscape), i avsaknad av NORESIZE-parametern, att tillåta dig att "peka på" ändra storlek på ramarna genom att dra ramarna med musen. Du kan hitta platsen där ramen ska vara genom att ändra formen på muspekaren.

Webbläsaren Microsoft Internet Explorer tillåter användning av ytterligare en FRAMESPACING-parameter skriven i taggen , vars värde bestämmer antalet pixlar mellan bildrutor som ska lämnas tomma.

Låt oss ge ett exempel, vars visningsresultat visas i fig. 5.15.

Ändra avståndet mellan ramarna


Ris. 5.15. Tomt utrymme mellan ramar i Microsoft Internet Explorer

Notera

Tyvärr anger många HTML-språkbeskrivningar felaktigt att parametern FRAMESPACING måste användas i taggen . Microsoft Internet Explorer tillåter endast att denna parameter används i en tagg .

Flytande ramar

Webbläsaren Microsoft Internet Explorer tillåter användning av en unik tagg . I TEGS

Microsoft Internet Explorer är den första webbläsaren (och än så länge den enda) som stöder så kallade "flytande" ramar.

Dessa ramar kan placeras var som helst på skärmen, precis som grafik och tabeller.

Ramen till höger om denna text placeras på sidan med en speciell tagg

Den största skillnaden mellan