Bygg sajten i flash html - Del 1

Storlek: px
Starta visningen från sidan:

Download "Bygg sajten i flash html - Del 1"

Transkript

1 Bygg sajten i flash html - Del 1 Drömmer du om en egen sajt? Glöm kodknackande och krångliga html-editorer. Gör som proffsen och skapa en sajt med animeringsprogrammet Flash. Text Andreas Weidman, (artikeln är publicerad i Internetworld 10/2003) Flash Del 1 - Bygga siten i Flash Del 2 - Preloader Del 3 - Optimera sajten Del 4 - Uppdatera sajten smidigt Del 5 - Html i Flash Del 6 - Javascript och andra finesser Med en egen sajt på nätet kan du göra dina kompositioner tillgängliga för hela världen. Du kan publicera resultaten från matcherna i fotbollsföreningen eller helt enkelt använda sidan för att förstärka ditt ego. Vilket innehåll du än väljer är det lätt att bli avskräckt av själva hemsidessnickrandet. För många betyder det ändlösa rader av programmeringsspråk som mest liknar ryska eller så innebär det att använda ett komplicerat konverteringsprogram som man aldrig fattar. Hemsidor kan man nämligen bygga i både ordbehandlingsprogram och konverteringsprogram som Dreamweaver, alternativt genom att skriva koden för hand. Ett annat alternativ är att använda Flash. Det är ett lättanvänt program som skapades för att göra animeringar. Idag är Flash också det bästa alternativet för interaktiva hemsidor möjligheterna är oändliga. Ser likadan ut för alla Med en sajt byggd i Flash vet du att den ser likadan ut för alla besökare, oavsett deras webbläsare, operativsystem, skärmstorlek och övriga inställningar. Allt som behövs för att se Flashapplikationer är en Flashplayer som man hämtar gratis hos tillverkaren Macromedia om man inte har den. Undersökningar visar dock att majoriteten av surfarna har version 5. Därför är det i nuläget smart att göra hemsidan för den versionen och inte den senaste, Flash MX 6.

2 Skillnaden är att ett fåtal funktioner inte fungerar, men för hemsidan i exemplet behövs inte dessa ganska avancerade funktioner. Innan du börjar För att kunna hänga med i den här skolan är det bra om du vet lite hur programmet fungerar. Sätt dig gärna ner och experimentera lite först. Var inte rädd att klicka dig fram och prova alla funktioner. I programmet ingår några tips på hur man gör. Kolla också in tidigare skolor i Flash på vår sajt, Du bör också ha en klar bild av vad din hemsida ska innehålla. Ska den handla om din hobby vattenskotrar eller ska den kanske presentera dig och ditt företag? Skriv ner på ett papper vilka länkar du vill ha och skriv några texter kring varje område. När du känner dig redo kör vi vidare! Förberedelser 1. Starta programmet Lär känna arbetsområdet, verktygen och panelerna. (Se bilden Översikt.) Viktigast är Timeline, tidslinjen, som ligger nästan högst upp. Den visar vårt innehåll. Ovanför, i Properties, gör vi våra inställningar och under Tools till vänster finns verktygen. Nedre delen av fönstret är vårt arbetsområde och det är reserverat för vår kreativitet.

3 2. Gör inställningar Vi börjar med att ställa in hemsidans attribut som vi vill ha dem. Klicka på arbetsområdet och gå sedan in under Properties. Under Size väljer vi storleken 800 x 400 px, under Background väljer vi vit, Frame Rate, hastigheten på animeringar, ställer vi till 21, och under Publish väljer vi Flashplayer 5. Nu är vi redo att köra igång! 3. Skapa ett arbets-dokument I Timeline (tidslinje) motsvarar varje Frame (ruta) ett blankt papper. För att kunna arbeta med pappret måste det finnas en liten rund ring i rutan. Om den saknas högerklickar du i rutan och väljer Insert Blank Keyframe. (Se bild Tidslinjen.)Nu kan du lägga in innehåll för just den här sidan genom att skapa något på arbetsytan. Vill du skapa en sida till högerklickar du på nästa ruta och väljer återigen Insert Blank Keyframe. Vill du däremot ha samma innehåll i nästa ruta väljer du istället Insert Frame. Detta kan vara bra när du till exempel vill låta en menyrad ligga på samma ställe på alla sidor. Vill du i nästa ruta istället ha exakt samma innehåll men kunna ändra lite, till exempel vid en animation, högerklickar du och väljer Insert Keyframe.

4 4. Lägg till lager Du kan även lägga till olika lager med olika innehåll. Du lägger till ett lager genom att klicka på symbolen med det vita pappret under det första lagret, eller genom att högerklicka på Layer 1 och välja Insert Layer. (Se bild Lager.) Nu är grunden lagd. En hemsida tar form Nu kan vi alltså börja fylla vår hemsida med innehåll. 5. Välj lager Klicka på Layer 2 för att välja vilket lager vi ska jobba i. Normalt är Flash inställt för att hjälpa dig att rita och placera saker efter ett osynligt rutmönster. Det kan ibland vara störande och du kan stänga av det genom att klicka på Snap to objects under View i menyraden.

5 6. Skapa sidmall Rita nu en ram precis innanför kanten runt sidan med verktyget Rectangle Tool i panelen Tools. Markera därefter färgen inne i ramen och tryck på Delete. I samma lager lägger du även allt som ska finnas med på samtliga sidor, till exempel logotype och menyrad. För att lägga in logotypen väljer du Import under File och sedan bilden du vill ha. Därefter placerar du bilden där du vill ha den. Är bilden för stor kan du förminska den med hjälp av verktyget Free Transform Tool i Tools-panelen. Använd ritverktygen för att rita upp hur det ska se ut, och textverktyget för att skriva in de länkar som ska finnas på sajten. I det här exemplet har vi fyra länkar. 7. Lås lager Vi ska nu låta det här lagret visas på alla sidor på sajten. Det gör vi genom att högerklicka på ruta fyra i tidslinjen och välja Insert Frame. Nu spänner en grå ruta över fyra rutor. Nu kan vi tillfälligt låsa detta lager för att inte råka flytta på något när vi jobbar med resten av sajten. På varje lager finns en liten prick som ligger under hänglåssymbolen överst. Om du klickar på pricken är lagret låst och upprepa för att låsa upp. 8. Lägg in bild Då är du redo att lägga in lite innehåll på din sida. Välj Layer 1. I ruta ett ska vi göra startsidan, i ruta två länk nr 2, i ruta tre länk nr 3 och så vidare. Hur det ska se ut väljer du själv. Här ska vi ha en bild och en text på varje sida. På startsidan importerar du en bild på samma sätt som du importerade logotypen tidigare och placerar den på lämplig plats. Om du vill kapa bilden väljer du Break Apart under Modify. 9. Lägg in text Du väljer textverktyget för att lägga till text. För att ändra typsnitt går du till Properties som hela tiden ändras beroende på vilket verktyg du använder. Rita och ändra så som du vill ha din layout. Nästa sida skapar vi som tidigare nämnts genom att högerklicka på ruta två i tidslinjen och välja Insert Blank Keyframe. På samma sätt som tidigare lägger vi in bilder och text på de resterande sidorna. Vill du behålla samma utseende på alla sidor och enbart byta ut texten kan du när du högerklickar välja Insert Keyframe och sedan ändra texten så som du vill ha den. Nu har vi bestämt hur sajten ska se ut, och nu måste vi säga åt programmet hur den ska fungera. Det gör vi genom programmering i Flashs inbyggda programspråk actionscript eller flingo som det också kallas.

6 10. Välj kodläge Du hittar panelen för actionscript genom att välja Windows och sedan Actions. Panelen har två lägen: Normal och Expert Mode. (Se bild Actionspanelen.) I Normal-läget kan du klicka fram färdiga skript ur ett bibliotek, men för att kunna klistra in egen kod måste du ställa om till Expert Mode. I den ljusblå rutan med en pil väljer du Expert Mode. Du kan nu programmera hur rutorna i tidslinjen ska fungera och vart knappar ska länkas. Hur det går till kommer vi till snart.

7 Skapa knappar För att besökaren ska kunna röra sig på sajten måste det finnas knappar. Knapparna lägger du i det översta lagret, så vi får låsa upp det igen och välja Layer Skapa knappar En knapp skapar du genom att i det här fallet markera en ritad fyrkant som är ungefär lika stor som en länk i menyn. Sedan väljer du Insert>Convert to Symbol, och väljer alternativet Button. (Se bild Göra en knapp.) Här finns även en kvadrat med en massa prickar på som avgör var knappens centrum ligger. Klicka på den längst till vänster i mitten och klicka på OK. Du har nu skapat en knapp. När du nu dubbelklickar på knappen ändras tidslinjen och det finns fyra rutor. Up betyder hur den ska se ut när musen inte vidrör den, Over när man rör vid den, Down när man klickar på den och Hit är den yta som man kan röra vid. Dubbelklicka på den grå rutan i ruta ett i tidslinjen och dra den sedan med musen till rutan under Hit. Den visas sedan som ljusblå när du arbetar med filen och är osynlig när sidan är publicerad.

8 12. Skapa aktivitet Vill du att något ska hända när man håller musen över länken högerklickar du i rutan under Over och väljer Insert Blank Keyframe. Här kan man nu rita en pil eller liknande. Tänk på att krysset som ligger till vänster är kanten längst till vänster på knappen när du placerar din pil, du kan därför lägga den förslagsvis lite till vänster om krysset. För att gå tillbaka från knappens tidslinje väljer du Scene 1 i botten på tidslinjen eller dubbelklickar på ett tomt område på skärmen. Nu är knappen som sagt markerad med en ljusblå färg. Vi placerar ut knappen med hjälp av musen och piltangenterna. Snart ska vi kopiera knappen till alla länkar men först lite programmering. När du har panelen Actions öppen markerar du knappen genom att klicka på den. För att se till att knappen går tillbaka och stannar på ruta ett i tidslinjen när man släpper den skriver du följande i dialogrutan Actions: on(release){_root.gotoandstop(1)} Nu kan du klicka på knappen igen och kopiera den och klistra in med Edit>Copy och Edit>Paste. Kopiera så du har fyra knappar och placera dem ovanpå dina länkar. Nu får du markera varje knapp och ändra i koden så att den hoppar till rätt siffra. Du byter helt enkelt ut ettan mot två, tre eller fyra. 13. Stoppa filmen Om du skulle publicera filen nu, skulle Flash visa varje sida i en följd utan att du klickade. Det beror på att Flash tror att du har gjort en film. För att förhindra det markerar vi ruta ett i Layer 1 på tidslinjen. I dialogrutan Actions stannar vi filmen genom att skriva: stop(); 14. Publicera Nu är sajten klar för publicering. Om du inte har sparat din fil, gör det nu. Välj därefter File>Publish Settings. Här finns flera alternativ att välja på. Under fliken Formats ska Flash och html vara markerade. Under fliken Flash och Html duger stadardinställningen bra. Välj sedan OK. Är du redo? Klicka nu på File>Publish Preview>Default. Nu ska din webbläsare öppnas och visa din hemsida. Hurra! Ett html-dokument och en Flashfil sparas i samma katalog som du sparat din sida i. 15. Ut på internet För att lägga ut sidan på Internet behöver du ett webbhotell och ett ftp-program. Gratis webbhotell finns att hitta på Internetworlds webbsajt, Gratis ftp-program kan du ladda ner från exempelvis Sedan är det bara att ladda upp html-filen som du döper om till index.html (för att

9 webbhotellet ska veta vilken fil som ska visas först) och Flashfilen i formatet swf som också exporterades. Den ser ut som den vanliga arbetsfilen (med röd logo) fast här med blå logga. Sajten är klar att besöka. Nu har du lärt dig grunden i hemsidesskapande med Flash. Men det finns mycket mer att lära. Med Flash kan du göra i princip hur avancerade hemsidor som helst, det enda som stoppar dig är din fantasi. Du kan göra tuffa bildspel, interaktiva forum, 3d-världar och mycket, mycket mer. Vi kommer att ta upp många spännande funktioner i webbskolan under vintern. Vi visar bland annat hur du optimerar din hemsida, skapar avancerade preloaders, gör dina egna uppdateringsfunktioner och annat smått och gott. Missa inte det! Hämta filer på nätet Du hittar den färdiga filen på Internetworlds sajt, flash1.zip. Med hjälp av den förstår du lättare hur allt fungerar. Ladda ner den och använd den tillsammans med artikeln. Du kan också ha den som utgångspunkt för egna ändringar.

10 Det här behöver du; Flash mx Programmet du behöver heter Macromedia Flash MX och finns att ladda ner på som en 30 dagars testversion. Den har alla funktioner som det riktiga programmet. Fullversionen kostar från kronor. Checklista - Ställ in bakgrundsfärg, sidstorlek och hastighet. - Dela upp innehållet i olika lager. - Lägg knappar vid menyn. - Lägg till keyframes. - Placera innehållet. - Skriv kod till knapparna. - Skriv en stop kod i första framen. - Publicera. Här kan du läsa mer om Flash Flashhjälp på svenska Forum på svenska med exempelfiler och lektioner i Flash. Störst och bäst Den största och i många fall bästa sidan med Flashexempel på engelska. Mångsidig med bra innehåll En vettig sida om Flash med nyheter, lektioner och forum. Hjälp av tillverkaren Tillverkaren av programmet har mängder med information och hjälp om Flash. Du hittar bland annat vanliga frågor och svar, exempelfiler och färdiga insticksfunktioner som du kan använda tillsammans med till exempel Dreamweaver. Många exempel Mängder av Flashkurser för alla kunskapsnivåer. virtual-fx.net/vfx/tutorial.php

11 Gör en snygg laddsida - DEl 2 Alla smarta sajter i Flash har en. Och du vill inte vara sämre. I tio steg visar vi hur du gör din egen avancerade laddsida. När du besöker en webbplats som skapats i programmet Flash kan du mötas av en tom skärm och texten "laddar". Det är både fult och rätt frustrerande, eftersom du inte vet hur lång tid det tar innan sidan har laddat färdigt eller om den ens fungerar. I första delen av Flash-skolan lärde du dig grunderna för att bygga en sajt i Flash. I den här andra delen hjälper vi besökarna på din sajt genom att skapa en så kallad preloader, eller laddsida, som visar hur snabbt hemsidan laddas in. Vi använder dessutom streaming, strömmande teknik, för att göra vänte-tiden kortare. Vår laddsida ska visa så mycket information som möjligt. Vi ska kunna visa hur stor den totala filen är, hur mycket som laddats in och hur lång tid det är kvar i procent. Du kan själv välja vilka delar du tycker är viktigast att ha i din laddare. För dig som har glömt bort eller missat den första delen finns artikeln och exempelfilerna på vår hemsida, Där hittar du också exempelfilerna till den här lektionen. I skolan som följer här bygger vi vidare på det du skapade i del 1. Om du är nybörjare behöver du läsa igenom första delen för att bättre kunna hänga med. 1. Skapa utrymme Nu ska du alltså bereda plats för din laddsida. I tidslinjen (Timeline) gör du det före allt innehåll så att sidan laddar in först och kan ge information till besökaren snabbt och smidigt. För att göra detta måste du flytta innehållet i alla nyckelrutor i tidslinjen ett steg fram, och på så vis skapa en tom ruta allra först i tidslinjen där din laddsida ska ta plats. Markera alla rutor i tidslinjen med musen. När detta är gjort tar du tag i det markerade området och drar det ett steg åt höger. Det kan hända att varningsrutan Resolve Library Conflict dyker upp, med två olika val. Flash undrar om det ska kopiera innehållet eller flytta det. Båda valen ger i det här fallet samma resultat, men välj för säkerhets skull Replace Existing Items. Du har nu en tom ruta i både layer 1 och layer 2 allra längst till vänster.

12 2.Ändra i koden Tanken är att filmen ska stanna på laddaren och sedan gå vidare till sidan. Du behöver därför dels flytta stoppkoden till ruta ett, dels ändra vart länkarna ska gå. Eftersom du har flyttat allt ett steg måste du alltså ändra alla länkars kod till en ruta framåt. Ta fram actionscriptfönstret. Det hittar du under menyn Window och sedan Actions om den inte redan finns framme. I ruta två i lager ett hittar du koden stop();. Ett litet a visar att rutan innehåller kod. Klicka på rutan och titta efter koden i din action-script-ruta. Markera hela raden kod och radera den. Skriv in samma kodrad i ruta ett istället. I det här exemplet väljer vi ruta ett i layer 2, tittar i actionscript fönstret och skriver: stop(); Du har nu sagt åt Flash att stanna på den allra första rutan. Ändra länkarna genom att ställa dig på ruta två i tidslinjen och välj en av våra länkknappar. De är markerade som ljusblå fyrkanter. Välj den första och se i actionsfönstret att den innehåller koden: on(release){_root.gotoandstop(1)}

13 Eftersom du har flyttat allt innehåll ett steg ändrar du siffran 1 i koden till 2. Gör likadant med alla länkarna. Nu är du redo att börja skapa! 3.Skapa grafik Du bestämmer själv hur din preloader ska se ut. Det du ska tänka på är att göra den så lättladdad som möjligt. Det betyder att du helst struntar i stora bilder och grafik. Du ska skriva en text som säger att sidan laddar, göra rutor för dina siffror samt göra en så kallad Progressbar, som visar hur stor del av sajten som laddats. En progressbar kan vara allt från ett litet streck som går från vänster till höger till ett glas som fylls upp till toppen. Vi ska här använda oss av ett streck. Men börja det hela med att designa laddsidan. Lägg en text med textverktyget. Den har A som symbol och du hittar den under panelen Tools. Här skriver du till exempel Laddar information.

14 4. Visa laddtid En progressbar är alltså i detta fall ett streck som visar hur mycket som laddats in. Det ger besökaren en översikt av hur fort nedladdningen går och hur mycket som är kvar. Det hela sköts med programmering, men du måste dock rita för hand. En progressbar kan se ut lite hur som helst. I det här exemplet ritar vi en rektangel gör den i valfri höjd och längd. Markera ifyllnadsfärgen och gör det till en symbol genom att trycka snabbkommandot F8 på tangentbordet. Välj Movieclip och klicka i en prick längst till vänster på den lilla kvadraten som visar var symbolens center ska ligga.

15 5. Gör informationsrutor Nu vill du ge information om hur mycket det är kvar att ladda i kilobytes, total mängd kilobyte och procent laddat. Du visar här för besökaren hur filen laddas. För att kunna visa den informationen krävs till att börja med några dynamiska textrutor. Börja med att sätta ut några sådana. En dynamisk textruta är ett förbestämt textfält. Till den kan du skicka text eller uträkningar med siffror. Välj textverktyget. Titta under panelen Properties och hitta snabbt en ruta där det nu förmodligen står Static text. Välj istället Dynamic text. Dra musen till arbetsytan och håll ner vänster musknapp. På så sätt drar du upp ytan på textfältet. Se till att du gör den tillräckligt lång för att få plats med all text du vill få in. Om den skulle visa sig bli fel storlek kan du alltid dubbelklicka på den och dra i den lilla fyrkanten för att ändra storlek på den. Vi ritar totalt ut två sådana textfält. I exemplet har vi valt att lägga de under varandra. För att kunna skicka information till dessa dynamiska textfält måste Flash veta till vilken ruta som vad ska skickas. Hjälp programmet med detta genom att döpa dessa rutor. Du döper textfälten genom att helt enkelt markera en ruta och skriva in valfritt namn i rutan Var: som står för variabel i panelen Properties. I exemplet döper vi våra textfält för enkelhetens skull till text1 och text2. Nu är det dags att få lite liv i vår preloader!

16 6. Skapa action Du ska nu väcka liv i din skapelse med hjälp av lite programmering. Du markerar din Progressbar och öppnar panelen Actions. Här ska du lägga in lite kod både för vår Progressbar och för all uträkning för resterande information som ska skickas till textfälten. Koden du skriver in följer nedan. Med text markerade med // får du kommentarer kring koden, men de ska inte ingå koden. Det kan se lite krångligt ut med alla uträkningar, men egentligen är det standarduträkningar. onclipevent(enterframe){ //Hämtar infomation om filen.// total=_root.getbytestotal(); totalkb=math.round(total/1000); laddat=_root.getbytesloaded(); laddatkb=math.round(laddat/1000); //Räknar ut procent.// procent=math.round(laddatkb/(totalkb/100)); _root.text1=procent + "% har laddatsî //Reglerar vår progressbar.// this._xscale=procent;

17 //Räknar ut kilobytes.// _root.text2=laddatkb + " kb av " +totalkb +" kb har laddats"; //Kollar om det har laddats färdigt.// if(laddat==total){_root.gotoandstop(2);} } 7.Lär känna din kod För att du bättre ska kunna förstå koden går vi igenom den rad för rad. Är du redo? Då kör vi! Den första raden är en standardrad som alltid används när man programmerar ett Movieclip och betyder i princip: Använd denna kod vid Enterframe, alltså hela tiden. Du kan istället skriva till exempel îloadî om du vill att koden bara ska köras en gång. onclipevent (enterframe){

18 I följande fyra rader hämtar du information om totala antalet bytes som filen har samt hur mycket som har laddats in (getbytestotal/loaded). Math.round rundar helt enkelt av det talet och sedan delas det med 1000 för att omvandlas till kilobyte istället. _root är sökvägen till det som ska kollas, vilket i detta fall är grundscenen, ungefär som skrivbordet i Windows. Det finns här även så kallade variabler (total, totalkb, laddat och laddatkb) vilket är valfria ord som lagrar resultatet av till exempel en uträkning. Du kan sedan använda det ordet för att räkna med resultatet när du vill. total=_root.getbytestotal(); totalkb=math.round(total/1000); laddat=_root.getbytesloaded(); laddatkb=math.round(laddat/1000); För att räkna ut procenten använder du återigen våra variabler, avrundning och sökvägen. Men den här gången skickar du slutresultatet tillsammans med lite text till _root.text1 vilket är sökvägen till ett av de dynamiska textfält du skapade tidigare. Det du skriver här syns alltså på skärmen sedan. procent=math.round(laddatkb/(totalkb/100)); _root.text1=procent + "% har laddatsî Här reglerar vi vår Progressbar, du vet den som visar hur mycket som laddats i procent. Här står i klartext att den här (rektangelns) skala horisontellt (_x) ska vara lika mycket som procent som vi räknade ut tidigare. this._xscale=procent; För att räkna ut kilobytes och skicka det till text2 använder vi sökvägen, variabler och egen text. _root.text2=laddatkb + " kb av " +totalkb +" kb har laddats"; Den här raden kollar om det har laddats färdigt. Om variabeln laddat och variabeln totalt är lika mycket hoppa till ruta 2 i grundscenen. if(laddat==total){_root.gotoandstop(2);} } Det var väl inte så svårt? Oftast kan en klunga kod se lite läskigt ut men är ofta ganska logisk, även om komplicerade matematikfunktioner inte alltid är så kul. Eftersom koden är uppdelad i olika sektioner kan du ta bort någon funktion, till exempel kilobyteräknaren. Då raderar du bara det avsnittet.

19 8.Färdig laddare Du har nu skapat en preloader som fungerar som ett Smartclip. Det betyder att du kan lägga in preloadern i vilken Flashfil som helst och den fungerar på direkten om den ligger allra först i filmen. Vill du sätta in den någon annanstans kan du enkelt göra det, men kom ihåg att ändra den näst sista raden som kollar om det laddats färdigt. Här får du ändra tvåan till den ruta som du vill att den ska hoppa till när den är klar.

20 9. Snabba på laddningen Har du gjort en väldigt stor webbplats eller en lång animation som tar mycket lång tid att ladda kan du använda dig av vad som brukar kallas för streaming. Det innebär att Flash bara laddar in så mycket du önskar, vilket brukar vara de första sidorna, och låter resten laddas medan besökaren är inne på sajten. I en animering på fem minuter låter du alltså preloadern ladda in kanske en minut. Medan besökaren tittar på den första minuten hinner resterande fyra minuter laddas in. Det gör att väntetiden för sidan minskar kraftigt och du kan bestämma helt och hållet hur mycket du vill ladda in och hur mycket som ska streamas. Allt du behöver göra är en pytteliten ändring i koden. På rad två i koden i vår progressbar ligger total= _root.getbytestotal(); Skriv själv in hur mycket som ska laddas. Om filen är totalt 500 kb ( bytes) och du vill att 100 kb ( bytes) ska laddas in i början blir koden istället total= ; Hur enkelt som helst! Du skriver alltså bara in hur mycket du vill ska laddas istället för att Flash kollar hur stor den är totalt. Flash laddar sedan in en ruta i taget från tidslinjen från vänster till höger medan besökaren tittar på de första. Bra va!

21 10. Publicera din laddsida Din preloader är nu helt klar. När du exporterar din nya fil och lägger ut den som din hemsida följer den automatiskt med (friska upp minnet i Flash-skolan del 1). Så här blev resultatet. En bild av hur sidan laddas och hur lång tid det är kvar. I nästa nummer går vi vidare och optimerar bilder och grafik på vår Flashsajt. Hämta filer på nätet Vill du hellre ser hur vi har gjort innan du själv börjar bygga kan du hämta exempelfiler till den här delen i Flash-skolan på

22 Snabba upp din hemsida! - Del 3 Många drar sig för att besöka hemsidor som tar för lång tid att ladda och fortsätter raskt till någon annan sajt. Ett sätt att hjälpa surfarna är att visa den preloader, laddsida, som du lärde dig att skapa i förra delen av Flashskolan. I den ser besökaren hur stor sajten är och hur snabbt den laddas. Du ska nu gå ett steg längre och faktiskt minska filstorleken så att sajten går fortare att ladda. Du optimerar den för bästa prestanda och för besökarnas skull. Optimering är ett viktigt steg i att göra hemúsidor och du får garanterat fler och gladare besökare om du optimerar rätt. För att kunna hänga med i den här webbskolan behöver du programmet Flash samt tidigare publicerade delar av skolan. Du hittar de tidigare artiklarna och deras exempelfiler på vår sajt. Adressen är Den här delen skiljer sig lite från de tidigare eftersom vi tar upp vissa tekniker som vi inte använder i exempelúfilen. Vilka av våra tips du ska använda beror på vilket innehåll du skapar på din sajt. Experimentera med optimeringsteknikerna allteftersom du behöver dem. Lycka till! 1. Optimera alla bilder Hemsidor innehåller oftast många bilder och de är förstås nödvändiga för att skapa innehåll och känsla på sajten. Problemet är att bilderna tar mycket plats räknat i kilobyte. Photoshop och liknande bildredigeringsprogram har ofta inbyggda funktioner som minskar filstorleken och därmed bildkvaliteten. Samma sak kan du göra i Flash. Där har du två sätt att komprimera bilderna på alla samtidigt eller en i taget. Om du är stressad eller har många bilder som du vill optimera snabbt, kan du ställa in kvaliteten för alla bilder på en gång. Börja med att välja File och sedan Publish Settings. Då visas en ruta där du kan göra diverse inställningar. Under fliken Flash hittar du JPEG Quality och där ställer du in en kvalitet på mellan 0 och 100. Ju lägre siffra du väljer, desto mer komprimeras bilderna. Inte så svårt, eller hur?

23 2. Optimera enskilda bilder Det andra sättet att optimera är att ställa in kvaliteten på varje bild separat. Det kanske bara finns en riktigt stor bild på sajten och då kan det räcka att dra ner kvaliteten på just den. För att göra det går du in under menyn Windows och väljer sedan Library. Nu visas ett bibliotek med alla bilder, symboler och ljud som används på din hemsida. Leta rätt på bilden i listan, markera den och tryck sedan på den runda, blå symbolen som du hittar längst ner i fönstret. Rutan Bitmap Properties öppnas. Avmarkera Use document default quality så att du själv kan ställa in bildens kvalitet.

24 3. Optimera grafik Det är inte bara fotografier som går att optimera i Flash. Även den grafik som är tecknad kan optimeras så att filen blir mindre i storlek. Att kunna optimera grafik är ett måste, speciellt om du pysslar med tecknad film eller stora illustrationer. I en illustration som är gjord på dator bildas osynliga ankarpunkter vid kanter och kurvor. Ju färre ankarpunkter en illustration har, desto mindre blir den också i kilobyte. Det vi ska göra är alltså att låta Flash minska antalet ankarpunkter och räta ut kurvorna en aning. Du avgör själv hur mycket och om resultatet ser bra ut. Allt du behöver göra är att markera hela den illustration som ska optimeras, klicka på Optimize i menyn Modify. På samma sätt som med de vanliga bilderna kan du nu ställa in kvaliteten på det du ritat. Låg siffra ger låg kvalitet. När du klickar på OK visar Flash i en ruta hur mycket filen har minskat.

25 4. Hastighet för pc och mac Av någon outgrundlig anledning fungerar Flash lite olika för pc och mac. Om du har ställt in hemsidans/animationens uppspelningshastighet (Framerate) på en pc kan det bli en helt annan hastighet på mac. Skillnaden kan faktiskt bli ganska stor och generellt sett går det oftast långsammare på mac. Men problemet är på inget sätt olösligt. Som tur är ger vissa hastigheter samma resultat på båda datortyperna. Se alltså till att optimera hastigheten så att den fungerar både på mac och pc. I tabellen till höger ser du hur olika hastigheter motsvarar varandra på de två plattformarna. Som framgår av tabellen fungerar allt bra upp till 10 i Framerate. Då börjar det skilja något. Ofta används 12 som lägsta Framerate i Flash och det är också standardúinställningen. Tabellen visar också att för pc ger talen 13 16, 21, 31 och 59 snarlik hastighet på mac. Men skulle du välja 58 som Framerate kommer det att gå hälften så snabbt på en mac. För att din hemsida/animation ska se likadan ut på mac som på pc ska du alltså välja en Framerate som överensstämmer bra. Själva inställningen gör du under Framerate i panelen Properties längst upp. Den visas om du klickar på en tom yta på arbetsområdet.

26 5. Smarta tips Det finns en rad enkla tips som kan hjälpa dig att minska storleken på en fil. Vissa saker påverkar filstorleken mer än andra och det är bra att lära sig vad man ska tänka på. Undvik till exempel toningar så långt det är möjligt. Det är snyggt att använda det som ifyllnadsfärg, men filen blir mycket större än om du använder bara en ifyllnadsfärg. Att gruppera grafiska objekt minskar filstorleken. Med gruppera menas att du binder ihop grafik eller bilder. För att göra en grupp markerar du de objekt du vill gruppera och väljer Group i menyn Modify. Där finns även valet Ungroup ifall du vill lösa upp gruppen igen.

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

Grunder. Grafiktyper. Vektorgrafik

Grunder. Grafiktyper. Vektorgrafik 2 Grunder All vår början bliver svår eller hur det nu brukar heta, och detta är något som gäller även Flash. För den som är ovan vid Flash gäller det säkert extra mycket, då det kan vara knepigt att förstå

Läs mer

En förladdare fångar användarens uppmärksamhet under tiden huvudfilmen laddas. Använd din kreativitet när du formger en förladdare och använd sedan

En förladdare fångar användarens uppmärksamhet under tiden huvudfilmen laddas. Använd din kreativitet när du formger en förladdare och använd sedan En förladdare fångar användarens uppmärksamhet under tiden huvudfilmen laddas. Använd din kreativitet när du formger en förladdare och använd sedan ActionScript för att sätta den i arbete. 10 Ladda och

Läs mer

Lathund till Publisher TEXT. Skriva text. Importera text. Infoga text. Dra och släpp

Lathund till Publisher TEXT. Skriva text. Importera text. Infoga text. Dra och släpp Lathund till Publisher TEXT Pekverktyget använder du när du ska markera en ram som du vill förändra på något sätt. Klicka på textverktyget. Placera muspekaren på den tomma dokumentytan, det spelar ingen

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

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

Användarmanual för Content tool version 7.5

Användarmanual för Content tool version 7.5 Användarmanual för Content tool version 7.5 TM WEB Express AB Manual Content tool 7.5 Sid 2 INNEHÅLLSFÖRTECKNING 1 OM PUBLICERINGSVERKTYGET... 3 1.1 ALLMÄNT... 3 2 ÖVERSIKT... 3 3 ALLMÄNT OM WEBBSIDAN

Läs mer

Steg 1 Minnen, mappar, filer Windows 7

Steg 1 Minnen, mappar, filer Windows 7 Steg 1 Minnen, mappar, filer Windows 7 Maj -13 Liljedalsdata.se Liljedalsdata Steg 1 Sida 1 Inledning Välkommen till denna kurs. Att jobba med datorer är ofta som att jobba med matematik. Det nya bygger

Läs mer

Lär dig POWERPOINT. Lars Ericson datorkunskap.com

Lär dig POWERPOINT. Lars Ericson datorkunskap.com Lär dig POWERPOINT Lars Ericson datorkunskap.com POWERPOINT D A Programmet Microsoft PowerPoint används till att skapa grafiska presentationer till bildspel, presentationer mm. När du öppnar upp PowerPoint

Läs mer

Guide till Mynewsdesk Hosted Newsroom - Kom igång och spegla ditt pressrum!

Guide till Mynewsdesk Hosted Newsroom - Kom igång och spegla ditt pressrum! Guide till Mynewsdesk Hosted Newsroom - Kom igång och spegla ditt pressrum! Hur du implementerar ditt Hosted Newsroom I den här guiden kan du läsa hur du skapar ert Hosted Newsroom ert pressrum på er egna

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

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

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

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

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

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

Skapa mapp. * Gör så här: Det finns många sätt att skapa mappar, men det enklaste sättet brukar vara följande.

Skapa mapp. * Gör så här: Det finns många sätt att skapa mappar, men det enklaste sättet brukar vara följande. Ideell IT-förening där äldre lär äldre Skapa mapp Det finns många sätt att skapa mappar, men det enklaste sättet brukar vara följande. * Gör så här: 1. Se till att du befinner dig på den plats i datorn

Läs mer

Paneler - VCPXX.2. Programmeringsmanual för VCP-paneler. Revision 2

Paneler - VCPXX.2. Programmeringsmanual för VCP-paneler. Revision 2 Paneler - VCPXX.2 Programmeringsmanual för VCP-paneler Revision 2 Innehållsförteckning Innehållsförteckning... 2 1 Symbolfiler för kommunikation via IndraLogic... 3 2 Uppsättning i IndraWorks... 6 3 Programmering

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

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

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

Laboration 0. Enhetsbokstaven anges med ett kolon efter och man läser ofta ut detta, exempelvis C:(sekolon).

Laboration 0. Enhetsbokstaven anges med ett kolon efter och man läser ofta ut detta, exempelvis C:(sekolon). Laboration 0 Laborationen är till för dig som inte är familjär med att navigera i filträd på en dator. Om du är van vid detta (vilket är det vanliga nu för tiden) så kan du bara snabbt titta igenom laborationen.

Läs mer

Steg 1 Minnen, mappar, filer Windows 8

Steg 1 Minnen, mappar, filer Windows 8 Steg 1 Minnen, mappar, filer Windows 8 Feb -14 Liljedalsdata.se Liljedalsdata Steg 1 W8 Sida 1 Inledning Välkommen till denna kurs. Att jobba med datorer är ofta som att jobba med matematik. Det nya bygger

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

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

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

Macromedia. Dreamweaver 8. Grundkurs. www.databok.se

Macromedia. Dreamweaver 8. Grundkurs. www.databok.se Macromedia Dreamweaver 8 Grundkurs www.databok.se Innehållsförteckning 1 Arbetsmiljön... 1 Användningsområde... 1 Starta Dreamweaver... 1 Arbeta i Dreamweaver... 3 Fönster... 4 Statusfältet... 4 Menyer...

Läs mer

Umgås på nätet KAPITEL 6. Chatta via webbläsaren

Umgås på nätet KAPITEL 6. Chatta via webbläsaren KAPITEL 6 Umgås på nätet Internet håller alltmer på att utvecklas till en parallellvärld med vår vanliga tillvaro. Man spelar spel över nätet, bygger upp virtuella världar med virtuella prylar och virtuella

Läs mer

Instruktion för PowerPoint

Instruktion för PowerPoint Intruktion för PowerPoint Landstingets kansli 2009-11-12 Informationsavdelningen, Carl Mölstad Instruktion för PowerPoint Landstingets PowerPoint-mall ska användas i alla sammanhang där en medarbetare

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

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

Frontpage 2002/XP (2)

Frontpage 2002/XP (2) Frontpage 2002/XP Frontpage 2002 eller Frontpage XP som det också kallas är ett hemsideprogram där du inte behöver kunna koda som annars är fallet om man gör en hemsida. Att snabbt, enkelt och snyggt kunna

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

Användargränssittet (Front-end) i mobilversionen bygger i stor utsträckning på jquery Mobile-ramverket.

Användargränssittet (Front-end) i mobilversionen bygger i stor utsträckning på jquery Mobile-ramverket. e-line mobilversion Pyramid Business Studio 3.42A servicepack 05 (2015-07-13) Mobilversionen av e-line är i grunden samma applikation som fullversionen av e-line. Skillnaden är att endast valda delar av

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

Guide. Webbsidor i Studentportalen. Innehåll. Uppdaterad: 2014-10-07

Guide. Webbsidor i Studentportalen. Innehåll. Uppdaterad: 2014-10-07 Guide Eva Pärt-Enander, 2012-12-14 Webbsidor i Studentportalen Uppdaterad: 2014-10-07 Innehåll Webbsidor i Studentportalen... 1 Om webbsidor... 2 Lägg till en webbsida... 2 Lägg till samma webbsida på

Läs mer

Länka in bilder från webben hjälper dig att använda bilder som du inte har sparade på din egen dator.

Länka in bilder från webben hjälper dig att använda bilder som du inte har sparade på din egen dator. Länka in bilder från webben hjälper dig att använda bilder som du inte har sparade på din egen dator. Webben är en outsinlig källa av bildmaterial och somligt får du använda gratis! Verktyget Länka in

Läs mer

Snabbguide HJÄRNTORGET Produktionsverktyget

Snabbguide HJÄRNTORGET Produktionsverktyget Snabbguide HJÄRNTORGET Produktionsverktyget Skapa ny Importera Kopiera Sida Skapa en sida med text, bild, ljud eller film. Mapp Skapa en mapp som kan innehålla annat innehåll. Test Skapa ett test med poängsatta

Läs mer

Bildredigering i EPiServer & Gimp

Bildredigering i EPiServer & Gimp Bildredigering i EPiServer & Gimp Maria Sognefors 7minds Agenda Teori om bilder Att tänka på när jag fotograferar Föra över bilder från kamera till dator Ladda upp bilder till EPiServer CMS 5 Enkel redigering

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

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

Word Grunderna 1. Om du kan det allra enklaste i Word, hoppa över uppgifterna A-E.

Word Grunderna 1. Om du kan det allra enklaste i Word, hoppa över uppgifterna A-E. Word Grunderna 1 Om du kan det allra enklaste i Word, hoppa över uppgifterna A-E. A Starta programmet Word. Titta på skärmen efter en bild som det finns ett W på. Tryck med musknappen snabbt två gånger

Läs mer

Imovie - Skapa ett bildspel med bilder och filmklipp

Imovie - Skapa ett bildspel med bilder och filmklipp Imovie - Skapa ett bildspel med bilder och filmklipp 1. Öppna programmet Imovie 2. Under arkiv - välj NYTT PROJEKT OBS!! Döp det till något bra namn! 3. Nu väljer du vilket tema - välj inget tema och klicka

Läs mer

Sidpanelen och gadgetar De är nya. De är smarta. Lär dig hur du använder dem.

Sidpanelen och gadgetar De är nya. De är smarta. Lär dig hur du använder dem. Kap 03.indd 444 KAPITEL TRE Sidpanelen och gadgetar De är nya. De är smarta. Lär dig hur du använder dem. Gadgetar och den nya Sidpanelen är nog mina favoriter bland de nya funktionerna i Windows Vista.

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

LÄR DIG ANVÄNDA DIN MAC. från grunden! Nu med Mac OS X Leopard! Harry Peronius

LÄR DIG ANVÄNDA DIN MAC. från grunden! Nu med Mac OS X Leopard! Harry Peronius Harry Peronius LÄR DIG ANVÄNDA Nu med Mac OS X Leopard! DIN MAC från grunden! Del 1 GRUNDFUNKTIONER 4. Finder... 6 5. Dock... 34 6. Hjälp... 36 7. Mappar och filer... 38 8. Time Machine... 4 9. Systeminställningar...

Läs mer

Lathund för Novell Filr

Lathund för Novell Filr 1(57) Stadsledningsförvaltningen IT-avdelningen Lathund för Novell Filr 2(57) Innehåll 1. Introduktion... 4 2. Termer... 4 3. Icke tillåtna tecken i filnamn... 4 4. ipad... 5 4.1 Installation... 5 4.2

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

Interaktiv skrivtavla Lintex ebeam

Interaktiv skrivtavla Lintex ebeam Interaktiv skrivtavla Lintex ebeam Paletten Pennan Kalibrera tavlan Öppna Powerpoint direkt via paletten Öppna Scrapbooken (lektionsplaneraren) Pilen bredvid tangentbordsknappen visar att det finns fler

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

3.5 Visuell programmering

3.5 Visuell programmering 3.5 Visuell programmering Alla våra program hittills har varit C# Console Applications (sid 41) inkl. programmet MessageBox fast det genererade en grafisk meddelanderuta. Nu vill vi utnyttja grafikens

Läs mer

Symprint Snabbstartsguide

Symprint Snabbstartsguide Symprint Snabbstartsguide Artikelnummer: 12020, 12021, 12022 v.1 0.10 1 Innehåll Välkommen till SymPrint... 3 Installation av medföljande mjukvara:... 3 Komma igång... 4 Skapa nytt dokument från mall...

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

Om man vill ändra färg inuti går det, men skuggan blir densamma.

Om man vill ändra färg inuti går det, men skuggan blir densamma. Visst är det roligt att kunna göra fina dokument, häften, affischer, inbjudningskort och annat skoj?! Och att få bilderna att hamna där du vill att de ska hamna, i rätt storlek och utan att andra saker

Läs mer

KAPITEL 5 Användbara program. Tillbehör. WordPad. Paint

KAPITEL 5 Användbara program. Tillbehör. WordPad. Paint KAPITEL 5 Användbara program Som jag nämnde i inledningen är Windows mycket mer än bara ett operativsystem. Det följer även med ett antal användbara program som är mycket användbara. Du har fått bekanta

Läs mer

Lathund för webbpublicering på Vi Ungas distriktswebbplatser

Lathund för webbpublicering på Vi Ungas distriktswebbplatser Lathund för webbpublicering på Vi Ungas distriktswebbplatser 1 1. Introduktion 3 2. Inloggning 3 3. Publicering av nyheter 4 4. Hantera nyheter 7 5. Snabblänkar 7 6. Sidor 8 7. Händelser 8 8. Distriktets

Läs mer

Migrera till PowerPoint 2010

Migrera till PowerPoint 2010 I den här guiden Microsoft Microsoft PowerPoint 2010 skiljer sig rent utseendemässigt mycket, så vi har skapat den här guiden för att hjälpa dig att snabbare lära dig programmet. Här kan du läsa om de

Läs mer

ANVÄNDARGUIDE. ViTex

ANVÄNDARGUIDE. ViTex ANVÄNDARGUIDE ViTex ViTex snabbguide 1. Inläsning till ViTex från inskannat dokument via kopiatorn 2. Uppläsning i ViTex 3. Navigation & Zoner 4. Ändra inställningar 5. Kontakt och Support 1. Inläsning

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

Nyheter i PowerPoint 2010

Nyheter i PowerPoint 2010 Nyheter i PowerPoint 2010 Nytt utseende Programfönstret i Office 2010 har ett nytt utseende. Likt Office 2003 är Arkiv tillbaka. Som i Office 2007 finns det flikar och grupper i det övre verktygsfältet.

Läs mer

Lathund ClaroRead Plus v6

Lathund ClaroRead Plus v6 Lathund ClaroRead Plus v6 sid 2. sid 3. sid 4. sid 5. sid 6. sid 7. sid 8. sid 9. sid 10. Starta ClaroRead Plus. Inställningar för verktygsraden. Välja röst och språk. Läsa upp text. Inställningar för

Läs mer

Om Publisher Publisher är ett program som passar bra att använda när du vill sammanställa bild och text för att skapa tillexempel broshyrer,

Om Publisher Publisher är ett program som passar bra att använda när du vill sammanställa bild och text för att skapa tillexempel broshyrer, Om Publisher Publisher är ett program som passar bra att använda när du vill sammanställa bild och text för att skapa tillexempel broshyrer, affischer, nyhetsbrev eller flersidiga publikationer som en

Läs mer

Steg 8 OpenOffice Presentation

Steg 8 OpenOffice Presentation Steg 8 OpenOffice Presentation Mac OS X Sept -13 Liljedalsdata.se Liljedalsdata Steg 8 Mac Sida 1 Inledning Förkunskaper Steg 1, 2. Datorns funktion OpenOffice Presentation är ett program som du kan använda

Läs mer

Webbsidekurs för nybörjare

Webbsidekurs för nybörjare Webbsidekurs för nybörjare Hörselskadades distrikt i Stockholms län (www.distriktet.info) Inledande faktaruta Alla HRF föreningar erbjuds möjligheten att kostnadsfritt publicera information på en egen

Läs mer

Lathund till PowerPoint 2002 (XP)

Lathund till PowerPoint 2002 (XP) Lathund till PowerPoint 2002, sid 1(5) Lathund till PowerPoint 2002 (XP) Överblick 1. Arbetsfönstret här jobbar du med dina bilder 2. Överblick här ser du miniatyrer av alla bilder 3. Åtgärdsfönstret här

Läs mer

Snabbguide. ITP Whiteboard har 3 nivåer bas, medel och avancerad. Detta gör att det är enkelt att börja jobba med ITP Whiteboard.

Snabbguide. ITP Whiteboard har 3 nivåer bas, medel och avancerad. Detta gör att det är enkelt att börja jobba med ITP Whiteboard. ITP Whiteboard har 3 nivåer bas, medel och avancerad. Detta gör att det är enkelt att börja jobba med ITP Whiteboard. Verktygsfunktioner i BAS Snabbguide Klicka på det verktyg du vill jobba med. Det verktyg

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

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

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

ORDBEHANDLIG MED OPEN OFFICE.ORG...2 PRINCIPER...2 STARTA PROGRAMMET...2 ARBETSINSTÄLLNINGAR...2

ORDBEHANDLIG MED OPEN OFFICE.ORG...2 PRINCIPER...2 STARTA PROGRAMMET...2 ARBETSINSTÄLLNINGAR...2 MED OPEN OFFICE 1 ORDBEHANDLIG MED OPEN OFFICE.ORG...2 PRINCIPER...2 STARTA PROGRAMMET...2 ARBETSINSTÄLLNINGAR...2 Marginaler...2 Sidnumrering...2 Och sedan Infoga/Fältkommando/Sidnummer...3 Radavstånd...3

Läs mer

Microsoft PowerPoint

Microsoft PowerPoint Microsoft PowerPoint Programmet Microsoft PowerPoint är ett program för att skapa presentationer för skärm eller utskrift. En presentation består av en eller flera bilder. En bild i PowerPoint är en sida

Läs mer

Att skriva på datorn

Att skriva på datorn Att skriva på datorn Innehåll: Inledning 1 Tangentbordet 2 Att skriva i Word 4 Att skriva på Internet 7 Övningar 8 2 Inledning Välkommen till steg 2 av Internetkursen för nybörjare! Vid detta kurstillfälle

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

Handledning för Installation av etikettskrivare

Handledning för Installation av etikettskrivare Handledning för Installation av etikettskrivare Windows 7 Expert Systems 2011 Expert Systems kundtjänst: Senast Uppdaterad: 15-02-23 Exder Etikettskrivare Windows 7 Sida 2 av 23 Innehållsförteckning 1.

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

IdéTorget Manual. Fotoalbum i PowerPoint med berättarröst/spela CD

IdéTorget Manual. Fotoalbum i PowerPoint med berättarröst/spela CD IdéTorget Manual Fotoalbum i PowerPoint med berättarröst/spela CD Handikapp & Habilitering IdéTorget 2009 med funktionerna fotoalbum, berättarröst /spela cd skiva Manualen fungerar från och med PowerPoint

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

Att göra banor med OCAD.

Att göra banor med OCAD. Att göra banor med OCAD. 1 Inledning Detta är en kortfattad handling om vad man behöver och hur man gör för att rita banor i OCAD och få dem utskrivna och levererade. 2 Skaffa program 2.1 OCAD Det första

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

A. Datorn från grunden

A. Datorn från grunden A-1 A. Vad är en dator? En dator är en apparat som du kan utföra en mängd olika uppgifter med t.ex: Skriva och läsa e-post, lyssna på musik, titta på film, spela spel. De olika uppgifterna utförs av program

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

Uppgift 18 Eget programval 2010 02 02

Uppgift 18 Eget programval 2010 02 02 Prezi lathund Vi skall skapa en presentation med hjälp av Prezi. För att använda Prezi behöver man logga in, dvs. skapa ett konto hos Prezi. När man sedan loggat in kan man skapa en ny Prezi. Det första

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

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

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

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

Operativsystem - Windows 7

Operativsystem - Windows 7 Uppgift 5 B Operativsystem - Windows 7 Skapa mappar och undermappar Det finns olika sätt att skapa nya mappar på. Alternativ. Högerklicka på en tom yta. Håll muspekaren över Nytt. Klicka på Mapp Alternativ.

Läs mer

1. Starta programmet 2. Välja projekt antingen redan skapat eller nytt

1. Starta programmet 2. Välja projekt antingen redan skapat eller nytt 1. Starta programmet Först öppnar vi programmet. Antingen finns det i rullningslisten, som jag har längst ner på skärmen. Klicka och programmet startas.1 Om det inte finns där välj program, hitta garageband

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

En grund i bildbearbetning för webben i Photoshop Elements 11

En grund i bildbearbetning för webben i Photoshop Elements 11 En grund i bildbearbetning för webben i Photoshop Elements 11 Mappstrukturering... 2 Arbetsflöde bildbearbetning för webb Beskär... 3 Storleksförändra bild... 4 Skärpa... 5 Spara för webb... 6 Från logga

Läs mer

Manual för banläggning i OCAD8 170706 IF ÅLAND

Manual för banläggning i OCAD8 170706 IF ÅLAND Manual för banläggning i OCAD8 170706 IF ÅLAND Alla filer och program vi behöver finns under katalogen c:/ocad8/. Kartorna vi använder som bakgrundsfiler finns under c:/ocad8/kartor/. De är sedan indelade

Läs mer

Sandsbro AIK - Manual till redaktörer - IdrottOnline Klubb

Sandsbro AIK - Manual till redaktörer - IdrottOnline Klubb Sandsbro AIK - Manual till redaktörer - IdrottOnline Klubb Redigeraläge Startsidan Beskrivning av flikarna Öppna hemsidan: http://www2.idrottonline.se/default.aspx?id=196012 Öppna ditt arbetsrum. Klicka

Läs mer

skapa genvägar till andra sidor (externa och interna)

skapa genvägar till andra sidor (externa och interna) Hotspot skapa genvägar till andra sidor (externa och interna) Du kan låta bilder och/eller text bli knappar för genvägar eller navigering. Genvägarna kan leda till en annan sida i din resurs (intern sida)

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

Förbered och planera bildmanuset

Förbered och planera bildmanuset Del av Kapitel 4: Förbered och planera bildmanuset I detta kapitel kommer du att: Omvandla ditt manus till ett bildmanus Lägga till bildmanusguider Planera för de bilder som ska visas på skärmen Skriva

Läs mer

Beställning till Diakrit

Beställning till Diakrit Februari 2010 Capitex AB Kalmar (huvudkontor): Box 751 Svensknabbevägen 30 391 27 Kalmar Tel vxl 0480-44 74 00 Fax 0480-44 74 01 Stockholm: Gustavslundsvägen 30 167 51 Bromma Tel 08-720 36 50 Fax 08-720

Läs mer

INSPIRA. Microsoft. PowerPoint Grunder

INSPIRA. Microsoft. PowerPoint Grunder INSPIRA Microsoft PowerPoint Grunder Del. ClipArt och bilder 78 6. Diagram 87 7. Organisationsschema 98 8. Tabeller 0 9. Bildspel 0. Praktiska övningar 6 CLIPART OCH BILDER CLIPART OCH BILDER Infoga ClipArt

Läs mer

Användarmanual. Fakturaspecifikation. Trafikverkets system för fakturaspecifikation. Version 1.4, 2010-12-20

Användarmanual. Fakturaspecifikation. Trafikverkets system för fakturaspecifikation. Version 1.4, 2010-12-20 Användarmanual Fakturaspecifikation Trafikverkets system för fakturaspecifikation Version 1.4, 2010-12-20 0 Utgivare: Trafikverket Kontakt: fakturering.jarnvag@trafikverket.se Distributör: Trafikverket,

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