Ramar exempel. Skapa ramar

I början av webbplatsbyggandet använde webbresurser i stor utsträckning ramar för att visa enskilda delar av sidor. Men med ankomsten av den nya versionen av HTML 5 har allt förändrats. Markup element<ram>, <ramuppsättning> och<inga ramar> anses föråldrade. De ersattes av en enda tagg -<iframe>. Hur man lägger till i html

I ovanstående markering räcker det att ersätta webbplatsadressen med vilken som helst annan och vid behov justera ramstorleken.

God dag till alla! Andrey Bernatsky är med dig.

Innan jag går direkt till artikeln skulle jag vilja ge dig en länk till videoversionen av detta ämne:

I det här avsnittet kommer vi att prata om ramar i HTML. Ramar i huvudsak är de väldigt lika tabeller, men till skillnad från tabeller är varje ram oberoende och var och en av dem kan ha en separat webbsida med sin egen adress.

I figuren ser vi en ganska vanlig platsstruktur. Det kan presenteras i form av en tabell, eller allt detta kan göras med hjälp av ramar. I den övre ramen kan du ladda en sida med en logotyp och meny, i den vänstra ramen kan du ladda en sida med webbplatsnavigering, i den centrala ramen kommer det att finnas en sida med sajtens huvudinnehåll, i den högra ramen du kan ladda en sida med reklambanners, och i den nedre ramen kan du ladda en sida med kontaktinformation. Här är vad ramar är i ett nötskal.

Låt oss nu titta på hur allt detta kan göras.

Det speciella med ett dokument som innehåller ramar är att det inte innehåller en behållare KROPP. En container används istället RAMSET. Den allmänna syntaxen för ramar är följande:

XHTML

… ….

I en container …. taggar finns , som definierar innehållet i ramar.

Vid taggen det finns två parametrar:

rader = nummer– antal linjer (horisontella trösklar).

cols = nummer– Antal kolumner (vertikala trösklar).

Generellt sett anges värdena för parametrarna för rader och kolumner inte exakt med siffror, utan genom att lista siffrorna separerade med kommatecken. Så många siffror som det finns kommer det att finnas lika många rader eller kolumner, och siffrorna bestämmer storleken på ramen. Huvudsaken är att summan av dessa siffror är lika med hela skärmens bredd.

Låt oss titta på detta med ett exempel, och allt kommer att vara klart. Låt oss nu skapa ett ramdokument så här:

Koden som kommer att definiera denna ramstruktur för oss kommer att se ut så här:

XHTML

Den första raden i koden ovan öppnar ramuppsättningsbehållaren, parametern cols indikerar att det kommer att finnas tre kapslade ramar. Den första kommer att ha en bredd på 30 % av hela skärmens bredd. Den tredje kommer också att ha 30 % av hela skärmens bredd. Och den andra ramen kommer att ta upp allt återstående utrymme. Ja symbol "*" (asterisk) betyder att ta upp all återstående plats på skärmen.

Låt oss förresten titta på hur ramar kan ställas in i parametrarna för kolor och rader:

Du kan ställa in storleken genom att helt enkelt ange ett nummer. Detta nummer bestämmer storleken på ramen i pixlar.

Du kan ställa in bredden i procent. Dessutom, om summan av procentsatserna för alla kolumner överstiger 100 %, kommer alla ramar att reduceras proportionellt så att den totala summan är lika med 100 %. Situationen kommer att vara liknande: om summan av procentsatserna för alla kolumner är mindre än 100 %, kommer alla ramar att öka proportionellt så att den totala summan är lika med 100 %.

Du kan ställa in ramstorleken med en symbol “*” (stjärna). Detta innebär att ramen måste ta upp all återstående plats. Om det anges t.ex , det vill säga två asterisker, då kommer allt återstående utrymme att delas lika mellan dessa två ramar (i detta fall 40%).

Du kan kombinera alternativ för att ställa in ramstorlekar i HTML. Till exempel:

XHTML

Den här koden innebär att den första bilden kommer att vara 70 pixlar, den tredje kommer att vara 40 % av skärmens bredd och den andra kommer att ta upp resten av utrymmet.

Vi räknade helt ut den första raden med kod. Varsågod.

Taggar följer . Sedan avgränsad med kommatecken i parametern cols märka ramuppsättning Om tre siffror anges (det vill säga, det kommer att finnas tre ramar), så taggar det måste vara tre också. Värdet på parametern src är adressen till webbsidan som kommer att laddas in i denna ram. Adressen kan, som framgår av exemplet, vara absolut och relativ.

Och sista raden stänger behållaren .

Om vi ​​ersätter parametern cols med rader i den första raden av kod kommer vi att få samma ramdokument bestående av tre ramar. Endast uppdelningen i ramar kommer att vara vertikal.

XHTML

alternativ rader Och cols kan inte användas samtidigt. Detta leder till fel och felaktig visning av innehåll.

Alla har nu en fråga om hur man skapar en sådan struktur, som jag talade om i början av artikeln. Vi återkommer till detta lite senare, men låt oss nu gå över till vad som händer i vår webbläsare nu.

I webbläsaren ser vi tre sidor som var och en är i sin egen ram.

Samtidigt, genom att flytta muspekaren till ramarnas kanter, kan vi ändra storleken på ramarna, rullningslister och kanter mellan ramarna är också synliga. Detta är inte alltid nödvändigt, i själva verket är det inte alls nödvändigt. Och allt detta kan kontrolleras tack vare taggparametrar ram Och ramuppsättning.

Taggalternativ ram Och ramuppsättning:

src="url"– önskad parameter. Anger adressen till sidan som kommer att visas inuti ramen. Används endast för ram.

noresize– avbryter möjligheten att ändra storlek. Används endast för ram.

scrolling="ja/nej/auto"– bestämmer förekomsten av rullningslister. Värdet ja – indikerar närvaron av rullningslister. Värdet no anger att det inte kommer att finnas några rullningslister. När den är inställd på auto avgör webbläsaren själv om det kommer att finnas rullningslister. Används endast för ram.

name="ramnamn"– ramnamn. Denna parameter används för interaktion mellan ramar. Vi ska prata mer om det lite senare. Används endast för ram.

kant=nummer– tjocklek på kanter mellan ramar. Om det tar värdet 0, så visas inte gränserna mellan ramarna. Används endast för ramuppsättning.

framespacing="nummer"– avstånd mellan ramar. Används endast för ramuppsättning.

Med dessa parametrar kan du få en sida där gränserna mellan ramarna inte visas, det finns inget sätt att ändra storleken på ramarna och rullning är förbjuden för de två sista ramarna. Koden för en sådan sida ser ut så här:

XHTML

Det finns några andra alternativ, men de fungerar inte helt klart, så jag tycker att det är vettigt att inte ens nämna dem i releasen.

Kanske är det allt med parametrarna. Vi tittade på ett exempel på hur man använder dem.

Låt oss nu skapa ramstrukturen som jag pratade om i början av releasen.

För att göra detta skapar vi en struktur av tre ramar uppdelade vertikalt.

XHTML

Följaktligen istället för taggen , vi måste sätta in en annan behållare .. med tre kolumner och skriv din sidadress i varje. Du förstår, inget komplicerat, vi använder bara en tagg istället sätt in den nya behållaren vi behöver .. .

XHTML

Efter detta sätter vi in ​​vår tredje ram med kontaktinformation och stänger huvudbehållaren

XHTML

Den fullständiga koden för denna sida finns nedan:

XHTML

Självklart tog jag adresserna till ramarna från tidigare nummer av nyhetsbrevet, och vi såg ingen meny, logotyp, navigering etc. här. Men vi fick den struktur vi behövde. Men om du skapar de faktiska sidorna du behöver kan du få en vacker struktur.

Vad vi fick till slut. Om detta är bekvämt eller obekvämt är upp till dig att avgöra, men med en ramstruktur finns alla våra ramar alltid kvar på sidan. Oavsett storleken på innehållet kommer vi alltid att se webbplatsens logotyp och meny, längst ner på sidan med kontaktinformation, navigeringsblocket och banners. Detta är i allmänhet kärnan och innebörden av ramar.

Det finns möjlighet till interaktion mellan ramar. Du kan göra det så att genom att klicka på en länk i en ram visas informationen i en annan. Nu får vi se hur detta går till.

Låt oss skapa en ram så här:

Våra länkar kommer att finnas i den vänstra ramen. Och till höger finns sidorna som dessa länkar leder till.

Låt oss skapa en ram så här:

XHTML

Många moderna webbplatser har "klibbiga" navigeringsmenyer som visas antingen i sidofältet eller högst upp när du rullar upp och ner på sidan. Men CSS-egenskaperna som låter dig skapa klibbiga menyer stöds inte alltid av webbläsare. Tidigare användes HTML-ramar för att implementera liknande funktionalitet.

Skillnaden mellan ramar och iframes

När du använder en ramuppsättning delar du upp den synliga delen av webbläsarfönstret i flera ramar. Varje bildruta har sitt eget innehåll, vilket inte påverkar innehållet i nästa. Ramar och iframes utför en liknande funktion - de bäddar in en resurs på en webbsida, men de är fundamentalt olika varandra:

• Ramar är de element som definierar layouten;
• Iframes är element som lägger till innehåll.

Ramarnas historia och framtid

W3C föråldrade ramar i HTML5. Skälet för detta beslut var att HTML-ramar har en negativ inverkan på användbarhet och tillgänglighet. Låt oss se om dessa påståenden är berättigade.

Problem med ramar

• Användbarhetsproblem: Med den ökande populariteten för mobila enheter med små skärmar finns det ett behov av att webbplatser erbjuder användarna flera vyer som ändras beroende på storleken på visningsporten. Även om ramar kan manipuleras för att ge en viss grad av respons, är de inte särskilt väl lämpade för att skapa responsiva webbplatser;
• Tillgänglighet: Skärmläsare och andra hjälpmedel är ganska svåra att läsa och interagera med webbplatser som använder ramar.

Det finns för närvarande en global trend inom webbutveckling att separera innehållet på en webbsida från dess presentation:

• Innehåll måste läggas till och definieras genom uppmärkning, till exempel via HTML;
• Presentationen definieras av språk som CSS och JavaScript.

Att använda ramar innebär initialt att skapa ett specifikt utseende och struktur, medan presentationsuppgifter måste hanteras med CSS.

Framtiden för ramar

Även om idag alla moderna webbläsare stöder ramar, W3C har tydligt sagt som ramar in" bör inte användas av webbutvecklare". Om du har en webbplats som använder ramar bör du överväga att byta till andra tekniker. Vid något tillfälle kommer webbläsare inte längre att stödja ramar, och när det händer kommer webbplatser som använder dem att bli oanvändbara.

Hur man gör ramar i HTML

Ramar bör inte användas när man utvecklar nya webbplatser, men för webbansvariga som underhåller gamla resurser kan det vara användbart att veta hur man använder dem.

Grundkonceptet för ramar

Grundkonceptet för ramar är ganska enkelt:

• Använd ramuppsättningselementet på en specifik plats i elementet brödtext i ett HTML-dokument;
• Använd ramelementet för att rama in webbsidans innehåll;
• Använd src-attributet för att identifiera resursen som ska laddas inuti ramen;
• Skapa en separat innehållsfil för varje HTML-ram.

Låt oss titta på några exempel på hur detta fungerar. Först måste vi skapa några HTML-dokument som vi ska arbeta med. Låt oss skapa fyra olika HTML-dokument. Här är vad den första kommer att innehålla:

Ram 1

Innehåll i ram 1

Vi sparar det första dokumentet som frame_1.html. De återstående tre dokumenten kommer att ha liknande innehåll och namnges därefter.

Skapa vertikala kolumner

För att skapa en uppsättning av fyra vertikala kolumner måste du använda ett ramuppsättningselement med attributet cols. Attributet cols används för att bestämma antalet och storleken på kolumner som ramuppsättningen kommer att innehålla. I vårt fall har vi fyra filer att visa. Därför behöver vi fyra ramar.

För att skapa dem måste vi ställa in attributet cols till fyra värden, separerade med kommatecken. För enkelhetens skull kommer vi att tilldela var och en av ramarna värdet * , detta kommer att ställa in dem till en storlek som automatiskt fyller allt tillgängligt utrymme. Så här kommer vår HTML-uppmärkning att se ut:

Och här är hur denna markering kommer att visas:

Skapa horisontella rader

HTML-ramrader kan skapas med hjälp av rows-attributet snarare än cols-attributet som i föregående exempel:

Genom att göra denna ändring gjorde vi det så att ramar nu laddas i fyra rader, ovanpå varandra:

Slår samman kolumner och rader

Kolumner och rader med ramar kan visas samtidigt på samma sida. Du kan kapsla en ram inuti en annan. För att göra detta skapar vi först en ramuppsättning och kapslar sedan den underordnade ramuppsättningen inuti det överordnade elementet. Här är ett exempel på hur du kan kapsla två rader inom en uppsättning av tre kolumner:

frameset cols="*,*,*">

Exempel på HTML-ram:

Så här kommer ramarna att se ut nu:

Denna kod skapar en uppsättning av två lika stora kolumner. Vi delar sedan upp den andra kolumnen i två rader. Och slutligen delar vi upp den andra raden i två kolumner. Så här kommer det att se ut:

Det resulterande rutnätet med rader och kolumner kommer att se ut så här:

Hur man stylar ramar

När det gäller styling av en webbsida som använder ramar i HTML, finns det två sätt att tilldela stilar:

• Definiera stilar inom varje ram;
• Definiera stilar för ramuppsättning.

Representationen av varje ram måste definieras i källdokumentet. Ramuppsättningsvyn måste definieras i det överordnade dokumentet som innehåller ramuppsättningen. Med andra ord måste stilarna för frame_1.html ställas in av CSS-reglerna som finns i filen frame_1.html, eller i formatmallen som är associerad med filen frame_1.html.

Definiera ramstilar i källdokumentet

Som med alla webbsidor kan innehållet i varje ram utformas med CSS. För att utforma varje rams innehåll måste det läggas till i huvuddokumentet, antingen genom att länka till en extern stilfil eller genom att lägga till interna eller inline-stilar. Med tanke på att vi har fyra källdokument måste CSS-stilarna tillämpas på varje dokument separat.

Genom att tillämpa CSS-stilar på en webbsida som innehåller en ramuppsättning kommer vi inte att kunna tillämpa stilar på varje ram individuellt. Om vi ​​vill formatera frame_1.html måste vi lägga till dessa stilar direkt i själva dokumentet. Här är ett exempel på hur detta kan göras:

Ram 1

Innehåll i ram 1

Om vi ​​går tillbaka till vårt tidigare exempel på att skapa ramar i HTML med fyra lika stora kolumner och laddar ramuppsättningen efter att ha gjort dessa ändringar i filen frame_1.html, får vi detta:

Definiera stilar och formatera ramuppsättningar

Hur man påverkar ramuppsättningspresentationen utöver att definiera stilarna för själva dokumenten:

• Storleken på varje ram kan definieras eller fixeras;
• Avståndet mellan ramarna kan ändras;
• Formatet på kanten runt varje ram kan specificeras.

Dessa ändringar görs inte via CSS. Dessa görs genom att lägga till attribut och deras värden till ramelementet.

Ramstorlek

Ramstorlekar kan anges i pixlar, i procent, eller så kan ramar automatiskt uppta allt tillgängligt utrymme. För att ange ramstorleken, infoga önskat värde i attributet cols eller rows. Som standard, om en ram inte har specificerat noresize-attribut, kan webbplatsbesökare använda musen för att dra gränsen mellan två ramar och ändra storlek på dem. Om detta inte önskas kan ramelementet ha noresize-attributet applicerat på sig och kommer inte att kunna ändras. Låt oss kombinera båda dessa begrepp i praktiken.

Vi kommer att skapa följande layout:

• En rad i full bredd längst upp på sidan;
• Tre kolumner under den översta raden;
• De första och tredje kolumnerna är dimensionerade för att skapa vänster och höger sidofält;
• Den mellersta kolumnen är dimensionerad för att representera ett större innehållsområde.

Vi kan skapa en HTML-ram med följande kod:

Den här koden skapar en ramuppsättning med två rader:

• Den första raden är 150 pixlar hög. Attributet noresize som anges för den första bildrutan betyder att dess storlek inte kan ändras;
• Stilarna vi använde tidigare på frame_1.html behålls, men de påverkar bara innehållet i den ramen;
• Den andra raden expanderar för att fylla det återstående utrymmet;
• Den andra ramuppsättningen är kapslad i den andra raden och innehåller tre kolumner;
• Den första och tredje kolumnen fyller vardera 20 % av det tillgängliga webbläsarfönstrets utrymme;
• Den andra kolumnen expanderar för att fylla utrymmet mellan den första och tredje kolumnen;
• Eftersom vi inte angav noresize-attributet för kolumnerna kommer de initialt att visas baserat på storlekarna som anges i koden.

Men en webbplatsbesökare kommer att kunna ändra storlek på dem manuellt.

Denna kod skapar en webbsida som renderas så här:

Formatera ram och utfyllnad runt ramen

Nu när vi har definierat layouten, om vi behöver, kan vi öka eller minska stoppningen mellan ramar, samt ta bort gränsen mellan dem. Med hjälp av layouten vi skapade i föregående steg, låt oss ta bort gränserna mellan de tre kolumnerna, men lämna gränsen mellan de övre och nedre raden. Låt oss också lägga till lite utfyllnad runt innehållet i den första HTML-ramen:

Marginheight-attributet som tillämpas på den första bildrutan lägger till 15 pixlars marginal över och under innehållet som laddas i den första bildrutan. Ett ramkantvärde på 0 tar bort kanter för alla tre nedre ramarna. Så här kommer det att se ut:

Specificera ramar med hjälp av länkar

En av de vanligaste användningsområdena för ramar är att skapa en "klibbig" navigeringsmeny inom en ram som alltid är synlig oavsett placeringen av innehållet i andra ramar. När de används på rätt sätt orsakar länkar i navigeringsmenyn att nya resurser laddas i ramen medan resten av ramen förblir statisk.

Du kan formatera ankare för att rikta in sig på specifika ramar genom att ge det önskade ramelementet ett namnattribut och använda målattributet inuti a-elementet för att ladda href i den angivna ramen. Om allt detta är lite förvirrande, låt oss gå igenom processen att skapa ramar i HTML steg för steg.

Först och främst måste vi tilldela ett namn till ramen där länkarna ska öppnas. I layouten vi skapade tidigare kan vi använda den vänstra kolumnen för navigeringsmenyn och mittkolumnen som målram. För att göra detta måste du tilldela ett namnattribut till målelementet:

Nu när vi har ställt in name="mid_col" för den centrala kolumnen kan vi skapa flera länkar i källdokumentet för vår vänstra kolumn frame_2.html:

Ram 2

Innehållet i ram 2

• Ladda frame_1.html
• Ladda frame_2.html
• Ladda frame_3.html
• Ladda frame_4.html

Nu, när vi laddar webbsidan, kommer det vänstra sidofältet att vara värd för fyra navigeringslänkar. När länken klickas laddas filens innehåll i mittkolumnramen med attributet name="mid_col" . Det här är vad vi kommer att se när sidan laddas:

Tillhandahåller en reserv för noframes

Tidigare användes noframes-elementet för att ge en reserv för webbläsare som inte stöder HTML-ramar. För närvarande stöder alla moderna webbläsare frames, men noframes stöds praktiskt taget inte. Som ett resultat behöver vi inte längre skapa en noframes reserv när vi arbetar med ramar.

Hur man gör ramar responsiva

När du använder ramar är det ganska svårt att säkerställa användarvänlighet för besökare som kommer åt sidan från smartphones och små surfplattor. Eftersom ramar har tagits bort helt från HTML5 och anses föråldrade är det viktigt att ägare av webbplatser som byggts med ramar planerar att bygga om sina resurser och migrera till andra tekniker.

Använder rader istället för kolumner

Om möjligt, organisera ramar i rader istället för kolumner. På en liten skärm är det mycket lättare att navigera i innehåll vertikalt än horisontellt. HTML-ramar som är ordnade i rad är mycket lättare att se på en liten skärm. Om vi ​​minskar bredden på layouter som innehåller rader och kolumner, och simulerar Apple iPhone 6-skärmen, ser vi att rader är mycket lättare att se än kolumner:

Använd procentsatser för kolumnbredder

När kolumnstorlekar ställs in i procent i stället för pixlar, kommer de automatiskt att ändra storlek baserat på enhetens skärmstorlek. Även om detta kan skapa vissa problem i och med att vissa bildrutor kan bli för små, blir den övergripande interaktionen och visningsupplevelsen bättre om kolumnernas totala bredd anges i procent snarare än pixlar.

Hur man byter från ramar till andra tekniker

Både frameset-elementet och frame-elementet har tagits bort från den senaste HTML5-specifikationen. Ägare av webbplatser som byggts med ramar måste bygga om sina tillgångar för att ta bort dem från layouten. Vid något tillfälle kommer webbläsare att sluta stödja ramar. Att överge ramar är alltså inte bara önskvärt, det måste göras.

Utvärdera innehåll som finns i ramar

Det första steget för att göra om en webbplats som använder HTML iframes är att identifiera orsakerna till att ramar används:

• Användes ramar för att skapa en specifik layout? Om så är fallet kan CSS användas för att skapa en liknande layout;
• Användes ramar för att skapa en specifik annonsbehållarestorlek? Det finns många sätt att återskapa denna effekt med hjälp av CSS eller widgets som är utformade för att fungera med CMS;
• Har ramar använts för att skapa klibbiga navigeringsmenyer? Återigen, samma effekt kan återskapas med CSS;
• Användes ramar för att ladda innehåll från en extern webbplats? Om så är fallet kan iframe-elementet, som är en del av HTML5, användas för att bädda in innehåll från en extern webbplats.

I nästan alla fall kan du använda CSS för att återskapa en layout designad med ramar, och iframes kan användas för att bädda in externa resurser.

Strategi för din nya webbplats

Om din webbplats byggdes med ramar finns det en god chans att den redan är väldigt inaktuell. Istället för att helt enkelt sammanställa allt innehåll på din webbplats till en HTML-fil och styla det med CSS, kanske det är dags att tänka på att uppgradera till ett innehållshanteringssystem.

Att byta till ett CMS kommer att ta mer tid initialt, men i det långa loppet kommer fördelarna med att driva en modern webbplats uppväga de kortsiktiga utmaningarna. För att hjälpa dig att välja ett innehållshanteringssystem rekommenderar vi att du uppmärksammar de tre mest populära:

• WordPress ;
• Joomla! ;
• Drupal.

Ytterligare resurser

Om du vill lära dig mer om HTML-ramar är den bästa källan för mer information World Wide Web Consortium ( W3C). Här är några av sidorna med information om ramar:

• HTML4-dokumentation om ramar;
• Utfasade HTML5-funktioner

relaterade saker