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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ö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

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

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

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

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

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

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

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

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

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

Kurs 6:1 Att publicera på webben

Kurs 6:1 Att publicera på webben Kurs 6:1 Att publicera på webben S TUDE NTDATOR UTBILDNINGE N MALMÖ HöGSKOLA Beijerskajen 8, K3, källaren, sal Apollo (A01:303), 205 06 Malmö www.bit.mah.se/undervisning/sdm Att publicera på webben, del

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Basics. Introduktion 3 Vanliga uttryck 3 Logga in 3 Användarinställningar 4 Fältbeskrivning 5. 2. Sidhantering

1. Basics. Introduktion 3 Vanliga uttryck 3 Logga in 3 Användarinställningar 4 Fältbeskrivning 5. 2. Sidhantering Manual Grunderna Av 1. Basics Introduktion 3 Vanliga uttryck 3 Logga in 3 Användarinställningar 4 Fältbeskrivning 5 2. Sidhantering Skapa en ny sida 6 Ta bort sida 9 Flytta sida 10 3. Filhantering Skapa

Läs mer

Användarutbildning i SiteVision

Användarutbildning i SiteVision Användarutbildning i SiteVision SiteVision AB Version 3 Innehållsförteckning 1 Komma igång med SiteVision...1 1.1 Starta SiteVision... 1 1.2 Redigeringsläget i SiteVision... 2 1.2.1 Verktygslisten...2

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

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

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

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

Dokumentmallar i praktiken, Nyps

Dokumentmallar i praktiken, Nyps Dokumentnamn Dokumenttyp Datum Dokumentmallar i praktiken Handledning 2009-08-13 Diarienr/Projektnr Upprättad av Godkänd av Version Magnus Österlund, Daniel Madsén 0.4 Dokumentmallar i praktiken, Nyps

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

Grundutbildning EPiServer CMS6

Grundutbildning EPiServer CMS6 Grundutbildning EPiServer CMS6 Välkommen! Presentation av kursledare och kursdeltagare Kursinnehåll Verktygsfält och funktioner Skapa sida, spara och publicera Redigera sida Länkar till andra sidor och

Läs mer

Att arbeta med. Müfit Kiper

Att arbeta med. Müfit Kiper Att arbeta med Müfit Kiper Att skriva nya inlägg Alla inlägg som är postade visas i kronologisk ordning, det vill säga det senast postade inlägget kommer visas först om inget annat angetts i temafilerna.

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

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

InfoGlue för lättredaktörer

InfoGlue för lättredaktörer 1 InfoGlue för lättredaktörer Gå till www.publicera.gu.se/enkel-inloggning och klicka på Länk till den enkla inloggningen. Alternativt så finns det en inloggningslänk någonstans på den (institutions-)webbplats

Läs mer

Lathund Bygga mallar. Senselogic AB Version 2.3

Lathund Bygga mallar. Senselogic AB Version 2.3 Lathund Bygga mallar Senselogic AB Version 2.3 Innehållsförteckning 1 Begrepp... 1 1.1 Innehållsyta... 1 1.2 Mallyta... 2 1.3 Layouter... 3 1.3.1 Fliken marginaler... 1.3.2 Fliken Inställningar... 1.3.3

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

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

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

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

Arg-administratörens guide till Umbraco v 1.2.1

Arg-administratörens guide till Umbraco v 1.2.1 Arg-administratörens guide till Umbraco v 1.2.1 Logga in 1. Öppna en webbläsare och gå till inloggningssidan: https://www.sfog.se/umbraco/ 2. Skriv in följande användarnam & lösenord : 3. Klicka på Logga

Läs mer

DIGITALA RESURSER MANUAL FÖR

DIGITALA RESURSER MANUAL FÖR DIGITALA RESURSER MANUAL FÖR Skapa presentationer med Prezi 1 Introduktion Prezi är ett verktyg för att skapa presentationer, precis som Power Point. Skillnaden är att man i Prezi jobbar med en stor arbetsyta,

Läs mer

Ljud och video på webbsidor

Ljud och video på webbsidor Nivå 3 Ljud och video på webbsidor All Code Clubs must be registered. Registered clubs appear on the map at codeclubworld.org - if your club is not on the map then visit jumpto.cc/ccwreg to register your

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

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

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

Lär dig grunderna i Photoshop Elements 4.0

Lär dig grunderna i Photoshop Elements 4.0 Lär dig grunderna i Photoshop Elements 4.0 Här får du lära dig hur man flyttar bilder från kameran till datorn, hur man fixar till ett foto, hur man skriver ut bilder och mycket mera. Lycka till! copyright

Läs mer

Lathund för redigering av Falkenbergs gymnasieskolas hemsidor

Lathund för redigering av Falkenbergs gymnasieskolas hemsidor Lathund för redigering av Falkenbergs gymnasieskolas hemsidor Börja med att logga in på hemsidan Adress: http://www.edu.falkenberg.se/gymnasieskolan Klicka på nyckeln. Skriv i användarnamn och lösenord,

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

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

FÖR DATORER. Historiskt arkiv. Användarguide. För Vasabladet

FÖR DATORER. Historiskt arkiv. Användarguide. För Vasabladet FÖR DATORER Historiskt arkiv Användarguide För Vasabladet Innehåll Arkivet via webbläsare Välkommen till Vasabladets historiska arkiv! Så här fungerar vårt historiska arkiv Teckna en prenumeration 4 Enkel

Läs mer

INSPIRA. Microsoft. Excel 2007 Grunder

INSPIRA. Microsoft. Excel 2007 Grunder INSPIRA Microsoft Excel 2007 Grunder Del 1 1. Introduktion till Excel 8 2. Hantera en arbetsbok 15 3. Formler och format 38 1 INTRODUKTION TILL EXCEL INTRODUKTION TILL EXCEL Starta programmet 8 Avsluta

Läs mer

Arbeta med bilder på sunne.se i CMS 7.5 Sida 1 av 9

Arbeta med bilder på sunne.se i CMS 7.5 Sida 1 av 9 Arbeta med bilder på sunne.se i CMS 7.5 Sida 1 av 9 Infoga, redigera och ta bort bilder på sunne.se En webbsida bäddar inte in en bild i sidan som många andra program, till exempel Word. Alla bilder och

Läs mer

FIRSTCLASS. Innehåll:

FIRSTCLASS. Innehåll: FIRSTCLASS Innehåll: Hämta klient...2 Installera klient...2 Konfigurera klient...2 Koppla upp...3 Skrivbordet...3 Mailbox...3 Presentation...3 Skapa ett nytt meddelande...4 Söka mottagare för nytt meddelande...4

Läs mer

Struktur & Layout med CSS

Struktur & Layout med CSS 1ME321 Webbteknik 1 Lek0on 5 Struktur & Layout med CSS Rune Körnefors Medieteknik 1 2015 Rune Körnefors rune.kornefors@lnu.se Agenda Veckoplanen Vecka 40 Läsanvisningar Exemplet Gretas Blommor GarreKs

Läs mer

Grundläggande Ordbehandling Microsoft Word

Grundläggande Ordbehandling Microsoft Word Grundläggande Ordbehandling Microsoft Word Programfönstret Namnlist Verktygsfält Menyrad Vågrät linjal Lodrät linjal Rullningslist Statusfält Menyer och Verktygsfält Visa eller dölja ett verktygsfält Högerklicka

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: 120918 Del 1 Logga in Välkommen att ta del av vårt uppdateringsverktyg,

Läs mer

Office 365 MB. Innehåll. Inledning / Inställningar... 2. Outlook (e-post)... 2. Kalender... 3. Personer (kontakter)... 5 OneDrive molnet... 5.

Office 365 MB. Innehåll. Inledning / Inställningar... 2. Outlook (e-post)... 2. Kalender... 3. Personer (kontakter)... 5 OneDrive molnet... 5. Innehåll Inledning / Inställningar... 2 Inloggning...2 Koppling av mobiltelefonen / pekplatta till systemet...2 Ladda Office 365 till egen dator...2 Tema...2 Outlook (e-post)... 2 E-post inställningar...2

Läs mer

Publicera taltidningen

Publicera taltidningen Publicera taltidningen Innehåll Publicera taltidningen...1 Två-stegs-raketen: Webbpubliceringen av taltidningen...1 Manual för publiceringsverktyget WaveFusion...2 Starta verktyget WaveFusion och skapa

Läs mer

LATHUND FRONTPAGE 2000

LATHUND FRONTPAGE 2000 LATHUND FRONTPAGE 2000 RXK Läromedel AB, Riddarplatsen 36 Plan 7 177 30 Järfälla Tel: 08-580 886 00, Fax: 08-580 259 40 www.rxk.se, e-post: info@rxk.se Detta material är författat av RXK Läromedel AB.

Läs mer

Daniel Clarhed 2006-06-22

Daniel Clarhed 2006-06-22 Avdelningen för Byggnadsmekanik Daniel Clarhed PM för Byggnadsmekaniks nya hemsida 2006-06-22 Byggnadsmekaniks nya hemsida I juli kommer Byggnadsmekanik få en ny hemsida, stöpt i det LTH-gemensamma utseendet.

Läs mer

Elevhantering. Välj Tabell - Elev. Konstatera att elevtabellen är tom! I brist på elevinformation måste schemafilen få reda på följande:

Elevhantering. Välj Tabell - Elev. Konstatera att elevtabellen är tom! I brist på elevinformation måste schemafilen få reda på följande: Öppna elevtabellen Välj Tabell - Elev. Konstatera att elevtabellen är tom! I brist på elevinformation måste schemafilen få reda på följande: Från vilka klasser hämtas eleverna till undervisningsgrupperna?

Läs mer

Hur man skapa en Wiki.

Hur man skapa en Wiki. Hur man skapa en Wiki. Ordet wiki (i t.e.x Wikipedia) kommer från Hawaiian och betyder snabbt. Kortfattat kan man säga att en wik i är en webbplats där alla enkelt kan publicera och redigera material när

Läs mer

Manual HSB Webb brf 2004 03 23

Manual HSB Webb brf 2004 03 23 NYHETER Manual HSB Webb brf 2004 03 23 Nu kan man sätta en hemavdelning på ett arbetsflöde, så att det bara blir synligt från den avdelningen och nedåt i strukturen under en förening. Ett arbetsflöde blir

Läs mer

Histogram, pivottabeller och tabell med beskrivande statistik i Excel

Histogram, pivottabeller och tabell med beskrivande statistik i Excel Histogram, pivottabeller och tabell med beskrivande statistik i Excel 1 Histogram är bra för att dem på ett visuellt sätt ger oss mycket information. Att göra ett histogram i Excel är dock rätt så bökigt.

Läs mer

Snabbmanual. för. Lärresurshanteringsverktyget

Snabbmanual. för. Lärresurshanteringsverktyget Snabbmanual för Lärresurshanteringsverktyget Beskrivning av olika vyer i Lärresurshanteringsverktyget Skapa I detta fönster skapar man nya sidor och/eller väljer struktur på sin lärresurs. Men man redigerar

Läs mer

Kursvärdering. Denna manual beskriver hur du kan skapa en mapp i Fronter som heter Kursvärdering där du ladda upp reslutat från kursutvärderingar.

Kursvärdering. Denna manual beskriver hur du kan skapa en mapp i Fronter som heter Kursvärdering där du ladda upp reslutat från kursutvärderingar. Kursvärdering Denna manual beskriver hur du kan skapa en mapp i Fronter som heter Kursvärdering där du ladda upp reslutat från kursutvärderingar. Här finns även tips på några olika sätt att skapa en kursvärdering

Läs mer