Labora&on 7 Färger och bilder för webben övningar i Pixlr Editor 1M321 Webbteknik 1, 7,5hp Medieteknik 2015 Rune Körnefors rune.kornefors@lnu.se
1. Ladda ner arbetsdokument Till övningarna i denna labora&on finns det en zip- fil som innehåller en mapp med några webbsidor och bildfiler. Länk &ll zip- filen finns på labora&onens webbsida. I mappen (glaswebb) finns: tre HTML- dokument (index.htm, about.htm och course.htm) Öppna HTML- dokumenten i din webbeditor för ay se koden. Öppna dem också i webbläsaren för ay se hur de visas där. HTML- koden innehåller img- taggar för några bilder, men dessa kan ännu inte visas. Bilderna ska du skapa i de följande övningarna. Istället visas nu texten i alt- ayributet. ey CSS- dokument (style.css) DeYa innehåller kod för ay skapa sidornas layout och en del andra s&linställningar. Öppna dokumentet i webbeditorn för ay se koden. I övningarna ska du sedan kompleyera denna kod, genom ay bl.a. ta in ey par bakgrundsbilder. en mapp kallad pics I denna mapp ska du lägga de bilder som du skapar i övningarna. en mapp kallad originalbilder I denna mapp ligger de bilder som du ska utgå ifrån i övningarna.
2. Bildredigeringsprogram I dessa övningar ska du öva på ay redigera några bilder för ay anpassa dem &ll en webbplats. Bilderna kommer ay beskäras på olika säy, förändras i färguppsäyning och konverteras &ll format som jpeg och png som används på webben. Bilderna ska användas som bakgrunder och illustra&oner på webbplatsen i HTML- och CSS- kod. Vi &Yar också på hur vi säyer bakgrundsfärg. Instruk&onerna gäller för hyp://pixlr.com/editor/. Svensk version. Observera ay Pixlr:s menyer visas högst upp i webbläsarens fönster. Önskat språk väljer du i menyn Språk.
3a. Bakgrundsbild för navigeringsmenyn I denna övning ska du utgå från bilden pipor.jpg och skapa en bild som dels ger en bakgrund &ll navigeringslänkarna och dels en illustra&on av webbplatsens innehåll. Bilden ska beskäras och förses med en logotyp. Bilden ska användas som bakgrund &ll blocket nav. I CSS- filen är bredden på nav say &ll 200 pixlar. Lagom höjd på bilden kan vara 600 pixlar, sedan kommer resten ay fyllas ut med lämplig bakgrundsfärg. Bilden ska bli som vidstående bild. Beskär och förminska bilden Öppna filen pipor.jpg i bildredigeringsprogrammet. Välj verktyget för ay beskära (Beskärningsverktyg). I övre delen av programmets fönster visas två rutor där du kan skriva in önskad storlek. Välj Output size och skriv in storleken 200 och 600. Klicka sedan i bilden och dra en rektangel, för ay markera den yta som visas i ovanstående figur. Markeringen ska gå från övre &ll nedre kanten av bilden och rama in glaspiporna. Det går ay dra rektangeln och ändra storlek på den, även eder det ay du ritat den. Dubbelklicka i rutan, för ay bekräda markeringen. Då beskärs bilden och förminskas &ll den valda storleken. Dubbelklicka sedan på förstoringsglaset (Zoomverktyg) i verktygspaleyen, för ay visa bilden i 100% storlek i fönstret.
3b. Bakgrundsbild för navigeringsmenyn Lägg på en logotyp Öppna filen logo.jpg i bildredigeringsprogrammet. Du ska nu kopiera hela bilden och klistra in den i din bild med piporna. Markera allt (Redigeraà Markera allt) och kopiera (Redigeraà Kopiera). Gå över &ll fönstret med bilden på piporna och klistra in (Redigeraà Klistra in). Bilden med logon hamnar då i ey lager framför den andra bilden. Välj förflyyningsverktyget (FlyEningsverktyg) och dra bilden &ll önskad plats (c:a en halv cen&meter från vänster- och överkanten). Nu ska du ta bort den gröna färgen i logon. Välj markeringsverktyget (Trollspö). Skriv in 60 i rutan för Tolerans i den övre delen av programmets fönster. Se också &ll ay AnI- alias är valt och ay Angränsande inte är valt. Det sista valet gör ay det inte bara är angränsande pixlar som väljs, utan alla pixlar med den färg som du sedan klickar på. Klicka någonstans i den gröna ytan i bilden Då markeras ytan och alla andra pixlar med samma färg. Däreder väljer du Redigeraà Klipp ut (eller trycker på backstegstangenten) Markerad del tas då bort. Välj sedan Redigeraà Avmarkera allt Då tas markeringen bort.
3c. Bakgrundsbild för navigeringsmenyn Spara bilden för användning på webben Bilden ska nu sparas i jpeg- format. DeYa är ey format som komprimerar bilden och man får då välja kvalitét. Komprimerar man mycket, blir filstorleken liten, men kvalitén på bilden blir kanske dålig. Vill man ha mycket hög kvalitét, blir kanske filen istället onödigt stor. Så man får kompromissa. Välj Arkivà Spara... I fönstret som du då får ser du &ll ay formatet är JPEG och väljer kvalitet 50. Klicka sedan på OK och spara bilden med namnet navbar.jpg i mappen pics. Vill du även spara bilden i Pixlr- format, för ay kanske sedan redigera den vidare, väljer du kommandot Arkivà Spara... och formatet PXD.
3d. Bakgrundsbild för navigeringsmenyn Använd bilden i CSS- mallen Öppna filen style.css i din editor för HTML och CSS. I s&len för nav lägger du &ll följande: background- image:url(pics/navbar.jpg); background- repeat:no- repeat; Bilden används då som bakgrundsbild. Den ska inte repeteras. Öppna filen index.htm i webbläsaren och studera resultatet. Har du &llräckligt stort fönster i din webbläsare (mer än 600 pixlar högt), så ser du ay den grå bakgrundsfärgen som finns med i s&len för nav kommer under bilden, för ay fylla ut hela fönstrets höjd. Denna grå nyans är dock lite för ljus, så du ska nu byta &ll samma grå färg som finns längst ner i bilden. Gå över &ll bildredigeringsprogrammet och ifall du hade stängt bildfönstret, öppnar du din bild igen. Ta reda på färgkoden för den grå nyansen längst ner. Välj färgpipeyen (Färgväljarverktyg) och klicka i den grå ytan längst ner i bilden. Färgen som du klickar på kommer då in i verktygspaleyens färgruta. Klicka på färgrutan, så får du ey fönster för färginställning. I högra halvan i det fönstret finns det en ruta där färgkoden står i fältet markerat med # (t.ex. 3c3a34). Kopiera deya värde och klicka sedan på Avbryt för ay stänga fönstret igen. Gå över &ll CSS- filen i editorn igen och byt bakgrundsfärg för nav: background- color:#3c3a34; Klistra alltså in den kod som du hade kopierat. Studera resultatet i webbläsaren. Lägg &ll följande kod i s&len för nav ul: margin- top:150px; DeYa ger listan med navigeringslänkarna en övre marginal på 150 pixlar. Eventuellt får du justera värdet, beroende på var du placerade logon i din bild. Studera resultatet i webbläsaren.
4a. "Gradient" bakgrundsbild för sidans innehåll Du ska nu skapa en bakgrund som gradvis övergår från viy &ll samma orange färg som du har i glasugnen på föregående bild. Vi kommer här ay &Ya på två alterna&v för deya. Det första alterna&vet är ay använda en bakgrundsbild och det andra alterna&vet är ay använda gradient CSS- s&l. Bakgrundsbild Bilden ska göras som en smal remsa (1000 pixlar bred och 20 pixlar hög) som ska upprepas på webbsidan. Bilden ska bli som nedanstående bild (visas här förminskad). Skapa ea nya bilddokument Skapa ey nyy dokument som är 1000x20 pixlar i bildredigeringsprogrammet. Välj Arkivà Ny bild... I fönstret som då dyker upp väljer du storleken 1000 och 20 för bredd respek&ve höjd. Klicka däreder på OK, så får du en ny tom bild.
4b. "Gradient" bakgrundsbild för sidans innehåll Fyll med ea gradient mönster Du ska nu göra en gradient övergång från en vit färg i vänsterkanten &ll en orange färg i högerkanten. Den orange färgen ska ha koden FFAA00 (som ungefär är färgen för en av de ljusa nyanserna i glasugnen). Välj verktyget för gradient färg (Gradientverktyg). I programfönstrets överkant visas inställningar för verktyget. Klicka på färgrutan för Gradient. Du får då en ruta med ey antal mönster. I den övre delen finns två "pilar" I den första är det vit färg och den andra svart färg. Klicka på den högra pilen, så kommer dess färg ner i rutan för Färg. Klicka i färgrutan. Skriv in koden FFAA00 i rutan markerad med #. Klicka sedan på OK. Klicka utanför rutan med alla mönster, så ay den döljs. Peka i bildens miy och tryck ned musknappen. Dra sedan åt höger &ll högerkanten och släpp upp musknappen. Bilden fylls då med ey gradient mönster.
4c. "Gradient" bakgrundsbild för sidans innehåll Spara bilden för användning på webben Välj Arkivà Spara... Välj formatet JPEG och kvalitet 80. Klicka sedan på OK och spara bilden med namnet bg.jpg i mappen pics. Använd bilden i CSS- mallen Nu ska du använda bilden som en bakgrundsbild på webbsidorna. Öppna filen style.css i din editor. Längst ner i filen lägger du &ll följande: main {background- image:url(pics/bg.jpg); background- repeat:repeat- y;} Det finns visserligen redan en s&l för main i filen, men det går bra ay lägga &ll en ny. Båda kommer ay användas &llsammans av webbläsaren (CSS är ju en kaskad av s&lar). Bilden tas in som en bakgrundsbild och upprepas i y- led så ay hela ytans höjd fylls. Öppna filen index.htm i webbläsaren och studera resultatet. Om du har ey brey fönster i din webbläsare (bredare än 1200 pixlar), så ser du ay det är ey viy utrymme &ll höger om den gradienta bakgrunden. Det beror på ay bakgrundsfärgen för body är say &ll vit färg i CSS- filen. Du ska nu lägga &ll en gul bakgrundsfärg för main. Lägg &ll följande i din nya s&l för main i CSS- filen: background- color:#ffaa00; Färgen säys &ll den färg som den gradvisa övergången slutar med. Studera resultatet i webbläsaren. Ändra fönstrets storlek och se hur det blir i olika storlekar.
5a. "Gradient" bakgrundsfärg för sidans innehåll Vi ska nu se på ey alterna&vt säy ay få en gradient bakgrund, genom ay använda inställningar i CSS. DeYa ingår i CSS3, men är ännu inte standardiserat och implementerat på samma säy i webbläsarna. Så därför får man använda ey antal olika koder, för ay det ska fungera i alla (vanliga) webbläsare. Vi ska här utgå från ey exempel som finns på följande url: hyp://www.w3schools.com/css/css3_gradients.asp Kod i CSS- filen Skriv in följande kod för main i CSS- filen: main { /*background- image:url(pics/bg.jpg); background- repeat:repeat- y; background- color:#ffaa00;*/ background:- webkit- linear- gradient(le[,#fff,#f80); /* For Safari 5.1 to 6.0 */ background:- o- linear- gradient(right,#fff,#f80); /* For Opera 11.1 to 12.0 */ background:- moz- linear- gradient(right,#fff,#f80); /* For Firefox 3.6 to 15 */ background:linear- gradient(to right,#fff,#f80); /* Standard syntax */ } Omge den gamla koden med /* och */. Då "kommenterar vi bort den", men den finns ändå kvar, ifall vi vill återgå &ll den. Sedan följer ey antal alterna&va koder för ay skapa en gradient färg från vit &ll orange färg. Det är den sista koden som är den som är föreslagen som korrekt kod i CSS3. Jag valde här färgen F80 istället för FA0, som jag hade i bilden i övning 4. Det blir en lite mörkare nyans, vilket jag tyckte passade bäyre. Men ändra gärna &ll den färgnyans du vill ha. Studera resultatet i webbläsaren. Ändra fönstrets storlek och se hur det blir i olika storlekar.
5b. Jämförelse av de båda säyen i övning 4a- c och 5a Vi har nu sey två olika säy ay skapa en liknande effekt. Men det finns en del skillnader. Gradient bakgrund med bild: Det kräver ay vi skapar en bild och ay webbläsaren måste läsa in bilden. Det blir yyerligare en fil ay läsa in, vilket kan vara en nackdel i mobila enheter med långsam nätanslutning. Vi är friare i hur den gradienta övergången ska ske. I deya exempel börjar vi med en helvit bakgrund, som i miyen av sidan övergår &ll en orange bakgrund. Gradient bakgrund med CSS: Vi slipper någon extra fil som ska läsas in. Den gradienta övergången sker i hela det block där den finns, så vi kan inte bestämma var i blocket den ska ske.
6a. Bilden med glasformning på ingångssidan Nu ska du skapa en bild som ska användas som illustra&on på ingångssidan. Du ska utgå från bilden formning.jpg och ta bort bakgrunden i den, förminska den och spara den i png- format med en transparant (genomskinlig) bakgrund. Bilden ska bli som vidstående bild. Beskär och förminska bilden Öppna bilden formning.jpg i bildredigeringsprogrammet. Du ska nu beskära bilden, så ay du endast får med handen och verktygen. Sedan förminskar du bilden så ay den blir 500 pixlar bred. Dessa moment har du uuört &digare för de andra bilderna i övningarna, så här ges endast korta förklaringar. Använd verktyget för ay beskära (Beskärningsverktyg). SäY storleken &ll 500 både för höjd och bredd. Klicka i bilden och dra en markering, så ay du endast får med handen och verktyget. Dubbelklicka sedan i rutan, för ay uuöra beskärningen. Förstora bilden med förstoringsglaset (Zoomverktyg), så ay du ser bilden i 100%. Eventuellt förstorar du även fönstret, så ay du ser hela bilden. På webbsidan ska bilden vara ännu mindre, men den sista förminskningen gör vi i webbsidans kod. DeYa ska vara en bild med en transparant bakgrund och då kan den bli lite "hackig" i kanterna. För ay minimera denna effekt, förminskar vi den lite även då vi tar in den på webbsidan. Om det inte är en transparant bild, så är det bäyre ay förminska den &ll önskad storlek i bildredigeringsprogrammet. Då får vi dels en bäyre kvalitet och dels en mindre bildfil. Men nu handlar det alltså om en bild som ska få en transparant bakgrund.
6b. Bilden med glasformning på ingångssidan Gör bilden ljusare Bilden är ganska mörk, så gör den nu ljusare. Välj Justeringarà Ljushet & Kontrast... I fönstret som dyker upp drar du i reglagen för ay ändra ljushet och kontrast. Gör bilden ljusare, ungefär +15. Kontrasten kan du dra ner något, ungefär - 5. Klicka sedan på OK. Ta bort bildens bakgrund Du ska nu sudda ut bakgrunden i bilden, så ay endast handen och verktygen återstår. Det kan vara ganska pilligt och &dskrävande arbete med ay ta bort bakgrunden. Då du tar bort bakgrunden i bilden får du en vit bakgrund, som sedan ska göras genomskinlig så ay webbsidans bakgrund lyser igen. Det är vik> ay vara noggrann då du tar bort bakgrunden, annars kan det sedan se hackigt ut då bilden tas in på webbsidan. Då du förståy nedanstående princip för hur man gör, så kan du istället öppna filen formning_avmaskad.jpg och utgå från den, för ay spara &d i övningen. Välj radergummit (Suddningsverktyg). Radergummit är kanske för stort, så i fönstrets överkant klickar du på siffran med en pil under. Du får då en ruta, där du kan välja en annan storlek, t.ex. 15. Sudda sedan i bilden de delar som ligger runtom handen och verktyget.
6c- 1. Bilden med glasformning på ingångssidan Gör en mjuk övergång från bakgrunden Hll bilden Utgå nu an&ngen från din egen avmaskade bild eller bilden i filen formning_avmaskad.jpg. Bilden ska nu få en transparent (genomskinlig) bakgrund och sam&digt en mjuk övergång. DeYa kräver lite tricks. Börja med ay skapa ey lager med transparent bakgrund och ta sedan bort den vita ytan i bilden. Skapa ey nyy lager med Lagerà NyE lager. I lagerpaleyen dubbelklickar du på hänglåset &ll höger i bakgrundslagret, för ay låsa upp det. (Det är alltså lagret med bilden.) Dra sedan lagret uppåt, så ay det hamnar ovanför det nya lagret. Välj markeringsverktyget (Trollspö). I den övre delen av programmets fönster kontrollerar du inställningar för verktyget och ser &ll ay Tolerance är 30 och både AnI- alias och Angränsande är valt. Angränsande gör ay det endast är sammanhängande pixlar som väljs och inte alla med samma färg. Klicka i den vita delen av bilden och välj Redigeraà Klipp ut (eller tryck på backstegstangenten). Den markerade delen tas då bort. Upprepa det, så ay båda de vita ytorna tas bort. fortsäening på nästa sida
6c- 2. Bilden med glasformning på ingångssidan fortsäening från föregående sida Nu ska du skapa en mjuk övergång &ll handen och verktyget. Välj markeringsverktyget i verktygspaleyen. I fönstrets övre kant klickar du på den ellip&ska markeringen. I rutan för Feather skriver du in 20. Peka i bildens övre vänstra hörn, tryck ned musknappen och dra ner &ll det undre högra hörnet, så ay hela bilden markeras med en cirkel. Välj Redigeraà Invertera markeringen Då ändras markeringen, så ay det är ytan utanför cirkeln som är markerad. Välj Redigeraà Klipp ut (eller tryck ned backstegstangenten). Den markerade delen tas då bort. Välj sedan Redigeraà Avmarkera allt. Du har nu fåy en mjukare övergång &ll handen och glaspipan.
6d. Bilden med glasformning på ingångssidan Spara bilden för användning på webben Bilden ska nu sparas i formatet png, så ay den transparenta delen behålls. Välj Arkivà Spara... Välj formatet PNG och klicka på OK. Spara sedan bilden med namnet formning.png i mappen pics. Se hur bilden blir på webben I HTML- filen index.htm finns det redan en img- tagg som tar in bilden på webbsidan, så du behöver nu endast &Ya på resultatet. Öppna filen index.htm i webbläsaren och studera resultatet. Förminska bilen Bilden ska nu också förminskas i sidans kod. Öppna filen index.htm i din editor. Skriv in ey width- ayribut i img- taggen: <img src="pics/formning.png" alt="glasformning i glasbruk" width="350"> Studera resultatet i webbläsaren. Ändra fönstrets storlek och se ay bilden hela &den ligger i fönstrets högerkant.
7a. Bilden med kartan Du ska nu redigera bilden med Europakartan. Antalet färger i denna ska reduceras &ll endast två. Färgen för haven ska göras transparent och färgen för landområdena ska väljas &ll en orange/brun färg som passar &ll övriga färger på sidan. Bilden ska bli som vidstående bild. Öppna bildfilen Öppna filen europe.png i bildredigeringsprogrammet. Gör haven transparenta Gör på samma säy som i föregående övning, dvs skapa ey nyy tomt lager och lägg det underst. Ta sedan bort det som ska vara genomskinligt i kartan. Skapa lagret med Lagerà NyE lager. Dubbelklicka på hänglåset i bakgrundslagret (med kartan), för ay låsa upp det. Dra lagret med kartan uppåt, så ay det ligger överst. Välj markeringsverktyget (Trollspö). Klicka bort markeringen av Angränsade i den övre delen av programmets fönster. Då blir det inte bara pixlar som angränsar &ll varandra som markeras, utan alla pixlar i bilden med den färg som du sedan klickar på. Klicka i den gröna ytan på kartan, för ay markera alla gröna pixlar. Välj Redigeraà Invertera markeringen, för ay istället markera allt utom de gröna pixlarna. Ta bort markerade pixlar genom ay välja Redigeraà Klipp ut (eller tryck ned backstegstangenten). Ta inte bort markeringen. Den behövs i nästa steg, så låt den vara kvar.
7b. Bilden med kartan Byt ut den gröna färgen i kartan Nu ska du byta kartans färg &ll en mörkbrun färg. Välj Redigeraà Invertera markeringen, för ay växla om &ll den gröna ytan igen. Klicka i den stora färgade (eller svarta) rutan längst ner i verktygspaleyen. Välj en mörkbrun färg. Observera ay du måste dra i de runda prickarna både i den omgivande cirkeln och den inre romben, för ay välja färg. Klicka på OK, då du hiyat den färg du vill ha. Välj penseln (Målarpenselverktyg) i verktygspaleyen. Peka på bilden och tryck ned musknappen. Håll den nedtryckt och måla över hela kartan. Det är endast den markerade delen som målas, dvs den del som var grön. Välj Redigeraà Avmarkera allt, för ay ta bort markeringen.
7c. Bilden med kartan Spara bilden för användning på webben Bilden ska nu sparas i formatet png, så ay den transparenta delen behålls. Välj Arkivà Spara... Välj formatet PNG och klicka på OK. Spara sedan bilden med namnet europe.png i mappen pics. Se hur bilden blir på webben I HTML- filen about.htm finns det redan en img- tagg som tar in bilden på webbsidan, så du behöver nu endast &Ya på resultatet. Öppna filen about.htm i webbläsaren och studera resultatet.
8a. Bilden med formning av glasfot I denna övning ska du skapa bilden som visar hur två glasbruksarbetare säyer på en glasfot på ey vinglas. Detaljen med glasfoten ska kopieras och läggas in som en förstoring på bilden. Sedan ska du spara hela bilden som en miniatyr, som ska användas i länken på webbsidan. Bilden ska bli som vidstående bild. Öppna bildfilen Öppna filen glasfot.jpg i bildredigeringsprogrammet. Kopiera delen som ska vara förstorad Innan du förminskar bilden, ska du kopiera den del som ska vara förstorad. Välj markeringsverktyget i verktygspaleyen. I fönstrets övre del väljer du ellipsen och Constraint &ll Aspect raio. Då kommer markeringen ay bli en cirkel. Dra en cirkel runt den del som glasarbetarna arbetar med. Hamnar inte cirkeln räy, så kan du peka i den och dra den &ll önskad plats. Kopiera den markerade delen med Redigeraà Kopiera. Denna del ska sedan klistras in eder det ay hela bilden förminskats.
8b. Bilden med formning av glasfot Förminska bilden Du ska nu förminska hela bilden &ll 600x450 pixlar. Välj Bildà Bildstorlek... I fönstret som dyker upp skriver du in 600 i den övre rutan för Bredd (450 fylls då i automa&skt i rutan för Höjd, om Behåll proporionerna är markerad). Klicka sedan på OK. Förstora bilden &ll 100% med förstoringsglaset (Zoomverktyget) Om det behövs, förstora fönstret så ay hela bilden syns. Klistra in den kopierade delen Nu ska du klistra in den del som du &digare kopierade och anpassa dess storlek och placering. Välj Redigeraà Klistra in. Delen med glasfoten kommer in i ey nyy lager. Ändra storlek: Välj Redigeraà Free transform. Ta tag i ey av hörnen och dra inåt så ay bilden förminskas. Håll ner shi[- tangenten, så behålls propor&onerna. Peka och dra miy i rutan för ay flyya bilden &ll önskad plats. Då du förminskat och placerat bilden så som visas i bilden härin&ll, klickar du utanför den markerade ytan. Svara Yes i den dialogruta som kommer upp, för ay bekräda den transformering du gjort.
8c. Bilden med formning av glasfot Lägg på en skugga på bilden Du ska nu lägga på en "glödande skugga" på bilden i cirkeln. Lagret med cirkeln ska vara markerat i Lagerpanelen (&ll höger om bildfönstret). Om det inte är det, klickar du på det, så ay det markeras I underkanten av panelen finns det några små knappar. Klicka på den tredje av dessa (Layer styles). Då dyker det upp ey fönster med några val. Välj Outer glow, så får du också några reglage. Om reglagen inte dyker upp, får du kanske klicka en gång &ll på Outer glow. Klicka inte bara i rutan, utan på texten. Klicka på färgrutan och välj vit färg. Dra sedan i reglagen, så ay storleken blir c:a 30 och opaciteten c:a 60. Klicka sedan på OK. Du har nu fåy en "skugga" på den förstorade delen av glasfoten.
8d. Bilden med formning av glasfot Spara bilden för användning på webben Bilden ska nu sparas i formatet jpeg. Välj Arkivà Spara... Välj formatet JPEG och dra ner reglaget för kvalitet &ll 50. Spara bilden med namnet glasfot.jpg i mappen pics. Ifall du vill fortsäea och redigera bilden senare, sparar du även bilden i PXD- format med Arkivà Spara... Spara en miniatyrbild för länken Du ska nu förminska bilden &ll en miniatyrbild som du kan ha i länken på webbsidan. Välj Bildà Bildstorlek... Skriv in 100 i rutan för Bredd och klicka på OK. Välj Arkivà Spara... Välj formatet JPEG och kvalitet 30. Spara bilden med namnet glasfot_liten.jpg i mappen pics. Se hur bilden blir på webben I HTML- filen index.htm finns det redan HTML- kod för bilden, så du behöver nu endast &Ya på resultatet. Öppna filen index.htm i webbläsaren och studera resultatet. Klicka på länken med den lilla bilden.
Slut Experimentera nu med ay på egen hand förändra bilderna. Arbeta också med de bilder du ska ha på din webbplats för uppgid U3.