Webbstudio Internetworld - Webbproduktion förklarad på svenska - En del av IDG.se. I dessa program redigerar du HTML och så sparar du dina filer

Transkript

1 Webbstudio Internetworld - Webbproduktion förklarad på svenska - En del av IDG.se Sida 1 av HTML Publicerade artiklar» Lektion 1 I dessa program redigerar du HTML och så sparar du dina filer Innan du kan börja koda HTML måste du först bestämma vilket program du skall använda, om du inte redan valt vilket program du skall använda rekommenderar jag dig att börja använda Anteckningar (NotePad) i Windows. Det är förmodligen den mest simplaste editor du kan få tag på, ändå är den en av de mer omtyckta faktiskt.» Publicerad » Lektion 2» Publicerad » Lektion 3» Publicerad » Lektion 4» Publicerad » Lektion 5» Publicerad » Lektion 6» Publicerad » Lektion 7» Publicerad » Lektion 8» Publicerad » Lektion 9» Publicerad » Lektion 10» Publicerad » Utveckla webbplatsen i 10 steg Det är mycket att tänka på i samband med att en webbplats skall utvecklas. Vissa gånger är det enklare, andra gånger svårare, vi ger dig ett helikopterperspektiv på några av de vanligaste områdena som ofta är aktuella i samband med ett utvecklingsprojekt av en webbplats.» Publicerad » 10 tips för lättredigerad html

2 Webbstudio Internetworld - Webbproduktion förklarad på svenska - En del av IDG.se Sida 2 av Det finns många anledningar till att din html-kod skall vara välstrukturerad. En av de kanske viktigaste anledningarna till detta är att det skall vara lätt att i efterhand hitta rätt område i koden som skall modifieras. Ett välstrukturerat dokument med rätt saker på rätt ställe på rätt sätt gör redigeringen både för dig själv, och för andra, betydligt enklare. Vi ger dig i denna artikel tio tips för att underlätta redigering av dina html-filer.» Publicerad

3 Lektion 10 - Webbstudio Internetworld - En del av IDG.se Sida 1 av » Lektion 10» Av: Carl-Johan Nordqvist» Publicerad: » Skriv ut artikeln På den här lektionen kommer vi att lära dig mappa bilder i programmet mapedit. Först tänkte vi emellertid tala om vad mappning innebär. Helt enkelt att en bild skall kunna innehålla flera olika länkar. Till exempel en bild som föreställer en bil, så skall man kunna klicka på exempelvis däcken för att komma till en sida som har mer information om just däck. Klickar man på en dörr kommer man till en annan sida och så vidare. Med andra ord, en bild som innehåller länkar till olika sidor, eller mål. För att bestämma vilka delar av bilden som skall länka till vad, anger man olika mått, till exempel från pixel sju till tio på längden och pixel tre till åtta på bredden skall kan länka till ett särskilt ställe. Dessa siffror anger man i en särskild rad i koden, att göra detta för hand är väldigt tids- och precisionskrävande. Därför är det ingen som gör det för hand, man använder ett program. Och på denna lektion skall vi visa hur man mappar med mapedit. Ladda hem programmet Börja med att ladda hem mapedit på Installera programmet genom att klicka på filen som du nyss laddat hem och följ de enkla instruktionerna på skärmen. Starta programmet Programmet är ett shareware vilket innebär att du får använda det gratis i 30 dagar. Förberedelser Innan du kan använda programmet skapar du en HTML-fil där bilden som skall mappas (länkas) infogas på vanligt sätt. När detta är gjort följer du stegen här nedan: Starta mapedit Välj File och därefter Open HTML Document Nu kommer en dialogruta fram. Bläddra dig fram till rätt HTML-fil där bilden du skall mappa finns infogad. Dubbelklicka på filen. Nu kommer nästa ruta fram: "Select Inline Image". Här presenteras en lista på vilka bilder som finns infogade i HTML-filen. Välj den du skall mappa genom att dubbelklicka på den. Nu dyker bilden upp på mapedits arbetsyta och nu skall vi börja mappa. Men innan vi gör detta skall vi gå igenom knapparna som finns i mapedits meny. Knapparna i mapedit Grön fyrkant. Denna knapp skall vara nedtryckt om du vill ha fyrkantiga länkområden. Blå cirkel. Cirkeln skall vara nedtryckt om du önskar runda länkområden. Röd triangel. Skall vara nedtryckt om du önskar skapa trekantiga länkområden.

4 Lektion 10 - Webbstudio Internetworld - En del av IDG.se Sida 2 av Pilen. Använder du för att testa de länkområden du skapat. Lila cirkel. Använder du för att flytta på redan skapade länkområden. Polygon. Under menyn Tools hittar du överst alternativet Polygon, detta verktyg skall du använda om du önskar skapa länkområden som varken är tre- eller fyrkantiga. Plus och minus. Använder du för att lägga till kanter eller ta bort kanter från de länkområdena som du skapat med verktyget Polygon. Börja mappa Nu när du vet vilka verktyg som finns skall vi börja mappa bilden. Välj ett av de tre första verktygen och skapa ett område på bilden genom att klicka en gång och dra sedan markören tills lämplig storlek uppstår. Klicka sedan en gång till. Nu kommer ett fönster upp som heter Object URL. Här fyller du överst i var någonstans denna del av bilden skall länka. I nästa ruta skriver du den text som skall komma fram då man har markören över det länkade området. I den tredje rutan fyller du i det mål (target) som länken skall öppnas i (om du använder ramar). De övriga rutorna använder du bland annat ifall du använder on-mouse-over-effekter. Klicka på OK. Upprepa nu denna process tills du har skapat alla länkområden som du önskar. När du skapat alla tänkta områden gå till menyn File och välj Save HTML Document. Testkör nu filen i din webbläsare och se så att det fungerar. Vad har hänt? För den som är intresserad kan vi också förklara vad som hänt i koden. För att bäst förstå det öppnar du ditt nyss modifierade dokument och letar upp stället där du infogade din bild. Då kommer en attribut som kallas för USEMAP vara tillagd, det kommer med andra ord se ut något i stil med följande: <IMG SRC="bild.gif" USEMAP="filen.html#mapkarta"> Oftast längst ner i filen kommer du också att hitta följande: <MAP NAME="mapkarta"> <area shape="rect" coords="69,73,154,138" href="fil2.html" title="till annan fil"> <area shape="default" nohref> </MAP> Som du ser hittar du de värden som du angav i programmet då du mappade bilden.

5 Lektion 9 - Webbstudio Internetworld - En del av IDG.se Sida 1 av » Lektion 9» Av: Carl-Johan Nordqvist» Publicerad: » Skriv ut artikeln <IFRAME> I den här delen skall vi titta på ett lite annorlunda sätt att infoga ramar. Nämligen floating frames, eller flytande ramar. Skillnaden på dessa ramar och andra vanliga ramar är att dessa kan infogas som rutor mitt i en sida. Låt oss först titta på hur en flytande ram ser ut. Fördelen med en att använda flytande ramar istället för exempelvis tabeller, är när du vill kunna placera mycket material på liten yta. Eftersom du kan ange hur stor plats fönstret får ta. Om inte all information får plats på ytan uppkommer en rullningslist. Naturligtvis passar det i de flesta fall bättre att använda tabeller istället för flytande ramar. Men eftersom tekniken finns skall vi visa hur man använder den. För att infoga ovanstående ram använde jag följande kod: <IFRAME WIDTH="150" HEIGHT="150">Exemplet fungerar endast i Internet Explorer</IFRAME> Det enda som jag angivit här är hur stor ramen skall vara, det vill säga genom att ange höjd och bredd. Texten "exemplet fungerar endast i Internet Explorer" som ligger mellan &IFRAME> och </IFRAME> har egentligen inget att göra med ramens inställningar, det är dock den text som de som kör andra webbläsare kommer att se istället för själva ramen om webbläsaren inte stöder flytande ramar. Vilket många webbläsare inte gör ännu. För att kunna presentera text och/eller bilder i ramen måste du precis som i vanliga ramar göra detta i en separat HTML-fil som du sedan infogar i ramen. Med hjälp av SRC. Du lägger alltså med SRC som en attribut i IFRAME. Ex. <IFRAME SRC="ramfil.html"> Om man endast anger höjd och bredd på ramen kommer den autmatiskt att infogas längst upp till höger i dokumentet. Eller längst upp i det block som koden för IFRAME ligger. Det finns i huvudsak tre olika attributer för att styra var någonstans på sidan som den skall finnas. Antingen lägger man ramen i en tabell som man redan placerat på lämpligt ställe. Eller så använder man ALIGN. Och denna attribut fungerar precis på samma sätt här som i exempelvis bildelementet IMG. Det vill säga: RIGHT, CENTER och LEFT. Om du exempelvis vill att din flytande ram skall infinna sig i mitten på sidan skriver du: <IFRAME ALIGN="center">

6 Lektion 9 - Webbstudio Internetworld - En del av IDG.se Sida 2 av Det sista alternativet är att använda HSPACE och VSPACE. Det vill säga vertikalt och horisontellt mellanrum. Om du vill att det skall vara 50 pixlar mellan webbläsaren överkant allt innehåll under skriver du VSPACE="50". Vill du dessutom ha utrymme på sidorna om ramen lägger du till HSPACE med önskat värde. Ex: <IFRAME HSPACE="100" VSPACE="110"> Naturligtvis skall du också tilldela din flytande ram ett namn, så att länkar från den övriga sidan kan öppnas i ramen. Ex. <IFRAME NAME="iframen"> Självklart kan du också bestämma ifall det skall vara möjligt att kunna scrolla eller inte i ramen. Genom att ange YES, NO eller AUTO. Ex. <IFRAME SCROLLING="AUTO"> Då flytande ramar är något som tillkom i den fjärde definitionen av HTML, det vill säga HTML 4.0 så kan du också tilldela dina flytande ramar en titel. Det vill säga en text som kommer upp då man håller stil markören ett litet tag över rutan. Ex. <IFRAME TITLE="Den här texten kommer upp"> Slutligen har vi också tre attributer som styr hur ramarna runt ramen skall se ut eller om det överhuvudtaget skall finnas några ramar runt. Dessa tre är desamma som för vanliga ramar. BORDER, BORDERCOLOR och FRAMEBORDER. Ex. <IFRAME BORDER="5" FRAMEBORDER="yes" BORDERCOLOR="darkblue"> Notera att för att du skall kunna bestämma hur tjock ramen skall vara måste FRAMEBORDER ha värdet YES. Om du inte vill att ramarna skall synas tar du bort BORDERCOLOR och tilldelar värdet NO till FRAMEBORDER. Samt värdet 0 till BORDER.

7 Lektion 8 - Webbstudio Internetworld - En del av IDG.se Sida 1 av » Lektion 8» Av: Carl-Johan Nordqvist» Publicerad: » Skriv ut artikeln På den här lektionen skall vi gå igenom hur du åstadkommer formulär. Formulär är sådant som du använder då du vill att användaren skall mata in egna uppgifter. Det kan vara alltifrån att svara ja eller nej på en fråga, eller att mata in massor av uppgifter om sig själv eller liknande. För att sedan skicka iväg uppgifterna som fyllts i formulären använder man sig av scripts. Antingen CGI-scripts, vilket är det vanligaste, eller så använder man något annat lämpligt scriptspråk. I slutet av den här lektionen kommer vi att visa var någonstans du hittar scripts för att skicka uppgifter med, detta/dessa scripts kallas vanligen för FormMail, men även andra benämningar förekommer. <FORM> Precis som när du skall skapa en tabell, måste du börja med att ange att det är en tabell, likaså är det med formulär. Du börjar helt enkelt med att starta och avsluta formuläret genom att skriva: <FORM> </FORM> I det startande elementet skall vi också lägga till två andra attributer, först och främst den som skall anropa det script som skall skicka iväg uppgifterna som användaren kommer att fylla i. Den attributen kallas för ACTION. Den andra attributen kallas för METHOD och här anger du på vilket sätt som informationen skall skickas, du kan välja mellan antingen GET eller POST. GET använder du som värde då det handlar om lite information, som inte kräver något större arbete ifrån servern. POST använder du till mer omfattande formulär. Så här långt skall alltså ditt formulär se ut så här: <FORM ACTION="sökväg/cgiscript"> </FORM> <INPUT> Okej, då har vi skapat stommen för formuläret, nu skall vi börja lägga till saker där användarna kan fylla i saker som sedan skall bli skickade. Med hjälp av INPUT kan man skapa en rad olika saker som användaren på ett eller annat sätt kan ändra eller fylla i. Vi tar dem i ordning. RADIO Först och främst har vi de så kallade radioknapparna. Som ser ut så här: 1 2 Dessa använder du exempelvis då du vill att besökaren endast skall välja ett alternativ av flera.

8 Lektion 8 - Webbstudio Internetworld - En del av IDG.se Sida 2 av Koden för att skapa dessa radioknappar ser ut så här: <INPUT TYPE="RADIO" VALUE"1" NAME="alt">1 <INPUT TYPE="RADIO" VALUE"2" NAME="alt">2 Det vi har gjort nu är att med hjälp av attributen TYPE ange värdet RADIO, som betyder att det är en radioknapp som skall infogas. Vidare har vi gett dem två olika värden, 1 respektive 2. Detta innebär att ifall användaren markerar ruta nummer ett, så kommer det efter att användaren skickat iväg uppgifterna stå alt=1. Hade han valt ruta två hade det stått alt=2. När du skapar radioknappar måste alla knappar som är tänkta att höra ihop ha samma namn, annars kommer man att kunna kryssa i mer än en radioknapp. Om alla knappar har samma namn, kommer man endast att kunna kryssa i en. Jämför exemplet ovan, ifall du först kryssar för nummer ett och sedan nummer två, kommer markeringen att hoppa över. Med samma namn blir det alltså omöjligt att kryssa i båda. Just attributerna NAME och VALUE använder du på exakt samma sätt för alla kommande former av saker som vi kommer att presentera i fortsättningen, därför går vi inte igenom NAME och VALUE efter varje attribut i fortsättningen. CHECKBOX Den näst vanligaste är de sk checkboxarna. Dessa använder du då användaren skall kunna kryssa för mer än ett alternativ samtidigt. Dessa ser ut så här: 1 2 Observera att du kan kryssa i båda samtidigt. Koden för dessa är snarlik radioknapparna. Enda skillnaden är att vi har bytt värde för TYPE. Ex. <INPUT TYPE="CHECKBOX" VALUE="1" NAME="alt">1 <INPUT TYPE="CHECKBOX" VALUE="2" NAME="alt">2 Till radioknappar och checkboxar kan du också lägga till värdet CHECKED, vilket betyder att när formuläret laddas kommer de alternativ vara ikryssade. Nedan ser du en radioknapp som redan är ikryssad, tack vara CHECKED. <INPUT TYPE="RADIO" CHECKED> TEXT Den tredje typen är vanliga textfönster där användaren kan mata in egen text. Dessa ser ut så här: Skriv text här Koden för ovanstående ser ut så här:

9 Lektion 8 - Webbstudio Internetworld - En del av IDG.se Sida 3 av <INPUT TYPE="TEXT" VALUE="Skriv text här" NAME="1" SIZE="20"> Med TEXT för värdet i VALUE en annan innerbörd, det som du anger i VALUE kommer vara det som är förskrivet i textraden när dokumentet laddas, ifall du vill att det skall vara tomt, skriv så här: VALUE="". Till text kan man också lägga till MAXLENGTH, vilket betyder att det inte går att mata in hur mycket text som helst, utan endast ett begränsat antal tecken. Exempel: <INPUT TYPE="TEXT" VALUE="Skriv text här" NAME="1" SIZE="20" MAXLENGTH="30"> Skriv text här Prova att skriva massor av tecken i fältet. Ifall det är känsliga uppgifter som skall matas in i textfältet kan du byta ut TEXT till PASSWORD istället, så kommer tecknen som matas in att visas som stjärnor på användarens skärm. Ex. <INPUT TYPE="PASSWORD" VALUE="Löseord" NAME="1" SIZE="20" MAXLENGTH="30"> Du kan också lägga till en bläddrafunktion ifall du vill att man skall kunna skicka filer. Då byter du ut TEXT mot FILE. Ex. <INPUT TYPE="FILE" VALUE="" NAME="1" SIZE="20"> Bläddra... En del uppgifter måste också ibland följa med formuläret, fast de redan kan vara förifyllda av dig, då är det onödigt att de syns för användaren, då byter du ut TEXT till HIDDEN. Ex. Du kan också frysa vissa textfält, det vill säga de syns men användaren kan inte påverka dem. Ex. <INPUT TYPE="TEXT" VALUE="Fryst fält" DISABLED NAME="1"> Fryst fält Eller så kan du presentera information som enbart är tänkt att läsas och kopieras, inte ändras, då lägger du till READONLY. Ex. <INPUT TYPE="TEXT" VALUE="Får bara läsas" READONLY NAME="1"> Får bara läsas RESET & SUBMIT I slutet av alla formulär behöver du också två knappar. En som skickar iväg de ovan ifyllda uppgifterna och en där användaren kan ta bort sina uppgifter. Dessa två ser ut så här:

10 Lektion 8 - Webbstudio Internetworld - En del av IDG.se Sida 4 av Reset Submit Koden för dessa två ser ut så här: <INPUT TYPE="Reset" VALUE="Rensa"> <INPUT TYPE="Submit" VALUE="Skicka"> Värdet i VALUE bestämmet vad det skall stå på knappen som syns för användaren. <TEXTAREA> I föregående stycke kunde du läsa om hur du skapade textfält, dessvärre var dessa enbart avsedda för en rad. Med hjälp av TEXTAREA kan du istället ha ett helt fönster som kan innehålla flera rader text. För att ställa in storleken på både bredd och höjd använder man COLS och ROWS. Där ROWS bestämmer längden på höjden, och COLS på bredden. Ex. <p> Här är text som kommer att förskriva s när dokumente t laddas <p> Som du ser skriver du text som du vill skall synas i fältet mellan start och ändelementet. Observera att TEXTAREA måste ha en ändtagg, vilket inte de andra elementen kräver. Koden ovan ser ut så här: <TEXTAREA COLS="10" ROWS="10"> Här är text som kommer att förskrivas när dokumentet laddas </TEXTAREA> Du kan också bestämma ifall det skall ske automatiska radbrytningar eller om radbrytningar måste göras manuellt av användaren genom att hon får trycka på enter. För automatiska radbrytningar lägger du till WRAP="VIRTUAL" och för ej automatiska radbrytningar skriver du WRAP="OFF". Ex. <TEXTAREA COLS="10" WRAP="Virtual" ROWS="10"> Till TEXTAREA kan du också använda attributerna DISABLED och READONLY, på samma sätt som till TEXT. Se föregående stycke. <SELECT> SELECT används tillsammans med OPTION, som kommer i nästa stycke. SELECT och OPTION används ofta inte tillsammans med de övriga formulärelementen, dessa är mer lämpade för att skapa menyer.

11 Lektion 8 - Webbstudio Internetworld - En del av IDG.se Sida 5 av SELECT kan användas för att skapa någon av följande menyformer: För att få flera alternativ synliga samtidigt istället för att de klickas fram i en rullgardin lägger man till MULTIPLE i SELECT. Ex. <SELECT MULTIPLE> <OPTION>1 </SELECT> SIZE Ifall du väljer att alternativen skall synas kan du också bestämma hur många som skall synas innan det blir en rullningslist. Vill du exempel att tio alternativ skall synas skriver du SIZE="10" DISABLED Självklart kan du också frysa dessa menyer genom att lägga till DISABLED. <OPTION> För varje alternativ som du skall infoga i din meny måste du lägga till OPTION. Om du exempelvis har en meny med fem alternativ skriver du så här: <SELECT NAME="list" onchange="parent.location.href=this.form.list.options [this.form.list.selectedindex].value"> <OPTION VALUE="1.html">1 <OPTION VALUE="2.html">2 <OPTION VALUE="3.html">3 <OPTION VALUE="4.html">4 <OPTION VALUE="5.html">5 </SELECT> I varje OPTION har vi lagt till ett värde, värdet representerar den fil som skall laddas då man väljer alternativet. SELECT har också fått ett namn, som är nödvändigt för att det lilla JavaScriptet skall kunna identifiera menyn och öppna filen användaren väljer. Var hittar jag CGI-scripts? Först och främst bör du kolla med ditt webbhotell ifall det finns script där som är lämpade för just formulär, detta är det snabbaste och smidigaste sättet. Ifall det inte finns scripts där får du ta reda på ifall man får lägga upp egna scripts. Får man inte det så måste du länka scriptet från en annan server.

12 Lektion 7 - Webbstudio Internetworld - En del av IDG.se Sida 1 av » Lektion 7» Av: Carl-Johan Nordqvist» Publicerad: » Skriv ut artikeln Så var det dags att titta närmare på ramar. Att skapa ramar är mycket lättare än man tror. Det enda som behövs är egentligen två element, men ett par olika attributer. Innehållet i ramar skriver man i olika filer. För att skapa ramar skriver man en form av startfil för ramarna, där man anger var och hur ramarna skall se ut. Man anger också vilka filer som skall infogas i ramarna. Allt innehåll som sedan skall synas i ramarna skriver man i de filer som man valt att infoga i ramarna. Låt oss börja. <FRAMESET> Detta är det första element som skall infogas då du vill ha ramar. När man skapar ramar, gäller samma regler som för tabeller, det vill säga du måste ha lika många ramar på alla rader, eller lika många kolumner. Du kan inte ha två ramar överst och tre nertill på sidan. Vill man ha det, måste man lägga till ytterligare <FRAMESET> i de andra <FRAMESET>. Till att börja med skall vi koncentrera och på de enkla ramarna. Tänk på att <FRAMESET> måste ha en ändtagg för att det skall fungera. Börja alltså med att skriva: <FRAMESET> </FRAMESET> Mellan dessa två kommer du sedan att infoga <FRAME>, men det kommer vi till senare. COLS Som du säkert redan räknat ut, står detta för kolumner, du skall alltså här ange hur många kolumner, som sidan skall ha. Varje kolumn är alltså en ram. Storleken på ramarna anges antingen med pixlar, genom att man bara skriva ett tal, eller med procent. Det vanligaste är en blandning, exempelvis att ramen till vänster skall vara 200 pixlar bred och den andra ramen till höger skall ta upp det utrymme på skärmen som är kvar. Då skriver man antingen 100% eller bara en stjärna (*). Vi skall nu skapa ett ramsystem med två kolumner och två rader. För att infoga de två kolumnerna skriver alltså så här: <FRAMESET COLS="200,*"> </FRAMESET> Varje ramvärde åtskiljs med ett kommatecken. Om du exempelvis skulle haft fyra kolumner, hade du angett fyra olika värden med kommatecken emellan. Om man bara skall ha kolumner och inte mer än en rad i varje kolumn, räcker det med att ange endast COLS, och helt enkelt strunta i ROWS som vi kommer gå igenom i nästa stycke. ROWS Den här fungerar på precis samma sätt som COLS, enda skillnaden är att du här anger antal rader, och inte antal kolumner. Samt hur långa raderna skall vara. Det exempel som vi skall

13 Lektion 7 - Webbstudio Internetworld - En del av IDG.se Sida 2 av skapa skall, som vi sa tidigare, innehålla två kolumner och två rader. Därför kommer vi att använda ROWS också. Den översta raden skall vara 120 pixlar, och den andra skall vara 100%, därför ser vår ramkod ut så här: <FRAMESET COLS="200,*" ROWS="120,*"> </FRAMESET> Detta var de två huvudattributerna för <FRAMESET>, förutom dessa två finns det tre andra attributer som du kan styra färg och tjocklek på gränserna mellan ramarna. Här kommer dessa. BORDER Med den här bestämmer du hur tjocka gränserna skall vara mellan ramarna. Vill du att ramar skall vara osynliga skriver du alltså en nolla. I detta exempel skall våra ramar ha en gräns på tre pixlar, därför ser vår kod nu ut som följer: <FRAMESET COLS="200,*" ROWS="120,*" BORDER="3"> </FRAMESET> BORDERCOLOR Den här är endast nödvändig ifall gränserna skall synas, det vill säga de har ett värde större än noll. Då kan du bestämma färgen på gränsen. För att göra linjerna exempelvis svarta lägger du till denna attribut med värdet "black". Efter detta ser alltså vår kod ut så här: <FRAMESET COLS="200,*" ROWS="120,*" BORDER="3" BORDERCOLOR="black"> </FRAMESET> FRAMEBORDER Med denna attribut bestämmer du hur tjocka gränserna skall vara i Internet Explorer, vanliga BORDER fungerar nämligen enbart för Netscape. Den här styr alltså Internet Explorer. Den här skall alltså ha samma värde som border. Ramkoden ser nu ut så här: <FRAMESET COLS="200,*" ROWS="120,*" BORDER="3" BORDERCOLOR="black" FRAMEBORDER="3"> </FRAMESET> FRAMESPACING Internet Explorer kräver ytterligare en attribut för att tolka ramgränserna lika. Och det är framespacing. Den här attributen ger du samma attribut som de andra. Koden ser nu ut så här: <FRAMESET COLS="200,*" ROWS="120,*" BORDER="3" BORDERCOLOR="black" FRAMEBORDER="3" FRAMESPACING="3"> </FRAMESET> Om du vill ha osynliga ramar skall alltså både, frameborder, framespacing och border ha värdet

14 Lektion 7 - Webbstudio Internetworld - En del av IDG.se Sida 3 av <FRAME> Du vet nu hur du skall ställa in ramarna så att de får rätt storlek. Men varje ram kräver elementet <FRAME>, detta skall placeras mellan <FRAMESET> och </FRAMESET>. I vårt exempel ha vi i frameset infogat fyra ramar, därför kommer vi nu att lägga till fyra stycken <FRAME>. Koden ser nu ut så här: <FRAMESET COLS="200,*" ROWS="120,*" BORDER="3" BORDERCOLOR="black" FRAMEBORDER="3" FRAMESPACING="3"> <FRAME> <FRAME> <FRAME> <FRAME> </FRAMESET> Den <FRAME> som är överst representerar den ram som kommer att finnas längst upp till vänster i webläsaren. Vi skall nu titta på vilka attributer som man kan formatera varje ram enskilt med. SRC Det första vi skall lägga till är SRC, eftersom en fil måste infogas i varje ram. Det är sedan i dessa filer som du lägger till innehåller för varje ram, precis på samma sätt som i en helt vanlig HTML-fil. Vår kod ser alltså nu ut så här: <FRAMESET COLS="200,*" ROWS="120,*" BORDER="3" BORDERCOLOR="black" FRAMEBORDER="3" FRAMESPACING="3"> <FRAME SRC="ram1.html"> <FRAME SRC="ram2.html"> <FRAME SRC="ram3.html"> <FRAME SRC="ram4.html"> </FRAMESET> NAME Alla ramar som infogas måste också ha ett namn, detta namn är det viktigt att du håller reda på, annars kan du inte länka mellan dem. Det vill säga, om du har en länk i ramen till vänster som du vill skall öppna sig i ramen till höger, så måste du i länken också ange namnet på den ram där länken skall öppna sig. Alla ramarna måste ha olika namn. Därför se koden nu ut så här: <FRAMESET COLS="200,*" ROWS="120,*" BORDER="3" BORDERCOLOR="black" FRAMEBORDER="3" FRAMESPACING="3"> <FRAME SRC="ram1.html" NAME="ram1vanster"> <FRAME SRC="ram2.html" NAME="ram2hoger">

15 Lektion 7 - Webbstudio Internetworld - En del av IDG.se Sida 4 av <FRAME SRC="ram3.html" NAME="ram3vanster"> <FRAME SRC="ram4.html" NAME="ram4hoger"> </FRAMESET> Tips: Det är bra ifall du ger dina ramar logiska namn. De är lättare att komma ihåg. NORESIZE Den här ser till att användaren inte kan ändra storleken själv på ramarna. För att inte användaren skall kunna ändra storlek själv, lägger du bara till NORESIZE. Inga värden alltså, bara texten. Koden ser nu ut så här: <FRAMESET COLS="200,*" ROWS="120,*" BORDER="3" BORDERCOLOR="black" FRAMEBORDER="3" FRAMESPACING="3"> <FRAME SRC="ram1.html" NAME="ram1vanster" NORESIZE> <FRAME SRC="ram2.html" NAME="ram2hoger" NORESIZE> <FRAME SRC="ram3.html" NAME="ram3vanster" NORESIZE> <FRAME SRC="ram4.html" NAME="ram4hoger" NORESIZE> </FRAMESET> SCROLLING Det är egentligen den här attributen som brukar skilja sig ramarna emellan. Med scrolling bestämmer du ifall man skall kunna scrolla eller inte. Huvudramen, det vill säga där allt innehåll skall finnas, den skall man kunna scrolla i, samt i den ramen där menyn finns. I de andra bör scrollfunktionen vara avstängd. Alternativen som du kan välja mellan är NO/YES/AUTO. Använd aldrig YES. Bara NO eller AUTO. I ramarna där det inte skall gå att scrolla skriver du NO, i ramarna där det skall gå att scrolla skriver du AUTO, så kommer rullningslisten endast fram då den behövs. Koden ser nu ut så här. <FRAMESET COLS="20<0,*" ROWS="120,*" BORDER="3" BORDERCOLOR="black" FRAMEBORDER="3" FRAMESPACING="3"> <FRAME SRC="ram1.html" NAME="ram1vanster" NORESIZE SCROLLING="NO"> <FRAME SRC="ram2.html" NAME="ram2hoger" NORESIZE SCROLLING="NO"> <FRAME SRC="ram3.html" NAME="ram3vanster" NORESIZE SCROLLING="AUTO"> <FRAME SRC="ram4.html" NAME="ram4hoger" NORESIZE SCROLLING="AUTO"> </FRAMESET> MARGINWIDHT OCH MARGINHEIGHT Precis som med tabeller kan du bestämma hur mycket reserverat utrymme som det skall finnas i mellan innehållet i ramarna och gränsera. Det vill säga marginaler. I vårt exempel väljer vi en marginal på 4 pixlar på både höjden och på bredden. Därför kommer nu vår kod att se ut som följer: <FRAMESET COLS="200,*" ROWS="120,*" BORDER="3" BORDERCOLOR="black" FRAMEBORDER="3" FRAMESPACING="3">

16 Lektion 7 - Webbstudio Internetworld - En del av IDG.se Sida 5 av <FRAME SRC="ram1.html" NAME="ram1vanster" NORESIZE SCROLLING="NO" MARGINWIDTH="4" MARGINHEIGHT="4"> <FRAME SRC="ram2.html" NAME="ram2hoger" NORESIZE SCROLLING="NO" MARGINWIDTH="4" MARGINHEIGHT="4"> <FRAME SRC="ram3.html" NAME="ram3vanster" NORESIZE SCROLLING="AUTO" MARGINWIDTH="4" MARGINHEIGHT="4"> <FRAME SRC="ram4.html" NAME="ram4hoger" NORESIZE SCROLLING="AUTO" MARGINWIDTH="4" MARGINHEIGHT="4"> </FRAMESET> FRAMEBORDER, FRAMESPACING & BORDERCOLOR Dessa tre styr gränserna mellan ramarna, dessa fungerar på exakt samma sätt som då du placerar dem i <FRAMESET>. Den endas skillnaden är att här kan du styra gränserna för varje enskild ram. Då du anger dem i <FRAMESET> anger du samma värden för alla ramar. Vill du ha särskilda gränser för en särskild ram lägger du alltså till dessa tre i varje <FRAME> istället för i <FRAMESET>. Vill du däremot ha osynliga ramar bör desas tre finnas med i både FRAMESET och FRAME. Alla skall då ha värdena noll (0). Vår startfil för våra ramar ser alltså nu ut så här: <HTML> <HEAD><TITLE>Startfil</TITLE></HEAD> <FRAMESET COLS="200,*" ROWS="120,*" BORDER="3" BORDERCOLOR="black" FRAMEBORDER="3" FRAMESPACING="3"> <FRAME SRC="ram1.html" NAME="ram1vanster" NORESIZE SCROLLING="NO" MARGINWIDTH="4" MARGINHEIGHT="4"> <FRAME SRC="ram2.html" NAME="ram2hoger" NORESIZE SCROLLING="NO" MARGINWIDTH="4" MARGINHEIGHT="4"> <FRAME SRC="ram3.html" NAME="ram3vanster" NORESIZE SCROLLING="AUTO" MARGINWIDTH="4" MARGINHEIGHT="4"> <FRAME SRC="ram4.html" NAME="ram4hoger" NORESIZE SCROLLING="AUTO" MARGINWIDTH="4" MARGINHEIGHT="4"> </FRAMESET> </HTML> Observera att <BODY> inte får förekomma i startfilen. Tänk på att ramar ibland kan verka knepigt ifall man är ovan, men kom ihåg att övning ger färdighet. Därför gäller det att experimentera mycket. Om du vill studera hur olika ramuppsättningar ser ut kan du begå dig till vår mallavdelning, där finns det 25 färdigskrivna ramar, ladda hem dem och studera koden ifall du känner dig osäker. Och ifall du inte lyckas lösa dina kodproblem är det bara att höra av sig.