41 besökare, 1 medlem och 2 Studenter är online nu
Loopia

Dreamweaver

IFRAME - inline frame


prova att bläddra i ramen nedan:

 

En IFRAME (Inline Floating Frames) är en ram som är oberoende av webbläsarens fönster avseende storlek och placering. Ett vanligt frameset består ju av två eller flera ramar som storleksmässigt anges i pixlar, procent eller andel förhållande till fönsterstorleken. Läs mer om Frames/Ramar här ». En IFRAME placeras i ett dokument men visar liksom Frames/Ramar innehållet i ett annat källdokument. Den sida som ska visas i IFRAME är alltså en annan HTML-sida som du förberett och sparat tidigare.

IFRAME kan placeras överlappande och kan ha även ha en transparent bakgrund. OBS! Även om IFRAME är standard från och med HTML 4 (läs mer på www.w3c.org) så är stödet begränsat i andra webbläsare än Internet Explorer. Överlappande IFRAME använder attributet z-index vilket stöds av IE 4 när det gäller Lager (layers). Z-index för IFRAME stöds däremot bara av IE 5.5 och senare versioner. Om webbläsaren inte stöder IFRAME visas inget innehåll alls!

 

Infoga en IFRAME

Det finns ingen menypalett för att infoga och ändra en IFRAME men genom att infoga koden kan du få en dialogruta där du kan göra olika val.

  1. Placera textmarkören där du vill ha din IFRAME. Välj menyn "Insert/tag..." (Infoga/Kod...):


  2. Välj kategorin "Markup Language Tags/HTML Tags" och markera märket iframe i listan som visas till höger:



    När du markerat märket visas en beskrivning av funktion och egenskaper för just det märke du valt.
  3. Välj knappen "Insert" (Infoga) för att visa den nya dilaogrutan "Tag Editor". Gör dina val och bekräfta med OK:



    Valen du kan göra är:

    Name: Namn och identifierare på ramen. Används även som mål (target) vid länkning.

    Width och Height: Bredd och höjd på ramen i pixlar. Du kan även ange enheten i procent av webbläsarens fönster genom att tex ange enheten %

    Margin Width och Margin Height: Avståndet från ramkant till innehåll i ramen.

    Alignment: Ramens placering i förhållande till det tillgänga utrymmet (som inte behöver vara detsamma som fönsterytan).

    Scrolling: auto=vid behov yes=alltid no=aldrig

    Show Borders: Visar ramens kantlinje

  4. När du infogat koden för din IFRAME stänger du dialogrutan "Tag choser" med knappen "Close". Din kod är ju redan infogad och väljer du "Insert". Börjar hela proceduren om igen...

    Nedan ser du hur koden visas i kodvyn samtidigt som dialogrutan fortfarande är öppen:


  5. Dreamweaver visar inte din IFRAME i designvyn. Du måste förhandsgranska i webbläsaren med kommandot F12 för att se resultatet:



    Klicka här för att se exemplet ovan i ett eget fönster »

 

 

Placering av IFRAME i Tabell

Placeringen av en IFRAME i förhållande till webbläsarfönstret gör du enklast och mest exakt genom att använda Tabeller eller Lager ( läs mer i övningarna "Tabeller" » och "Lager - Layers" » )

Att lägga innehållet i en tabellcell ger bra möjligheter att placera annat text- och bildinnehåll bredvid innehållet i en IFRAME men i samma tabell. Skapa en tabell på vanligt sätt och placera markören i den cell du infoga IFRAME. I övrigt enligt punkt 1 ovan.

Exemplet nedan visar en tabell med 1 rad och 3 kolumner där IFRAME finns i cell nr 2:

Klicka här för att se exemplet ovan i ett eget fönster »

Vill du ha din IFRAME centrerad vertikalt och horisontellt så att den alltid ligger mitt i webbläsarens fönster kan du lägga IFRAME i en tabell med 1 rad och 1 kolumn där tabellen är 100% i både bredd och höjd och cellens innehåll är centrerat:

I exemplet nedan ligger IFRAME i en tabell som består av endast 1 cell. Bakgrundsbilden på sidan är oberoende av storlek och placering av IFRAME till skillnad från om du försöker få samma layout i ett vanligt frameset (ramar):

Klicka här för att se exemplet ovan i ett eget fönster »

 

Placering av IFRAME med koordinater

Genom att ge IFRAME en positionering med hjälp av X- och Y-koordinater får ramen liknande egenskaper som ett Lager.

Vill du placera en IFRAME i ett befintligt Lager placerar du markören i Lagret och infogar koden för IFRAME enligt punkt 1 ovan. Läs mer om Lager i övningen "Lager - Layers" ».

Exemplet nedan visar hur du ger din IFRAME en exakt position på sidan med hjälp av attributet style="position..." där du anger om du vill ha en absolut eller relativ placering av IFRAME.

I kodvyn infogar du attributet style och anger önskad position av IFRAME. I exemplet nedan anges att ramen ska placeras i en absolut position av 100 pixlar från vänsterkant och 100 pixlar från överkant av webbläsarens fönster:

Resultatet blir så här när du förgranskar med F12:



Klicka här för att se exemplet ovan i ett eget fönster »

Du kan även ange att positionen ska vara relativ i förhållande till annat innehåll på sidan. Risken är då mindre att IFRAME hamnar framför andra bilder och text på sidan.


IFRAME placerad med 100 pixlars avstånd relativt från övrig text:

Klicka här för att se exemplet ovan i ett eget fönster »

IFRAME placerad med 100 pixlars avstånd absolut från fönsterkanten:

Klicka här för att se exemplet ovan i ett eget fönster »

 

Länka till en sida i IFRAME

Att länka till en IFRAME fungerar likadant som att länka till en ram i ett Frameset. Målet för länken är detsamma som ramens namn vilket i detta fall är namnet på IFRAME. Prova länkarna nedan som öppnar sidor i 3 olika IFRAME:

Länk 1 »   [återställ]

Länk 2 »   [återställ]

Länk 3 »   [återställ]

Länken gör du på vanligt sätt genom att markera området som ska länkas och välja måldokumentet i paletten "Properties" (Egenskaper). Viktigt är att du väljer "Target" (mål) för länken. Du kan inte bläddra fram namnet på IFRAME utan måste skriva det själv i rutan":

Koden för en IFRAME enligt ovan kan se ut så här:

<iframe src="sidan1.php"
name="iframe1"

width="120" height="150"
>
</iframe>

Koden för länken som öppnar sidan i ramen kan se ut så här:

<a href="sidan2.php" target="iframe1">Länk...</a>
 

Transparent bakgrund - genomskinlig IFRAME

IFRAME kan ha egenskapen transparent och visa innehållet som finns under ramen. För att det ska fungera måste du ange transparens på två ställen:

  1. I koden för IFRAME med attributet allowtransparency="true":



  2. I bakgrundens egenskaper på sidan som visas i IFRAME med attributet style="background-color:transparent":

 

OBS! Om du bara anger ett av de två attributen för genomskinlighet fungerar det inte! Se exemplet nedan:

Här fungerar transparensen och bakgrundbilden syns genom IFRAME:

Klicka här för att se exemplet ovan i ett eget fönster »

 

Formatering av IFRAME

Med hjälp av CSS kan du formatera de flesta HTML-objekt och så även IFRAME. Läs mer om CSS i övningen "CSS - Stilmallar" »

I alla exemplen nedan är kantlinjen borttagen med attributet frameborder="0". Byt ut färgkoder, kantlinjetyp och tjocklek i exemplen nedan.

Grundkoden för exemplen nedan är då:

<iframe src="sidan.php" name="iframe" width="150" height="150" scrolling="auto" frameborder="0" style="ange stil enligt exemplen nedan här"></iframe>

Prova att bläddra i exemplen nedan!

style="border: 2px solid #6699FF;" style="border-top: 2px solid #CC6630; border-bottom: 2px solid #CC6630;" style="border: 2px dotted #CC3366;"
     

(Anges i koden för sidan som visas i IFRAME)

<HEAD>
<style type="text/css">
<!--
body {
scrollbar-face-color: #ffffff;
scrollbar-highlight-color: #ffffff;
scrollbar-shadow-color: #ffffff;
scrollbar-3dlight-color: #cccccc;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #ffffff;
scrollbar-darkshadow-color: #cccccc;
}
-->
</style>

</HEAD>

style="border: 1px solid #666666;"

(bläddringslister på samma sätt som visas till vänster)

style="border: 5px double #ACBBEC;"