Tillbaka till "Bakgrund och färger"  Kunskapstest

Övningsuppgifter - Bakgrund och färger
1. Ändra färg på bakgrund och text

Öppna först din stilmall och ta bort eventuell värden för background-color i BODY och för color i P. Spara stilmallen.

Öppna din hemsida i textredigeraren. Ändra utseende på den:

  • Lägg in värden för bakgrundsfärg och text i BODY-taggen. Pröva med olika kombinationer. Spara efter varje ändring och kontrollera hemsidan i webbläsaren. Spara hemsidan med färgvärden angivna i BODY-taggen.
  • Öppna stilmallen och lägg in värden för background-color i BODY och color i P. Pröva med både färgnamn för standardfärgerna och hexadecimala RGB-värden. Spara stilmallen och kontrollera hemsidan i webbläsaren. Blir det någon skillnad?
  • Öppna hemsidan igen och ta bort färgvärdena i BODY-taggen. Spara hemsidan och kontrollera resultatet i webbläsaren. Blir det någon skillnad?
  • Pröva dig fram tills du har en bra kombination av bakgrundsfärg och textfärg. Du avgör själv om du vill ha dessa värden i stilmallen eller i BODY-taggen.
  • Vilken upplösning har du på skärmen? Är den större än 800x600 bör du ställa om till det värdet och kontrollera hur din hemsida ser ut då. Det är den upplösningen de flesta av dina besökare kommer att ha. Pröva också med att ändra till färre färger.
2. Ändra utseende på enstaka textstycken

Öppna hemsidan i textredigeraren. Välj ut textstycken eller kanske bara enstaka ord som du vill framhäva. För varje ändring sparar du hemsidan och kontrollerar resultatet i webbläsaren.

  • Ändra färg på dessa textstycken, genom att använda FONT-taggarna med egenskapen color.
  • Ändra teckensnitt genom att utnyttja egenskapen face.
  • Ändra storlek på texten genom att använda egenskapen size. Pröva med både relativ storlek och absolut storlek.
  • Ändra textens utseende genom att använda <I>- och <B>-taggarna.
  • Skapa olika kombinationer av de här egenskaperna, tills du får ett utseende som du är nöjd med. Då sparar du hemsidan igen.
3. Skapa en egen bakgrundsbild

I stället för att använda en färdig bakgrundsbild kan du göra en egen. Gör bilden till exempel 10x800 pixlar stor. Den här bilden kommer att upprepas ned över hela hemsidan, så du bör göra den så att det inte uppstår tydliga skarvar. Använd bara ett fåtal färger och spara bilden med filändelsen *.gif (små bokstäver).

Lägg nu in din bakgrundsbild på hemsidan. Pröva med att göra det både via stilmallen och via BODY-taggen. Spara sidan och kontrollera resultatet i webbläsaren. Justera bilden tills du blir nöjd med resultatet.

Om du vill kan du försöka göra en ännu mindre bild, cirka 80x80 pixlar, och utforma den så att du får en så skarvfri bakgrund som möjligt när bilden upprepas över hela sidan, på både längden och tvären. Det kan vara litet pilligt att få bort skarvarna helt, men med litet övning går det.

4. Lägg in en färdig bakgrundsbild

Längst upp på den här sidan, och längst ned, hittar du länken till en sida med ett urval bakgrundsbilder. 

  • Pröva att lägga in någon av bilderna på din hemsida - gör det både med stilmallen och med BODY-taggen, och undersök resultatet av båda metoderna i webbläsaren.
  • Du kan ta upp de sparade bilderna i ditt grafikprogram och ändra dem som du vill. Spara den ändrade bilden och lägg in den på hemsidan. Pröva med olika bilder tills du har en snygg bakgrund.

Du avgör själv vilken metod som är bäst - att använda en ren bakgrundsfärg eller en bild; att använda en bakgrundsbild som har sidans bredd eller en mindre bild som upprepas även på tvären; att lägga in bilden från stilmallen eller från BODY-taggen.

I nästa avsnitt skall vi jobba mycket med Bilder, men inte med bakgrunder. Då handlar det i stället om att placera bilder rätt, att välja rätt bilder, att välja rätt del av bilderna och att göra bilderna små och snabbladdade.

Gå gärna tillbaka till föregående sida och titta på det avsnittet igen, innan du gör Kunskapstestet.
Tillbaka till "Bakgrund och färger"  Kunskapstest

© SupportData.Net