Flytande boxar

1. Inledning

Flytande boxar (floating boxes på engelska) tar vid där layoutrutnätet (layout grid) slutade. Layoutrutan bygger på vanlig Html-kod och görs om till tabeller. Flytande boxar använder sig av stilmallskod. Oftast kombinerar man dessa båda sätt för att få ett bra resultat, men här skall vi enbart titta på flytande boxar.

Du har redan stött på flytande boxar, på sidan om hur man importerar Photoshop-lager till en webbsida i GoLive. Läs mer >

Med flytande boxar kan man placera olika objekt, t.ex en text eller en bild, med stor precision på webbsidan. Man kan också placera texter över bilder, eftersom varje box får ett eget lager.

Priset man får betala för denna funktionalitet är att koden inte kan läsas av alla webbläsare. Man brukar räkna med att mellan 5-15% av besökarna inte kan se på sidan. Tycker man inte om det kan man därför lägga in två olika versioner av sin webbsida, för att alla skall få tillgång till den.

Man bör också noggrant testa sina sidor innan man publicerar dem. Detta för att undvika sådana fel som man själv är upphov till.

2. Skapa en flytande box

Öpna paletten med objekt och dra in en flytande box i ett nytt, tomt dokument.

Den flytande boxen är nu en behållare, som vi kan dra in andra objekt i.

Bilden visar vilket verktyg du skall använda och hur boxen ser ut i dokumentet.

Längst uppe till vänster syns en markör med texten SB på sig. SB står här för "Style Box" och underlättar för dig när du vill markera och flytta boxen till ett annat ställe.

I koden har en stilmall lagts in i HEAD och själva boxen genereras med ett DIV-element.

Man kan flytta in nästan vilket objekt man vill i boxen: en bild, en textruta, osv.

Här har jag lagt in en bild på en fjäril.

När man klickar på SB-knappen markeras den flytande boxen. I kontextpaletten (Inspector) syns då följande inställningsmöjligheter:

Under Namn (Name) kan man döpa boxen, om "Layer 1" känns obekvämt. Man kan ocksåpositionera boxen, med hjälp av "Left" och "Top".

Bredden och höjden på boxen går också att anpassa, liksom om den skall vara synlig för besökaren, om den skall ha bakgrundsfärg, osv.

Pröva att ändra positionen på boxen. Jag valde att lägga in min box 80 pixlar till höger på sidan.

Tips!
När man lägger in en box hamnar den oftast inte där man vill. Man måste då gå in och ändra placeringen av den för hand. Självklart blir det då mycket enklare om man använder ett layoutrutnät.

Jag har sedan lagt in ännu en box med en bild. Boxarna har jag placerat på varandra, via inställningsalternativet Depth i kontextpaletten.

Fjärilen har depth=1 och ligger därmed underst. Den andra bilden har depth=2, eftersom jag vill att den skall ligga överst.

I Fönster-menyn hittar man alternativet Flytande boxar, som ger följande dialogruta:

Här ser man de båda lagren. Anledningen till att det står ID är att koden för boxen är <DIV id="layer 1">

Ögat och pennan används för att visa och dölja boxar.

Klickar man på ögat döljs hela boxen och dess innehåll. Genom att klicka på ögat, pennan och/eller låset, skall man kunna skapa olika visningslägen. (Jag har emellertid aldrig fått detta att fungera så som jag velat.)

Den svarta pilen i övre högra hörnet har två alternativ:

• Convert To Layout Grid
• Floating Box Grid Settings

Den första kan användas för att omvanlda boxar till en layoutruta (rutnät), med det förutsätteratt de olika boxarna inte är placerade på varandra.

Den andra utnyttjar samma inställningsmöjligheter som kontextpaletten för layoutrutan.

Mitt tips är att du alltid börjar med en layoutnätsruta och sedan flyttar in flytande boxar på denna. På det viset går arbetet snabbare och blir roligare.