<<Bilder>>

Den här uppgiften handlar om bilder. Vi ska använda oss av photoshop för att skapa några olika bilder och prova spara dem i olika format. Ni ska kunna visa att ni förstår olika filtyper för bilder och vilken filtyp som fungerar bäst beroende på hur den ska användas. Ni ska kunna visa att ni har förmågan att avgöra vilket bildformat som passar bäst i olika tillfällen. Ni ska kunna placera en bild i ett rent html-dokument och placera den i olika nivåer med align. Ni ska också kunna dela in bilder i bildgrupper och sätta en bildtext på en bild

    Tre viktiga regler då det gäller bilder för hemsidor:
  1. Spara bilderna i rätt format, beroende på vad bilden ska användas till.
  2. Spara bilderna i rätt storlek (även fast man kan skala om dem i webbläsaren).
  3. Storleken på en bild mäts oftast i pixlar. Detta kan medföra problem med vissa layouter. Behåll förhållandet mellan bredd och höjd i en bild så långt det är möjligt.

Skapa en bild i photoshop. Den här bilden ska vara 150x100 pixlar stor. Gör två varianter av bilden. En där det finns en bakgrund till objektet och en där bakgrunden är transparent.

Det är valfritt motiv till bilden men ett förslag är att man gör kanske sin drömbil, skoter, hus eller liknande. Ta inte bara en bild från internet och använd rakt av, se till att förändra den. Du kan göra så att den kanske har en annan färg eller annan form.

    Skapa en ny hemsida där du presenterar dina resultat enligt följande uppgifter/frågor:

  1. Visa några exempel på hur man kan anväda align för att placera en bild (se sid 103-106).
    • Skriv en kort text på ca: 100 ord om din bild som du skapat. Texten ska bestå av endast en paragraf utan radbrytningar eller annan utsmyckning. När den visas på skärmen bör paragrafen med text vara ungefär lika hög som bilden.
    • Placera bilden och texten i samma paragraf (<p><img>din text</p>) OBS! du ska sätta ett alt-attribut på din img-tagg så att en, för bilden beskrivande, text syns om bilden misslyckats att visas. Om bilden inte visas så kontrollera sökvägen och kontrollera att du laddat upp bilden på servern.
    • Kopiera din paragraf 5 gånger med en linje emellan för att avkilja de olika paragraferna.
    • Använd align attributet på din img-tagg för att visa på 5 olika placeringar av bilden i förhållande till texten.
    • Skriv en kort förklaring till var och en av de olika align alternativen som förklarar hur bilden placeras.

    Några tips för gif-skapande:

    • Skapa bilden i rätt storlek från början. Det går ibland att minska bilder med bra resultat men ofta kommer du att stöta på problem med pixlar vars färger inte matchar efter att du förminskat/förstorat bilden, så undvik det.
    • I varje bildruta kan ett eller flera lager vara aktiverade, men för att det ska bli så enkelt som möjligt så föreslår jag att du använder endast ett lager per bildruta.
    • Menyn för att skapa din tidslinje finns i Fönster/Tidslinje. Välj sedan Bildruteanimering.
    • Använd knappen för att Duplicera valda bildrutor för att lägga till nya bildrutor
    • När du skapar en transparant gif så använd en maskfärg som liknar bakgrunden där bilden ska finnas för att det ska se så bra ut som möjligt. De exempel-bilder som jag har gjort här nedanför använde en vit maskfärg för att de ursprungligen skulle visas på vit bakgrund. Därför har de en ful vit kant runt omkring sig.
  2. Använd photoshop och skapa en egen animerad gif (rita själv). Den kan se ut till exempel såhär: Prickar eller Grön Prick eller AB Bilden får inte vara större än max 100x100 pixlar.

    3. Ibland vill man gruppera flera bilder. Detta kan man göra i taggen <figure> man kan också lägga en bildtext till en bild med taggen <figcaption>

    AB
    Shaking AB
    Glatt_sidohoppGladfejsPrick
    Prickar som rör sig väldigt tufft!

    Man kan göra en bild som fungerar som en länk genom att sätta in bild inuti en <a>-tagg.

  3. Gör tre egna bilder (eller återanvänd de du skapat tidigare) som du grupperar och sätter en gemensam bildtext till.
  4. Gör så att den mittersta bilden (från övning 3) blir en bild som länkar till en extern webbadress. Länken ska öppnas i en ny flik.

    5. Olika bildformat passar bra till olika användningsområden. Några beskrivs i boken (se sid 109-118) men det finns även andra användbara filformat. Ta en titt på mozilla.org och adobe och undersök några olika filformat. Besvara sedan följande:

  5. Använd dig av en definitionslista och beskriv minst 4 olika filformat som du tycker är bra att använda när man skapar en hemsida.
    • Beskriv dessa filformat, vad de har för för- och nackdelar och vad de bör användas till. Lägg till en bild i det formatet som du beskriver.
    • Använd dig av <figure> och <figcaption>

    6. Alla uppgiftssidor som du skapar ska gå att nå från din startsida. Länka till din index-sida och från index-sidan till den här uppgiften.

Tillbaka till startsidan.
© Andreas Bergsten
Malgomajskolan 2023-24