F r a m e s - r a m a r

Transkript

1 skriv ut» F r a m e s - r a m a r Exempel på framesets» Ramkanter (borders)» Färg på ramkanter» Bläddringslister (scrolling)» Marginaler» Länkning i ramar» Uppdatera flera ramar samtidigt» IFRAME - inbäddad ram» Ramar (frames) är ett sätt att dela upp webläsarens fönster i olika sektioner som var och en innehåller en egen websida. Ofta används en ram till en menysida som då är synlig i ramen hela tiden medan de sidor menyn pekar till ändras i de andra ramarna. Precis som med tabeller kan man ha "nästlade" framesets, dvs framesets i framesets, en länk i en ram kan alltså länka till ett helt nytt frameset utanför den egna ramuppsättningen. OBS! Den HTML-fil som beskriver ramuppsättningen (frameset) är inte synligt utan den enda uppgiften är att beskriva ramarna för webläsaren. Ramarna delar webläsarens fönster i rader (rows) eller kolumner (cols). Storleken på raderna och kolumnerna kan anges på fyra sätt: Storlek i pixlar (bildpunkter): <frameset cols="100, 250, 300"> (Själva enheten "pixlar, px" behöver ej anges) Storlek i procent (%) av webläsarfönstret:<frameset cols="50%, 50%"> Relativ storlek: <frameset cols="*, 500, *"> Använd en asterisk (*) för att tilldela ramen eller kolumnen resterande utrymme av webläsarfönstrets yta. Om du anger asterisk (*) på två eller fler kolumner delar de lika på resterande utrymme. Storlek i förhållande till de andra ramarna: <frameset cols="1*, 3*, 1*"> Ett andelsvärde och en asterisk anger storlek i förhållande till andra ramar vilkas storlek också anges med asterisk. I exemplet ovan är den första kolumnen 20% (1/5), den andra 60% (3/5) och den tredje 20% (1/5). Vilken metod du än väljer bör du tänka på till vilken bildskärmsupplösning du anpassar din webplats. E x e m p e l I exemplet nedan är ramkoden skriven i ett HTML-dokument "index.htm". Koden i dokumentet refererar till de två dokumenten ".htm" och "main.htm". Du måste alltså skapa tre dokument för ett frameset med två synliga dokument. Ge varje ram ett eget namn och ange vilka HTML-sidor som skall visas i ramen - i exemplet nedan är ramnamnen och main. Koden som anges i varje exempel nedan är den som ska skrivas i sidan som beskriver ramstrukturen, alltså "index.htm" i exemplen: T v å k o l u m n e r : Sida 1 av 7

2 <frameset cols="150,*"> <frame name="" src=".htm"> T v å r a d e r : <frameset rows="50,*"> <frame name="" src=".htm"> T v å r a d e r o c h t v å k o l u m n e r : <frameset rows="50,*"> <frame name="" src=".htm"> <frameset cols="120,*"> <frame name="" src=".htm"> T r e r a d e r o c h t v å k o l u m n e r : Sida 2 av 7

3 <frameset rows="50,*,50"> <frame name="" src=".htm"> <frameset cols="100,*"> <frame name="" src=".htm"> <frame name="botten" src="botten.htm"> botten R a m k a n t e r ( B o r d e r s ) Den synliga ramkanten som avdelar de olika ramarna är som standard inte fixerad. Det innebär att dina besökare har möjlighet att själva ändra storleksförhållanden mellan de olika ramarna. Du kan också dölja ramkanten helt och hållet och då kan inte besökarna heller justera ramstorlekarna. M e d j u s t e r i n g s b a r r a m s t o r l e k : <frame src=".htm" name=""> U t a n j u s t e r i n g s b a r r a m s t o r l e k - n o r e s i z e <frame src=".htm" name="" noresize> <frame src="main.htm" name="main" noresize> Sida 3 av 7

4 botten U t a n r a m k a n t e r - f r a m e b o r d e r = " N O " b o r d e r = " 0 " f r a m e s p a c i n g = " 0 " <frameset rows="100,*" frameborder="no" border="0" framespacing="0" > <frame src=".htm" name=""> F ä r g p å r a m k a n t e r Ramkanten har som standard färgen grå. Vill du ändra färg, bredd eller ta bort ramkanten helt använder du attributen frameborder - border - framespacing och bordercolor och hur de olika webläsarna tolkar attributen varierar. F ä r g a d r a m k a n t ( H e l a f r a m e s e t e t ) : <frameset rows="100,*" frameborder="yes" border="5" framespacing="5" bordercolor="#6699cc" > <frame src=".htm" name=""> <frameset cols="120,*"> <frame src=".htm" name=""> F ä r g a d r a m k a n t ( e n d a s t e n a v r a m a r n a ) : Sida 4 av 7

5 <frame src=".htm" name=""> <frameset cols="120,*" frameborder="yes" border="5" framespacing="5"> <frame src=".htm" name=""> <frame src="main.htm" name="main" frameborder="yes" bordercolor="#6699cc"> B l ä d d r i n g s l i s t e r i r a m s i d o r n a Standard för de flesta webläsare är att visa bläddringslisterna endast när innehållet i ramen är mer än vad som får plats i ramens yta. Vill du vara säker på att bläddringslister bara visas när de behövs anger du attributet scrolling="auto". Om du vill se till att bläddringslister aldrig syns anger du scrolling="no" men då bör du vara medveten om att hela innehållet på din sida kanske inte syns om ramen är för liten. M e d o c h u t a n b l ä d d r i n g : (utan bläddring) (med bläddring) <frame src=".htm" name="" scrolling="no"> <frameset cols="120,*"> <frame src=".htm" name="" scrolling="auto"> Färg på bläddringslisterna kan du ändra med CSS - läs mer här» M a r g i n a l e r i f r a m e s I varje ram kan du ange ett avstånd från vänster-, höger, över- och underkant. Attributen är marginwidth och marginheight. Om du inte anger något värde används ett standardvärde på ca 10 pixlar. Anger du ett eget värde för den inre marginalen är chansen större att webläsaren visar det mått du själv bestämt. M e d j u s t e r i n g s b a r r a m s t o r l e k ( s t a n d a r d ) : Sida 5 av 7

6 <frame src=".htm" name="" marginwidth="50" marginheight="10"> <frame src="main.htm" name="main" marginwidth="0" marginheight="0"> L ä n k n i n g i r a m a r / f r a m e s När du skapar länkar inom ett frameset är det viktigt att du anger målram (target frame) där dokumenten ska öppnas. Målet är alltså namnet på den ramen som den länkade sidan ska visas i. I exemplet ovan kan en länk i dokumentet.htm som skall visa sidan i den nedre ramen (main) se ut så här: <a href="sidan.htm" target="main">till sidan</a> Vid länkning inom din egen webplats eller till externa websidor kan du använda attributet target för att ange om sidan skall visas i en namngiven ram, i hela fönstret eller i ett nytt webläsarfönster. target="ramnamn" - öppnas i ramen med det angivna ramnamnet target="_self" öppnas i samma ram (samma resultat om du inte anger något mål) target="_top" - öppnas i hela fönstret (utanför framesetet) target="_blank" - öppnas i nytt fönster U p p d a t e r a f l e r a r a m a r s a m t i d i g t M e d j a v a s c r i p t Att få två eller flera dokument att öppnas i olika ramar utan att öppna nya framesetmöjligt med hjälp av Javascript. Om du har menyer med undermenyer kan varje undermeny finnas i ett eget dokument som öppnas samtidigt som "startsidan" för undermenyn. Klicka här för att se exempel» Nedan ser du javascriptkoden som gör att länkarna i exemplet» dokument i två ramar. OBS! Behöver du byta ut innehållet i fler ramar lägger du bara till url3, url4 osv. Lägg scriptet inom <HEAD>. Byt ut ramnamnen som är markerade med fetstil till namnen på dina egna ramar: <script language="javascript"> <!-- //Hide this script from old browsers Sida 6 av 7

7 function change (url1,url2) { parent.frame1.location.href = url1; parent.frame2.location.href = url2; } // --> </script> Här är koden som du använder där du vill ha länken. Byt ut namnen link1.htm och link2.htm mot dina egna länkadresser. <a href="javascript:change('link1.htm','link2.htm');"> klicka här! </a> M e d f l e r a f r a m e s e t s En annan lösning på att uppdatera flera olika ramar samtidigt är att helt enkelt öppna upp ett nytt frameset i en befintlig ram eller som ersätter öppet frameset. Fördelen är att det inte krävs javascript eller annan teknik förutom vanlig HTML. Nackdelen är att det behövs flera olika menydokument för att kunna visa de olika undermenyerna. Hur du bygger upp dina ramar och menyer varierar beroende på vad du är ute efter. I exemplen nedan visas två varianter. Den första exemplet öppnar nya undermenyer och höger startsida. Det andra exemplet öppnar nya menyer med undermenyer och höger startsida. Klicka här för att se exempel 1» Klicka här för att se exempel 2» TIPS! DHTML-meny som fungera i frames: DHTML-meny (popup-meny)» [ Copyright W e b d e s i g n s k o l a n Materialet får skrivas ut och användas för personligt bruk. Användning i undervisningssyfte är ej tillåten utan vårt tillstånd - läs mer här» ] Sida 7 av 7