skriv ut »Frames - ramar
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).
Exempel
I exemplet nedan är ramkoden skriven i ett HTML-dokument "index.htm". Koden i dokumentet refererar till de två dokumenten "vanster.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 vanster och main. Koden som anges i varje exempel nedan är den som ska skrivas i sidan som beskriver ramstrukturen, alltså "index.htm" i exemplen:
Två kolumner:
vanster  |
<frameset cols="150,*"> <frame name="vanster" src="vanster.htm"> <frame name="main" src="main.htm"> </frameset> huvudram |
Två rader:
topp |
| <frameset
rows="50,*"> <frame name="topp" src="topp.htm"> <frame name="main" src="main.htm"> </frameset> huvudram |
Två rader och två kolumner:
topp |
|
vanster |
<frameset
rows="50,*"> <frame name="topp" src="topp.htm"> <frameset cols="120,*"> <frame name="vanster" src="vanster.htm"> <frame name="main" src="main.htm"> </frameset> </frameset> huvudram |
Tre rader och två kolumner:
topp |
|
vanster |
<frameset
rows="50,*,50"> <frame name="topp" src="topp.htm"> <frameset cols="100,*"> <frame name="vanster" src="vanster.htm"> <frame name="main" src="main.htm"> </frameset> <frame name="botten" src="botten.htm"> </frameset> huvudram |
botten |
|
Ramkanter (Borders)
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.
Med justeringsbar ramstorlek:
topp |
| <frameset rows="100,*" > <frame src="topp.htm" name="topp"> <frame src="main.htm" name="main"> </frameset> huvudram |
Utan justeringsbar ramstorlek - noresize
topp |
| <frameset rows="100,*" > <frame src="topp.htm" name="topp" noresize> <frame src="main.htm" name="main" noresize> </frameset> botten |
Utan ramkanter -
frameborder="NO" border="0" framespacing="0"
|
Färg på ramkanter
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ärgad ramkant (Hela framesetet):
topp |
|
vanster |
<frameset rows="100,*"
frameborder="yes" border="5" framespacing="5"
bordercolor="#6699cc" > <frame src="topp.htm" name="topp"> <frameset cols="120,*"> <frame src="vanster.htm" name="vanster"> <frame src="main.htm" name="main"> </frameset> </frameset> huvudram |
Färgad ramkant (endast en av ramarna):
|
||||
Bläddringslister i ramsidorna
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.
Med och utan bläddring:
topp (utan bläddring) |
|
vanster |
<frameset rows="100,*" > <frame src="topp.htm" name="topp" scrolling="no"> <frameset cols="120,*"> <frame src="vanster.htm" name="vanster" scrolling="auto"> <frame src="main.htm" name="main"> </frameset> </frameset> huvudram |
Färg på bläddringslisterna kan du ändra med CSS - läs mer här »
Marginaler i frames
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.
Med justeringsbar ramstorlek (standard):
topp |
| <frameset rows="100,*" > <frame src="topp.htm" name="topp" marginwidth="50" marginheight="10"> <frame src="main.htm" name="main" marginwidth="0" marginheight="0"> </frameset> huvudram |
Länkning i ramar/frames
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 topp.htm som skall visa sidan i den nedre ramen (main) se ut så här:
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
Uppdatera flera ramar samtidigt
Med javascript
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:
<!-- //Hide this script from old browsers
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.
Med flera framesets
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) »
