53 besökare online

• startsidan
• webdesign HTML
• PHP-MySQL
• photoshop
• dreamweaver
• flash
• illustrator

Ramar (frames) är ett sätt att dela upp webbläsarens fönster i olika sektioner som var och en innehåller en egen webbsida. 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 webbläsaren. Ramarna delar webbläsarens fönster i rader (rows) eller kolumner (cols). Storleken på raderna och kolumnerna kan anges på fyra sätt:

 

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

Klicka här för visa exemplet 

 

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

Klicka här för att se exemplet 

 

Utan justeringsbar ramstorlek - noresize

topp

<frameset rows="100,*" > <frame src="topp.htm" name="topp" noresize> <frame src="main.htm" name="main" noresize> </frameset> botten

Klicka här för att se exemplet 

 

Utan ramkanter -
frameborder="NO" border="0" framespacing="0"

topp <frameset rows="100,*" frameborder="NO" border="0" framespacing="0" > <frame src="topp.htm" name="topp"> <frame src="main.htm" name="main"> </frameset> huvudram

Klicka här för att se exemplet 

 

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 webblä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

Klicka här för att se exemplet 

 

Färgad ramkant (endast en av ramarna):

topp vanster <frameset rows="100,*" > <frame src="topp.htm" name="topp"> <frameset cols="120,*" frameborder="yes" border="5" framespacing="5"> <frame src="vanster.htm" name="vanster"> <frame src="main.htm" name="main" frameborder="yes" bordercolor="#6699cc"> </frameset> </frameset> huvudram

Klicka här för att se exemplet 

 

Bläddringslister i ramsidorna

Standard för de flesta webblä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 (med bläddring)	<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

Klicka här för att se exemplet 

 

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 webbläsaren visar det mått du själv bestämt.

 

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

Klicka här för att se exemplet 

 

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.php som skall visa sidan i den nedre ramen (main) se ut så här:

Vid länkning inom din egen webbplats eller till externa webbsidor 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 webbläsarfö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 

Javascriptkoden nedan gör att två sidor öppnas i olika ramar. Lägg scriptet inom <HEAD> och byt ut ramnamnen som är markerade med fetstil till namnen på dina egna ramar:

OBS! Behöver du byta ut innehållet i fler ramar än två lägger du bara till url3, url4 etc.

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.

Det första exemplet öppnar nya undermenyer och höger startsida.

Klicka här för att se exempel 1 

Det andra exemplet öppnar nya menyer med undermenyer och höger startsida.

Klicka här för att se exempel 2 

 

 

 

 till sidans topp

Copyright © www.webdesignskolan.se
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 »