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

Storlek: px
Starta visningen från sidan:

Download "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.

Internet A. HTML Grunder. 02-01-14 Maximilien Chiang 1

Internet A. HTML Grunder. 02-01-14 Maximilien Chiang 1 Internet A HTML Grunder 1 HTML Tags (Speciella markeringar) < Instruktion> De flesta instruktioner avslutas också med en 2 untitled Min

Läs mer

Carl-Oscar Hermansson WEBB DESIGN

Carl-Oscar Hermansson WEBB DESIGN Carl-Oscar Hermansson WEBB DESIGN Del SKAPA DIN WEBBPLATS MED HTML. Öppna ett HTML-dokument... 8 6. HTML grundkod... 9 7. Färger... 0 8. Textformatering... 9. Listor... 0 0. Bilder.... Bakgrundsbilder...

Läs mer

Inför prov 1 i webbdesign

Inför prov 1 i webbdesign Inför prov 1 i webbdesign Skapa ett grundläggande HTML-dokument sidtitel övriga instruktioner Grundläggande märken, samt hur de används startmärke

Läs mer

F r a m e s - r a m a r

F r a m e s - r a m a r skriv ut» F r a m e s - r a m a r Exempel på framesets» Ramkanter (borders)» Färg på ramkanter» Bläddringslister (scrolling)» Marginaler» Länkning i ramar» Uppdatera flera ramar samtidigt» IFRAME - inbäddad

Läs mer

Tabeller. Lektion 7. en tabellrubrikcell som centrerad och i fetstil.

Tabeller. Lektion 7. en tabellrubrikcell som centrerad och i fetstil. Lektion 7 Tabeller Under denna lektion kommer du att få lära dig hur man bygger upp tabeller med HTML och hur man styr layout och utseende på en webbsida som innehåller tabeller. Enkla tabeller Av tradition

Läs mer

FrontPage Express. Ämne: Datorkunskap (Internet) Handledare: Thomas Granhäll

FrontPage Express. Ämne: Datorkunskap (Internet) Handledare: Thomas Granhäll FrontPage Express I programpaketet Internet Explorer 4.0 och 5.0 ingår också FrontPage Express som installeras vid en fullständig installation. Det är ett program som man kan använda för att skapa egna

Läs mer

Kom igång. Readyonet Lathund för enkelt admin. Logga in Skriv in adressen till din webbsida följt av /login. Exempel: www.minsajt.

Kom igång. Readyonet Lathund för enkelt admin. Logga in Skriv in adressen till din webbsida följt av /login. Exempel: www.minsajt. Kom igång Logga in Skriv in adressen till din webbsida följt av /login. Exempel: www.minsajt.se/login Nu dyker en ruta upp på skärmen. Fyll i ditt användarnamn och lösenord och klicka på "logga in". Nu

Läs mer

6. Nu skall vi ställa in vad som skall hända när man klickar på knappen samt att markören skall ändra sig till en hand när markören är på knappen.

6. Nu skall vi ställa in vad som skall hända när man klickar på knappen samt att markören skall ändra sig till en hand när markören är på knappen. Fiskar Arbetsbeskrivning knappmeny (Mediator 8) I detta exempel kommer du att lära dig Att göra en mastersida med knappar Att använda en mastersida på andra sidor Att använd funktionen Alignment Arbetsgång

Läs mer

Lektion 2 - CSS. CSS - Fortsätt så här

Lektion 2 - CSS. CSS - Fortsätt så här Lektion 2 - CSS I den här lektionen behandlas HTML och CSS. Det förutsätts att lektion 1 är gjord, eller att du har tillräckliga kunskaper i grundläggande HTML för att klara den här lektionen. CSS - Fortsätt

Läs mer

3. Hämta och infoga bilder

3. Hämta och infoga bilder Sida 1 av 8 Lektion 1: sida 4 av 4 «Sida 3 av 4 Till kursens framsida 3. Hämta och infoga bilder Nu vet vi ju hur man sätter in text i sin sida. Men hur gör man med bilder? Det är inte svårt alls! Det

Läs mer

Webbdesign vt. 2010. Innehållsförteckning

Webbdesign vt. 2010. Innehållsförteckning Webbdesign vt. 2010 mångar: Kl. 8:30 12:00 Innehållsförteckning 2. FTP-hur gör man? 3. Grundtaggar 5. Tabeller 6. Infoga bilder 7. Rubriker och fonter 8. Övning 1 9. Installera HTML-edit 11. Startsidans

Läs mer

Laboration med Internet och HTML

Laboration med Internet och HTML Laboration med Internet och HTML Denna laboration går ut på att du skall kunna skapa enkla hemsidor i HTML. Vi kommer inte att ta upp edstorer för hemsidor som t.ex. DreamWeaver eller FrontPage. Dessa

Läs mer

F06 A table form Dagens agenda

F06 A table form Dagens agenda F06 A table form Dagens agenda Länkar Tabeller Formulär Hyperlänkar index.html feed/news.html klickbar text hippo.png about.html Relativ länk till webbsida via klickbar länk: klickbar

Läs mer

Labora&on 8 Formulär övningar/uppgi6er

Labora&on 8 Formulär övningar/uppgi6er Labora&on 8 Formulär övningar/uppgi6er 1M321 Webbteknik 1, 7,5hp Medieteknik 2015 Rune Körnefors rune.kornefors@lnu.se 1a. Ladda ner arbetsdokument Till övningarna i denna labora&on finns det en par dokument

Läs mer

I den tidigare filen Manual Editor belystes grunderna för enkel uppdatering samt editorns utformning.

I den tidigare filen Manual Editor belystes grunderna för enkel uppdatering samt editorns utformning. Sida 1 av 23 Editor, Avancerad I den tidigare filen Manual Editor belystes grunderna för enkel uppdatering samt editorns utformning. Detta dokument syftar till att hjälpa dig som vill jobba mer aktivt

Läs mer

12 Webb och kurshemsidor

12 Webb och kurshemsidor 12 Webb och kurshemsidor Många lärare använder sig av kurswebbsidor eller egna personliga webbsidor som ett ställe att samla information och dokumentation kring sitt arbete. Om du ska skapa en webbsida,

Läs mer

Manual för visionutv.net Redigera

Manual för visionutv.net Redigera Manual för visionutv.net Redigera Version 2.0 Visionutveckling 2004 Innehåll: 1 Om Redigera 3 1.1 Bakgrund 3 1.2 Hur Redigera är uppbyggt 3 1.3 Vad är? 4 2 Inloggning 6 3 Nyheter i Redigera 2.0 7 3.1 Funktionsknappar

Läs mer

Vilken version av Dreamweaver använder du?

Vilken version av Dreamweaver använder du? Sida 1 av 7 Lektion 1: sida 1 av 4 Till kursens framsida Sida 2 av 4» Lektion 1 Då ska vi sätta igång med den här kursens första lektion! Här kommer du att få lära dig hur man skapar och förbereder webbplatser

Läs mer

Gran Canaria - Arbetsbeskrivning knapplänkar (Mediator 8)

Gran Canaria - Arbetsbeskrivning knapplänkar (Mediator 8) Gran Canaria - Arbetsbeskrivning knapplänkar (Mediator 8) I detta exempel kommer du att lära dig Att skapa en ny presentation från början Att skapa en enkel knapp Att använda händelseinställningar, events

Läs mer

ORDLISTA WEBBDESIGN 100P

ORDLISTA WEBBDESIGN 100P ORDLISTA WEBBDESIGN 100P HTML- TAGGAR M.M. (DE BLÅFÄRGADE ORDEN ÄR OLIKA ATTRIBUT SOM HÖR TILL DE OLIKA TAGGARNA.) HTML Står för Hyper Text Markup Language och är en uppsättning markeringskoder.

Läs mer

Sophia Prosell DREAM WEAVER SKAPA OCH PUBLICERA EFFEKTIVA WEBBSIDOR

Sophia Prosell DREAM WEAVER SKAPA OCH PUBLICERA EFFEKTIVA WEBBSIDOR Sophia Prosell DREAM WEAVER SKAPA OCH PUBLICERA EFFEKTIVA WEBBSIDOR Del 4 BILDER OCH TABELLER 0. Arbeta med bilder... 9. Redigera bilder... 96. Klickbara bilder/imagemaps... 0. Tabeller... 04 4. Skapa

Läs mer

Integrerad i egen cup-portal Sid 1

Integrerad i egen cup-portal Sid 1 Integrerad i egen cup-portal Sid 1 Skillnader mellan fristående och integrerad cup-portal En liten viktig synpunkt innan ni går vidare: Det går snabbt och enkelt att växla mellan den fristående och integrerade

Läs mer

Manual för webbpublicering. Enköpings kommun

Manual för webbpublicering. Enköpings kommun Manual för webbpublicering Enköpings kommun Innehåll ATT LOGGA IN I SWWWING 3 Inloggningsrutan 3 GRÄNSSNITTET 4 Filhanteraren 4 Content Management 4 Verktyget Notify - Dags att uppdatera 4 SKAPA OCH REDIGERA

Läs mer

Webbdesign vt. 2009. Innehållsförteckning

Webbdesign vt. 2009. Innehållsförteckning Webbdesign vt. 2009 Fysiska träffar onsdagkvällar: Kl. 18:00 21:00 28/1 11/2 11/3 25/3 1/4 22/4 6/5 Innehållsförteckning 2. FTP-hur gör man? 3. Vad ska jag göra? 4. Grundtaggar 6. Tabeller 7. Infoga bilder

Läs mer

1. Uppdateringsmodul (CMS)

1. Uppdateringsmodul (CMS) Innehåll 1. Uppdateringsmodul (CMS)... 2 2. Artiklar... 3 2.1 Upprätta din första artikel... 4 2.2 Skapa innehåll i artikeln... 5 2.2.1 RUBRIK I ARTIKELN:... 5 2.2.3 INFOGA BILDER:... 7 2.2.4 CELLER...

Läs mer

Guide till att använda Audacity för uttalsövningar

Guide till att använda Audacity för uttalsövningar Guide till att använda Audacity för uttalsövningar Victoria Johansson Humlabbet, SOL-center, Lund IT-pedagog@sol.lu.se 28 mars 2006 1 Inledning Audacity är ett program som kan användas för att spela in

Läs mer

SORSELE KOMMUN. Handbok OEW. 28 sept 2012 Mari-Anne Englund Barbro Olofsson. Sorsele kommun Version 2012-09-28, rev 131101 1 (19)

SORSELE KOMMUN. Handbok OEW. 28 sept 2012 Mari-Anne Englund Barbro Olofsson. Sorsele kommun Version 2012-09-28, rev 131101 1 (19) Handbok i OEW 28 sept 2012 Mari-Anne Englund Barbro Olofsson Sorsele kommun Version 2012-09-28, rev 131101 1 (19) Använd det användarnamn och lösenord som du fått. Fungerar det inte hör av dig till Mari-Anne

Läs mer

E-post. A. Windows Mail. Öppna alternativ. Placera ikonen på skrivbordet.

E-post. A. Windows Mail. Öppna alternativ. Placera ikonen på skrivbordet. E-post A. Windows Mail Öppna alternativ Klicka på startknappen Startmenyn öppnas Klicka på Alla Program Leta reda på Windows Mail Dubbelklicka Windows Mail öppnas. Om ikonen ligger i Start-menyn Klicka

Läs mer

HTML. Laborationskompendium i konstruktion av webbsidor. Detta exemplar tillhör: VT 2005. Mitthögskolan ITM Telefon 063-16 53 00

HTML. Laborationskompendium i konstruktion av webbsidor. Detta exemplar tillhör: VT 2005. Mitthögskolan ITM Telefon 063-16 53 00 Mitthögskolan ITM Telefon 063-16 53 00 HTML Laborationskompendium i konstruktion av webbsidor Detta exemplar tillhör: VT 2005 Mittuniversitetet, ITM Telefon 063-16 53 00 Laborationskompendium för konstruktion

Läs mer

http://office.microsoft.com/sv-se/word/ha100444731053.aspx

http://office.microsoft.com/sv-se/word/ha100444731053.aspx 1. Öppna Word 2007 i 97-2003 2. Vilken Explorer har jag 3. Inloggning med Explorer 8 4. Sökväg till sidan 5. Ha två fönster öppna 6. Stilar 7. Storleksändra 8. Inklistring av text 9. Bilder till startsidan

Läs mer

Manual för. 2.4 KALAS Sitemanager

Manual för. 2.4 KALAS Sitemanager Manual för 2.4 KALAS Sitemanager 1. Introduktion Den här manualen skall hjälpa dig att komma igång så att du själv på ett enkelt sätt kan lägga till, redigera eller ta bort webbsidor på din webbplats.

Läs mer

Lathund Hemsida för Astma- och Allergiförbundets föreningar

Lathund Hemsida för Astma- och Allergiförbundets föreningar 1/17 Lathund Hemsida för Astma- och Allergiförbundets föreningar Webbplatsen är byggd i WordPress 3.8.1. Den är byggd för att på ett enkelt sätt ska kunna skapa nya föreningshemsidor och innehåller: Inloggning

Läs mer

Pensionärsföreningens webbplats GUIDE FÖR NYA WEBBANSVARIGA

Pensionärsföreningens webbplats GUIDE FÖR NYA WEBBANSVARIGA Pensionärsföreningens webbplats GUIDE FÖR NYA WEBBANSVARIGA 1- Adress till webbplatsen Alla föreningar har tillgång till en webbplats (webbsajt) gratis via förbundet Webbplatsen är en undersida till www.spfpension.fi,

Läs mer

Programmets startmeny ser ut så här. För att få fram menyerna Avsluta, Inställningar och Användare måste du föra markören upp till det blåa fältet.

Programmets startmeny ser ut så här. För att få fram menyerna Avsluta, Inställningar och Användare måste du föra markören upp till det blåa fältet. Programmets startmeny ser ut så här. För att få fram menyerna Avsluta, Inställningar och Användare måste du föra markören upp till det blåa fältet. Då du klickar på Användare öppnas denna bläddringslista.

Läs mer

Manual till publiceringsverktyg

Manual till publiceringsverktyg Manual till publiceringsverktyg Allmänt När man har loggat in hamnar man direkt på översikten över hela webbplatsen. Överst hittar man en meny som alltid ligger med i verktyget. Denna meny innehåller översikten

Läs mer

Manual för din hemsida

Manual för din hemsida Manual för din hemsida Dynamiska hemsidor är en lösning för att man på ett enkelt sätt skall kunna lägga till, ändra och ta bort sidor på sin hemsida. För att detta skall vara möjligt bygger lösningen

Läs mer

Manual för lokalredaktörer villaagarna.se

Manual för lokalredaktörer villaagarna.se Manual för lokalredaktörer villaagarna.se Version 2 Villaägarnas Riksförbund Sollentuna 2011 Innehåll Redigera befintlig sida... 3 Skriva text eller klistra in kopierad text... 5 Rubriker i brödtext...

Läs mer

Användarmanual för. 1(1)

Användarmanual för. 1(1) Användarmanual för sofie.landelius@bypasset.se 1(1) 2005-06-13 Innehållsförteckning 1. Logga in... 3 Problem... 3 Content... 4 Account... 4 Help... 4 2. Att skriva en artikel... 5 Publicera artikel alt

Läs mer

Använda Internet. med hjälp av Internet Explorer. Nybörjarguide

Använda Internet. med hjälp av Internet Explorer. Nybörjarguide Använda Internet med hjälp av Internet Explorer Nybörjarguide Av Carl Ewnert 1 Innehåll: 1. Introduktion 3 2. Utseendet 4 3. Verktygsfältet 4 4. Börja Surfa. 5 5. Att söka på Internet 5 6. Spara en sida

Läs mer

Instruktioner. Innehåll: 1. Vad är Kimsoft Control (SIDA 2) 3. Hem (SIDA 2)

Instruktioner. Innehåll: 1. Vad är Kimsoft Control (SIDA 2) 3. Hem (SIDA 2) 1 Instruktioner Innehåll: 1. Vad är Kimsoft Control (SIDA 2) 2. Logga in (SIDA 2) 3. Hem (SIDA 2) 4. Skapa/redigera sidor (SIDA 3) 41. Lägg till ny sida (SIDA 3) 42. Avancerat (SIDA 4) 5. Texteditor (SIDA

Läs mer

Dreamweaverskolan, Jump Meny - Formulär - Forms

Dreamweaverskolan, Jump Meny - Formulär - Forms skriv ut» E x e m p e l : Testa gärna att använda de olika formulärkontrollerna nedan. (Infomationen skickas inte någonstans när du använder "Skicka-knappen") Jag heter: och bor i: Jag är en: (välj ålder)

Läs mer

WEBDESIGN A - DTR 1210

WEBDESIGN A - DTR 1210 Lektion 9: Tips tricks och diverse Bakgrundsbilder Bakgrundsfärg och textfärg är några sätt att ge sin hemsida ett visst utseende. Ett annat sätt är att använda bakgrundsbilder. Man behöver en bild: HTML-koden

Läs mer

Övning (X)HTML 2. Sidan 1 av 7 2010-11-11

Övning (X)HTML 2. Sidan 1 av 7 2010-11-11 Sidan 1 av 7 2010-11-11 Övning (X)HTML 2 Innan du börjar med laborationen ska du se till så att du har öppnat din editor (till exempel Notepad++). I denna editor ska du skriva (X)HTML-kod som du sedan

Läs mer

Workshop PIM 2 - PowerPoint

Workshop PIM 2 - PowerPoint Workshop PIM 2 - PowerPoint Varje ny sida i bildspelet kallas för en Bild. Foton och andra bilder som man lägger in kallas för Bildobjekt. All text skrivs i Textrutor. Växlingen från en bild till nästa

Läs mer

Verktyget är begränsat till Microsoft Internet Explorer v 7.0 och uppåt

Verktyget är begränsat till Microsoft Internet Explorer v 7.0 och uppåt Verktyget är begränsat till Microsoft Internet Explorer v 7.0 och uppåt 1. Inställningar / Kontaktuppgifter Uppgifter som matas in i den vyn ovan visas i sidfoten på hemsidan: 2. Skapa nya sidor Om man

Läs mer

2009-08-20. Manual för Typo3 version 4.2

2009-08-20. Manual för Typo3 version 4.2 2009-08-20 Manual för Typo3 version 4.2 1 2 Innehåll: 1. Allmänt 4 2. Grunderna i Typo3 5 2.1 Knappar 5 2.2 Inloggning 5 2.3 Den inledande vyn 6 2.4 Sidträdet 7 3. Sidor 8 3.1 Skapa en ny sida 8 3.1.1

Läs mer

Personalsupport. Medicinska fakulteten, Lunds universitet. Textredigeraren. Moodle version 2.7.1

Personalsupport. Medicinska fakulteten, Lunds universitet. Textredigeraren. Moodle version 2.7.1 Personalsupport Medicinska fakulteten, Lunds universitet Textredigeraren Moodle version 2.7.1 Lars Rundgren, 2012-2014 Moodle 2.7.1 Textredigeraren Textredigeraren... 3 Nya ikoner i textredigeraren...

Läs mer

batklubben.eu s hemsida

batklubben.eu s hemsida batklubben.eu s hemsida redigera din sida av webbplatsen 1. Skriv in http://www.din_doman.se/admin i browserns adressfält. 2. Skriv in ditt användarnamn och lösenord i inloggningsrutan, och tryck OK. 3.

Läs mer

Skapa innehåll. Logga in och administrera hemsidan. Inloggningslänk: www.alvsbyn.se/wp-admin. Byta lösenord

Skapa innehåll. Logga in och administrera hemsidan. Inloggningslänk: www.alvsbyn.se/wp-admin. Byta lösenord Sidan 1 av 9 Logga in och administrera hemsidan Inloggningslänk: www.alvsbyn.se/wp-admin Byta lösenord 2. Klicka på Profil 3. Längst nere hittar du två fält: Nytt lösenord och Bekräfta nytt lösenord. Fyll

Läs mer

Se till att posten är i Ändringsläge. Gå till rullgardinsmenyn under Föremål och välj Lägg in bild.

Se till att posten är i Ändringsläge. Gå till rullgardinsmenyn under Föremål och välj Lägg in bild. Bilder (11) Det går att lägga en eller flera bilder till varje föremålspost. Det enklaste är att lägga in en bild, från den registrerade föremålsposten. Det går också att lägga in ett större antal bilder

Läs mer

www.faltbiologerna.se

www.faltbiologerna.se Redigering av www.faltbiologerna.se sammanställt av Magnus Bjelkefelt, november 2011 reviderad oktober 2012 Innehållsförteckning 1. Logga in................................................... 2 1.1 Var

Läs mer

Skriv http:// före adressen och lämna bort www enligt modellen: http://foreningensnamn.hemochskola.fi/admin

Skriv http:// före adressen och lämna bort www enligt modellen: http://foreningensnamn.hemochskola.fi/admin INTRODUKTION Välkommen att ta i bruk uppdateringsverktyget DigiStoff. För att använda verktyget behöver du en Internetuppkoppling och en webbläsare. Det rekommenderas att du använder webbläsaren Firefox.

Läs mer

Manual. Anpassad för CMS Made Simple version 1.9.x (uppdaterad 2011-10-16) Birger Eriksson webblots.se

Manual. Anpassad för CMS Made Simple version 1.9.x (uppdaterad 2011-10-16) Birger Eriksson webblots.se Manual Anpassad för CMS Made Simple version 1.9.x (uppdaterad 2011-10-16) Birger Eriksson webblots.se Innehållsförteckning Start... 3 Lägg till ny sida...3 Redigera sida som redan finns...3 Titta på resultatet...

Läs mer

Miljön i Windows Vista

Miljön i Windows Vista 1 Miljön i Windows Vista Windows Aero Windows Aero (Aero Glass), som det nya utseendet eller gränssnittet heter i Vista, påminner mycket om glas och har en snygg genomskinlig design. Det är enklare att

Läs mer

ANVÄNDARBESKRIVNING FÖR PERSONAL

ANVÄNDARBESKRIVNING FÖR PERSONAL ANVÄNDARBESKRIVNING FÖR PERSONAL 1 INLEDNING Programmet ipool är ett system för att på ett effektivt sätt sköta bemanning och personalinformation via ett webbaserat gränssnitt som är enkelt att använda

Läs mer

Sidan kommer inte läggas upp någonstans utan du redovisar den för mig på något handledningstillfälle.

Sidan kommer inte läggas upp någonstans utan du redovisar den för mig på något handledningstillfälle. Lab1 - CV-sidan Du ska bygga en variant av en CV-sida i HTML och CSS. Sidan ska åtminstone innehålla en bild på dig, en klassisk tabell med utbildningar/erfarenheter, ditt favoritcitat, en eller flera

Läs mer

www.grade.com LUVIT LMS Quick Guide LUVIT Composer

www.grade.com LUVIT LMS Quick Guide LUVIT Composer www.grade.com LUVIT LMS Quick Guide LUVIT Composer LUVIT Composer LUVIT Composer är ett verktyg för att enkelt skapa snyggt innehåll direkt i LUVITs kurser. Verktyget innehåller designade mallar som du

Läs mer

Manual för lokalredaktörer villaagarna.se

Manual för lokalredaktörer villaagarna.se Manual för lokalredaktörer villaagarna.se Version 1 Villaägarnas Riksförbund Sollentuna 2011 Postadress Besöksdress Telefon Fax E-post Hemsida Box 7118, 192 07 Sollentuna Johan Berndes väg 8-10 010-750

Läs mer

3. Skapa sida 5. Hitta innehåll 6. Meny 7. Användare

3. Skapa sida 5. Hitta innehåll 6. Meny 7. Användare 3. Skapa sida 5. Hitta innehåll 6. Meny 7. Användare 2 Så här skapar du en ny sida. Mycket av informationen nedan kan tillämpas på skapandet av andra typer av innehåll, till exempel nyheter, blogginlägg,

Läs mer

WEBDESIGN A - DTR 1210

WEBDESIGN A - DTR 1210 Lektion 6: Tabeller Vi ska lägga till en tabell i hemsidan. Först ska vi titta lite på hur man gör tabeller. Vi börjar med enklast tänkbara tabell. En tabell med bara en ruta: Nu ska vi gå igenom steg

Läs mer

Ellibot 1.0. Interaktivmedia Content Management System. Publicera för webben

Ellibot 1.0. Interaktivmedia Content Management System. Publicera för webben Ellibot 1.0 Interaktivmedia Content Management System Publicera för webben Innehåll Logga in 3 Skapa en ny webbsida 4 o Publicering 5 o Information 5 o Standardfiler 6 o Innehåll 7 Hur man skapar en länk

Läs mer

Manual för. 2.5 KALAS Sitemanager

Manual för. 2.5 KALAS Sitemanager Manual för 2.5 KALAS Sitemanager 1. INTRODUKTION...1 1.1 SYSTEMKRAV...1 1.1.1 Visning av sidor...1 1.1.2 Produktion av sidor...1 1.1.3 Inloggning...1 2. KALAS SITEMANAGER...3 2.1 LÄGGA TILL EN WEBBSIDA...4

Läs mer

APA för nybörjare. Innan du börjar. Översikt

APA för nybörjare. Innan du börjar. Översikt APA för nybörjare Den här texten är tänkt som en snabb introduktion hur du kan använda publiceringssystemet APA (Advanced Publication Application) för att redigera webbplatser. Texten kräver inga förkunskaper

Läs mer

Till flera av ovanstående finns det dessutom varianter, vilka kommer att presenteras i de olika avsnitten.

Till flera av ovanstående finns det dessutom varianter, vilka kommer att presenteras i de olika avsnitten. LINGUS32 Handledning Anne Börjesson Introduktion Lingus32 är ett program som främst är avsett att användas för att göra multimedia-baserade språkövningar. Programmet är skrivet för PC. Det finns möjlighet

Läs mer

Välj bort om du vill. 96 Internet och e-post. 2. Mail-programmet finns i datorn. 1. Skriv mail i sökrutan. Windows Live Mail i Aktivitetsfältet.

Välj bort om du vill. 96 Internet och e-post. 2. Mail-programmet finns i datorn. 1. Skriv mail i sökrutan. Windows Live Mail i Aktivitetsfältet. Välj bort om du vill Om du är nöjd med att ha din e-post på nätet, kan du lugnt hoppa över detta avsnitt. Har du tid och tycker att det är roligt, kan du testa att använda e-postprogrammet Windows Live

Läs mer

- - - W e b d e s i g n s k o l a n - - - B i l d e r

- - - W e b d e s i g n s k o l a n - - - B i l d e r skriv ut» B i l d e r Att använda bilder kan vara ett sätt att lyfta fram ett skrivet budskap eller helt enkelt för att göra webplatsen mer attraktiv och lättnavigerad. Bilder skapar du själv i ett bildbehandlingsprogram

Läs mer

WebViewer Manual för administratör. 2013 Nova Software AB

WebViewer Manual för administratör. 2013 Nova Software AB WebViewer Manual för administratör 2 Manual WebViewer Innehållsförteckning Innehållsförteckning... 2 1 Introduktion... 3 2 Inställningar... 4 2.1 Uppdatera licensinformation... 4 2.2 Inmatning av användaruppgifter...

Läs mer

Skapa mappar, spara och hämta dokument

Skapa mappar, spara och hämta dokument Skapa mappar, spara och hämta dokument Övningen görs på hårddisken i mappen Mina dokument 1a Starta programmet utforskaren 1 b Huvudgrupper i utforskaren 1c Expandera huvudgrupper, enheter och mappar Skapa

Läs mer

Manual till APA. En instruktionsmanual för användare av APA Advanced Publication Application

Manual till APA. En instruktionsmanual för användare av APA Advanced Publication Application Manual till APA En instruktionsmanual för användare av APA Advanced Publication Application Versionshistoria 2005-10-13 början Anders Nilsson 2007-05-12 slutversion Adam Boman Vid frågor om APA eller denna

Läs mer

PixlrGuiden - av AlizonWeb PIXLRGUIDEN. av AlizonWeb. Copyright Notice: Copyright AlizonWeb, All rights reserved. Sida 1

PixlrGuiden - av AlizonWeb PIXLRGUIDEN. av AlizonWeb. Copyright Notice: Copyright AlizonWeb, All rights reserved. Sida 1 PIXLRGUIDEN av AlizonWeb Copyright Notice: Copyright AlizonWeb, All rights reserved. Sida 1 Innehåll Introduktion 3 Vad är Pixlr? 3 Fördelar med Pixlr 3 Om denna guide 3 Kapitel 1: Genomgång av arbetsyta

Läs mer

Word-guide Introduktion

Word-guide Introduktion Word-guide Introduktion På det kognitionsvetenskapliga programmet kommer du läsa kurser inom flera olika vetenskapsområden och för varje vetenskapsområde finns ett speciellt sätt att utforma rapporter.

Läs mer

En stiligare portal Laboration 3

En stiligare portal Laboration 3 Laborationsanvisning En stiligare portal Laboration 3 Författare: Johan Leitet Version: 1 Datum: 2011-09-09 Inledning Vi har hittills koncentrerat oss på att strukturera upp vår information på ett så semantiskt

Läs mer

Kom igång och redigera din hemsida!

Kom igång och redigera din hemsida! Kom igång och redigera din hemsida Smelink WEB l Storgatan 14 l 352 31 Växjö l support@smelink.se l www.smelink.se Senast uppdaterad: 100915 Del 1 Logga in Välkommen att ta del av vårt uppdateringsverktyg,

Läs mer

Laboration 2. Webbproduktion En stiligare webbsida HT2015

Laboration 2. Webbproduktion En stiligare webbsida HT2015 Laboration 2 Webbproduktion Inledning Vi har hittills koncentrerat oss på att strukturera upp vår information på ett så semantiskt sätt som möjligt. Nu är det dags att ge ögat något vackert att vila på.

Läs mer

MANUAL FÖR JÄGAREFÖRBUNDETS KRETSAR

MANUAL FÖR JÄGAREFÖRBUNDETS KRETSAR MANUAL FÖR JÄGAREFÖRBUNDETS KRETSAR I följande dokument hittar ni information om hur ni administrerar er nya hemsida. Manualen går endast igenom grundläggande administration. För mer avancerad redigering

Läs mer

Att skapa en bakgrundsbild och använda den i HIPP

Att skapa en bakgrundsbild och använda den i HIPP Att skapa en bakgrundsbild och använda den i HIPP Bakgrundsbilder i HIPP kan användas till olika saker, t ex som ett rutnät för en tabell eller en grundkarta. Här visas hur man gör en grundkarta som en

Läs mer

DynaPahlm är användbart på många olika typer av webbplatser. Denna handbok ger dig tips och vägledning till hur du bäst använder DynaPahlm

DynaPahlm är användbart på många olika typer av webbplatser. Denna handbok ger dig tips och vägledning till hur du bäst använder DynaPahlm Användarhandbok (testsite http://www.pahlm.com/dynapahlm/ Förord DynaPahlm är levererat tillsammans med din webbplats från KM-Företagsutveckling. DynaPahlm är ett Content Management System (CMS), fritt

Läs mer

Bilder. Bilder och bildformat

Bilder. Bilder och bildformat och bildformat Det första du måste göra är att skaffa bilder att lägga in i ett HTMLdokument. Ta en bild med din mobil/ webbkamera eller rita bilden själv.du kan ta gratisbilder från Google, gå in på bilder

Läs mer

En grundkurs i hemsidor och hur de är uppbyggda

En grundkurs i hemsidor och hur de är uppbyggda En grundkurs i hemsidor och hur de är uppbyggda Den här artikeln tänkte väldigt grundligt gå igenom koncepten kring en hemsida och hur den är uppbyggt, för att ge dig grundkunskap att bygga vidare på och

Läs mer

Lägga till artiklar i Joomla

Lägga till artiklar i Joomla Lägga till artiklar i Joomla från framsidan Logga först in så att du är inloggad. Klicka sedan på Lägg till ny artikel i menyn under hem. Skriv in en rubrik på rubrikraden ej för lång! Skriv sedan artikeln

Läs mer

IMS-manual för Netpub

IMS-manual för Netpub IMS-manual för Netpub * IMS = image management system = på klar och (nästan) redig svenska bildhanteringssystem för Svenska Yles webbpubliceringsverktyg Netpub Innehåll: Sidan: 1. För vem är manualen?

Läs mer

ALEPH ver. 16 Introduktion

ALEPH ver. 16 Introduktion Fujitsu, Westmansgatan 47, 582 16 Linköping INNEHÅLLSFÖRTECKNING 1. SKRIVBORDET... 1 2. FLYTTA RUNT M.M.... 2 3. LOGGA IN... 3 4. VAL AV DATABAS... 4 5. STORLEK PÅ RUTORNA... 5 6. NAVIGATIONSRUTA NAVIGATIONSTRÄD...

Läs mer

«Sida 2 av 4 Till kursens framsida Sida 4 av 4»

«Sida 2 av 4 Till kursens framsida Sida 4 av 4» Sida 1 av 11 Lektion 1: sida 3 av 4 «Sida 2 av 4 Till kursens framsida Sida 4 av 4» 2. Formatera text Du kan ju redan skriva in text, men nu ska vi se hur man formaterar det man skrivit in -- alltså hur

Läs mer

Grundläggande funktioner i CMS ifrån Argonova Systems, 2011.

Grundläggande funktioner i CMS ifrån Argonova Systems, 2011. Grundläggande funktioner i CMS ifrån Argonova Systems, 2011. Syfte Detta dokument tar upp grundläggande funktioner i Argonova Systems CMS i syfte att förbereda och stödja användaren, vid sidan av och inför

Läs mer

Flexiboard. Lathund kring hur du kommer igång med att skapa egna överlägg till Flexiboard. Habilitering & Hjälpmedel

Flexiboard. Lathund kring hur du kommer igång med att skapa egna överlägg till Flexiboard. Habilitering & Hjälpmedel Flexiboard Lathund kring hur du kommer igång med att skapa egna överlägg till Flexiboard. Habilitering & Hjälpmedel Förord Denna lathund är enbart ett axplock av allt det material som finns i Flexiboards

Läs mer

Redaktörens Lathund för Glokala. Så här redigerar du en redan befintlig hemsida. Så här skapar du en länk till en extern hemsida

Redaktörens Lathund för Glokala. Så här redigerar du en redan befintlig hemsida. Så här skapar du en länk till en extern hemsida Redaktörens Lathund för Glokala Glokala Folkhögskolan www.glokala.se Hej och välkommen till redaktörens lathund! Detta är en snabbguide för dig som har behörigheter att skapa och uppdatera sidor på Glokalas

Läs mer

Lathund Blanketthotell Komma igång

Lathund Blanketthotell Komma igång Lathund Blanketthotell Komma igång Introduktion Denna lathund innehåller lite samlade råd och tips för de som ska använda tjänster från NT Smartwork. (För de som redan börjat använda Blanketthotellet finns

Läs mer

Webbkurs för distriktsansvariga. Stockholm den 7 och 13 september 2011

Webbkurs för distriktsansvariga. Stockholm den 7 och 13 september 2011 Webbkurs för distriktsansvariga Stockholm den 7 och 13 september 2011 Klistra in text från Word Klistra in: all formateringskod från Word kommer med och är den som styr det webbläsaren visar, även om man

Läs mer

Information efter genomgång av Microsoft Excel 2010

Information efter genomgång av Microsoft Excel 2010 Information efter genomgång av Microsoft Excel 2010 Här följer lite information om vad vi gick igenom på en datastuga på biblioteket i Åkersberga. Excel är ett kalkylprogram. Förutom rena kalkyler kan

Läs mer

Programsnickaren. Grunderna för hur du kommer igång och arbetar med Programsnickaren till Micro Rolltalk. Habilitering & Hjälpmedel

Programsnickaren. Grunderna för hur du kommer igång och arbetar med Programsnickaren till Micro Rolltalk. Habilitering & Hjälpmedel Programsnickaren Grunderna för hur du kommer igång och arbetar med Programsnickaren till Micro Rolltalk Habilitering & Hjälpmedel Starta programmet När programmet är installerat, hittar du programikonen

Läs mer

Photo Story. Sara Eriksson IKT A, HT 2007

Photo Story. Sara Eriksson IKT A, HT 2007 Photo Story Mitt tips: Om du inte ser bilderna i manualen backa ett steg och spar filen. Öppna sedan den sparade filen. Då ser du bilderna. Med Photo Story kan du skapa bildberättelser, genom att sätta

Läs mer

Ikon Menyalternativ Funktion och beskrivning Sök och ersätt text i arbetsfältet. Ramformatering

Ikon Menyalternativ Funktion och beskrivning Sök och ersätt text i arbetsfältet. Ramformatering Innehåll Redigeringsverktyget... 3 Hantera bilder... 5 Infoga pdf-fil... 5 Lägg till mall... 6 Infoga YouTube-klipp... 6 Infoga länk... 7 Infoga tabell... 8 Kodupprensning... 10 CSS-klass... 10 Egna anteckningar:...

Läs mer

Hur man lägger upp och redigerar dokument i Typo3.

Hur man lägger upp och redigerar dokument i Typo3. Hur man lägger upp och redigerar dokument i Typo3. Typo3 är ett så kallat CMS, Content Management System där du enkelt och smidigt kan lägga ut kursinformation och bilder. Detta verktyg är webbaserat vilket

Läs mer

Dags att skriva uppsats?

Dags att skriva uppsats? Dags att skriva uppsats? Grundkurs i Word 2010 SDM Studentdatorutbildning vid Malmö högskola Att skriva i Word! 1 Börja skriva/skapa ditt dokument- något att tänka på 1 Spara ditt dokument 1 Bra att veta

Läs mer

Manual till Båstadkartans grundläggande funktioner

Manual till Båstadkartans grundläggande funktioner Manual till Båstadkartans grundläggande funktioner Webbfönstret När du klickar på kartlänken öppnas Båstadkartan i eget fönster eller egen flik, beroende på inställningen i din webbläsare. Bilden nedan

Läs mer

Introducerande övningar i HTML

Introducerande övningar i HTML Introducerande övningar i HTML En webbsida består av en textfil som innehåller sidans text och koder i språket HTML, för att formatera innehållet. Har man bilder på sidan, så finns de som separata filer

Läs mer

LADDA UPP EN PDF-FIL OCH LÄNKA TILL DEN I DIN ARTIKELTEXT

LADDA UPP EN PDF-FIL OCH LÄNKA TILL DEN I DIN ARTIKELTEXT Joomla Guide 2.5.11 LÄNKAR LADDA UPP EN PDF & LÄNKA TILL I ARTIKEL Sida 1 av 11 LADDA UPP EN PDF-FIL OCH LÄNKA TILL DEN I DIN ARTIKELTEXT I denna guide får du lära dig att: Ladda upp ett PDF dokument på

Läs mer

Innehåll. HTML Editor Sida 2 av 30

Innehåll. HTML Editor Sida 2 av 30 HTML editor Innehåll Länka till webbsida... 4 Extern länk.... 7 Länka till e-post.... 8 PROs bildbank.... 10 Ladda upp ny bild.... 12 Redan uppladdad bild... 16 Bildredigeraren.... 17 Infoga/redigera inbäddad

Läs mer

INSTÄLLNINGAR FÖR IRONCADS 2D-RITNING

INSTÄLLNINGAR FÖR IRONCADS 2D-RITNING INSTÄLLNINGAR FÖR IRONCADS 2D-RITNING Innehållsförteckning Justera storlek och antalet decimaler för måttsättning...2 Ändra färg på ritningselement...4 Justera färg för ett enskilt element genom att byta

Läs mer

Kom igång med FrontPage 2003

Kom igång med FrontPage 2003 Kom igång med FrontPage 2003 Skolorna i Kristianstads kommun har inte gemensam licens som med vissa övriga Microsoft-program utan licens måste köpas för varje dator som det ska installeras på. Din tekniker

Läs mer