NinetNet 
HTML Ramar - Frames
|
|
Ramar - FramesAtt använda ramar kan verka otroligt praktiskt på många sätt! Men innan du sätter igång med att bygga upp din webbplats med ramar måste du känna till att det inte är korrekt att använda ramar enligt strict standard!
|
InledningMed frames kan man dela in sidan i olika sektioner - ramar. I varje ram kan man sedan ladda in ett html-dokument. Det vanligaste är att man till vänster har en ram med en meny där man skapar länkar för att bläddra fram olika sidor i huvudramen. Som här på NinetNet, faktiskt! Vill du att din websida ska delas upp med ramar måste du: •Skapa en html-sida med ett "frameset" som anger hur ramarna ska se ut. •Skapa html-sidorna som ska laddas in i ramarna.
•Öppna "frameset-sidan" för att se resultatet. Om du vill att hela din webplats ska vara uppbyggd av ramar är det alltså din förstasida (oftast index.html) som ska innehålla "framesetet"! Du bör också ange i din "DOCTYPE" att sidan innehåller ett "frameset". Läs mer om det här! Frameset med två kolumnerDet vanligaste är som sagt att skapa ett frameset med två kolumner. Så här skulle det kunna se ut:
Och så här ser koden ut på frameset-sidan:
• OBS! Ingen body-tagg, alltså! Så här funkar det:
• Bredden på ramen är bara ett exempel! Det går förstås att ändra! • Det går också bra att ange storleken på ramarna i procent. Den kommer då att anpassas efter webläsarens fönster och varierar alltså beroende på vad besökaren har för upplösning och storlek på skärmen. Frameset med tre raderKanske vill man ha sin meny på toppen av sidan i stället. Och en ram med information längst ner? Då skapar man i stället ett frameset med tre rader. Så här skulle det kunna se ut:
Och så här ser koden ut på frameset-sidan:
Så här funkar det:
• Höjden på ramarna är bara ett exempel! Det går förstås att ändra! • Det går också bra att ange storleken på ramarna i procent. Den kommer då att anpassas efter webläsarens fönster och varierar alltså beroende på vad besökaren har för upplösning och storlek på skärmen. Frameset med tre rader och två kolumnerMan kan också skapa ett frameset som innehåller både rader och kolumner. Så här skulle det kunna se ut:
Och så här ser frameset-koden se ut:
Så här funkar det:
• Bredd och höjd på ramarna är bara ett exempel! Det går förstås att ändra! • Det går också bra att ange storleken på ramarna i procent. Den kommer då att anpassas efter webläsarens fönster och varierar alltså beroende på vad besökaren har för upplösning och storlek på skärmen. Frameborder, Framespacing, Border och BordercolorInledningDe här attributen är för att man ska kunna styra utseendet på ramkanterna eller ta bort dem helt och hållet. Håll i minnet att alla webläsare visar ramar på väldigt olika sätt. Även om du arbetar med de här attributen kommer utseendet på ramarna att variera EN HEL DEL beroende på webläsare! Webläsare visar t ex ramkanter med olika bredd. Fast du anger att ramkanten ska vara ett visst antal pixlar bred kommer den ändå att leva sitt eget liv i olika webläsare... Färgen på ramkanten varierar också. De flesta webläsare visar ramkanter i någon form av ospecifierat grått... Alltså! RamkanterOm du inte särskilt anger något annat kommer dina ramar alltså att visas med kanter som man kan dra i för att göra ramarna större eller mindre... Vill du bli av med kanterna helt och hållet skriver du så här i framesetets start-tagg:
Om du vill ha ramarna KVAR men inte vill att det ska gå att dra i kanterna så att man kan ändra storlek på dem använder du noresize i VARJE frame-tagg. Så här:
Framespacing och BorderGenom att ändra värdet i framespacing och border kan du bestämma "tjockleken" på kanterna. Mäts i pixlar. Båda betyder egentligen samma sak - men vissa webläsare förstår den ena men inte den andra och vice versa. Alltså ska du ange båda för att få det att funka.
Och som sagt. Det här är är ingen exakt vetenskap. 10 betyder inte att det ser exakt likadant ut i alla webläsare. BordercolorMed attributet bordercolor kan du ange vad du vill ha för färg på kanterna.
• Bordercolor fungerar inte i Opera. • Bordercolor fungerar inte tillsammans med frameborder="0". Läs vidare! FrameborderMed attributet frameborder anger du om du vill att ramarna ska visas med 3D-effekt eller inte. Att ange att man vill att ramen ska visas med 3D är ju ganska onödigt eftersom de gör det automatiskt. Om du anger att ramarna INTE ska visas med 3D kommer det se väldigt olika ut beroende på webläsare.
1 - anger att det ska vara 3D-effekt OBS! När du anger "1" bekräftar du bara att du vill ha 3D. Det påverkar alltså inte bredden på kanten! Ibland anges frameborder med "yes" i stället för "1". Men det strular till det i en del webläsare! Tips! Bläddringslister / Rullningslister / ScrollbarsMed scrolling kan du ange om ramarna ska ha bläddringslist eller inte. "auto" - visar bläddringslist vid behov Låt oss säga att du har en sida med två kolumner med en meny och en huvudsida och vill att man alltid ska kunna bläddra i menyn och att huvudsidan ska visa bläddringslist vid behov. Då skulle det kunna se ut så här i koden:
• Om du inte anger någonting kommer det att visas en bläddringslist vid behov (om sidan tar större plats än ramen). • Observera att med alternativet scrolling="no" kommer det INTE att visas någon bläddringslist även om du klantat till det och innehållet på sidan tar större plats än ramen... • Vill du själv bestämma hur bläddringslistenska se ut måste du använda css på den sida som LADDAS IN i ramen. Den här funktionen stöds än så länge bara av Internet Explorer och lite halvdant i nyare versioner av Opera. Läs mer om hur man byter färg på bläddringslister under rubriken: OBS! MarginalerMan kan också bestämma avståndet från webläsarens kanter till innehållet i de olika ramarna. Det anges med attributen marginwidth och marginheight och mäts i pixlar. Man kan alltså bara ange vänstermarginalen och marginalen till sidans topp. Marginalerna anges i varje frame-tagg. Alla sidor som laddas in i ramen kommer att ha dessa marginaler. Vill du ha en vänstermarginal på 30 pixlar och toppmarginal på 20 pixlar skulle det se ut så här i koden:
Om du inte anger några marginaler kommer de att styras av webläsarens standardvärde. Du ska alltså ange marginwidth och marginheight med värdet 0 om du inte vill ha några marginaler alls. Så här:
• Det går utmärkt att även infoga marginaler på sidan som laddas in i ramen som vanligt. Men då visas så att säga dubbla marginaler i de flesta webläsare. Välj det ena eller andra! LänkningNär man skapar länkar inom ett frameset är det viktigt att man inte glömt bort att namnge ramarna. Genom att använda target i länkens start-tagg <a> anger man nämligen i vilken ram den nya sidan ska öppnas. Låt oss anta att du från din meny-sida som heter "meny.html" ska länka till en sida med recept på plommonpaj som heter "paj.html" och vill att sidan ska öppnas i ramen som du namngett till "huvud". Då skulle länken du skriver in på "meny.html" se ut så här:
• Om du inte anger någon "target" kommer den nya sidan laddas in i samma ram som länksidan. • Glöm för all del inte att ange target="_blank" eller target="_top" när du länkar till en sida UTANFÖR din webplats! Gör du inte det kommer sidan fastna inne i dina ramar... Mer om hur man infogar länkar hittar du under HTML / Länkar The easy way...Kanske har du en menysida i ditt frameset där alla länkar ska laddas in i samma ram / frame? För att slippa ange target i varje länk kan du då i stället infoga base target inom <head> på sidan som LADDAS IN i ramen. I exemplet ovan skulle det alltså bli meny.html.
• Koden ovan går att kombinera med "target" direkt i länken om du vill att vissa länkar ska ha ett annat mål eller öppnas med t ex target="_blank". OBS! ExempelExempel på ett enkelt frameset med 2 kolumner. Utan synliga ramar och utan marginaler. Med bläddringslist i båda ramarna.
Fördelar och nackdelar med Ramar - FramesFördelar
•Det är lättare för dig att uppdatera sidorna! •Det går snabbare att ladda in nya sidor eftersom bara en ram i taget laddas om. •Navigeringen blir enklare. Menyn ligger oförändrad kvar när man scrollar och bläddrar mellan olika sidor. •Den ram som har huvud-innehållet och som besökaren kanske vill skriva ut kan göras tillräckligt smal för att få plats på ett A4-papper. Nackdelar
•Det tar lite längre tid första gången man laddar sidan. •Det fungerar inte att skapa bokmärken direkt till en undersida på en sajt uppbyggd med Ramar / Frames. •Adressen och Titeln på underdokument kommer inte att synas, vilket gör att besökarna kan ha lite svårt att orientera sig. •Det blir svårare att skapa en snygg design. Delvis eftersom det antagligen kommer att dyka upp bläddringslister. Och de ser ju olika ut i olika webläsare... •Det är inte är korrekt att använda ramar enligt strict standard! •Webbplatsen blir svårtillgänglig för dem som surfar med andra redskap än en ordinär dator - som till exempel mobiltelefon eller handdator. •De som har någon form av handikapp och surfar med anpassade webläsare eller de som inte använder grafisk webbläsare av andra orsaker kan få problem. Inte så användarvänligt på det sättet alltså! Det finns riktlinjer för det här med tillgänglighet och där avråder bestämt man från användandet av ramar. Tips!•Om man bygger sin webplats med ramar gäller det att vara lite finurlig eftersom sökmotorer egentligen inte är så förtjusta i ramar. Läs mer om det under rubriken: •Eftersom det inte går att bokmärka undersidor bör du alltid infoga en länk till din sajts startsida på undersidorna. Ange då target="_blank" eller target="_top" i länken - för att förhindra att hela sajten öppnas i bara en av dina ramar. •Adressen och Titeln på underdokument kommer inte att synas i adress-rutan. Därför kan det vara bra att infoga någon form av "karta" på sidan så att besökarna kan orientera sig. Som på toppen av den här sidan... |
|||||||||||||||||||||||||||||||||||||||||||||||||||||
