Planering Webbdesign distans

Kurslitteratur: Vi använder oss av Webdesignskolans tjänster, som du hittar på adressen
http://www.webdesignskolan.se/
Plus annat material som finns på webben.

Du behöver alltså inte köpa någon kurslitteratur, men vill du ha en kursbok så kan jag rekommendera nedanstående.

Webbdesign

Planeringen är indelad i veckor. Du kan givetvis arbeta i din egen takt. Men kursen ska vara klar senast vecka 22. Slutbedömningen blir den webbplats du själv skapat med hjälp av de verktyg och kunskaper du inhämtat på kursen.

Vecka

 Uppgifter

2

Läs igenom avsnittet ”Grunderna i HTML”.
http://www.webdesignskolan.se/html/html_grunderna.php

Gör övningen som finns i 1: avsnittet "Grunderna i HTML"
Bifoga filen till mig med e-post.

Min adress är: bo.ekdahl@horby.se

Skriv i brevet också ner namnen på de vanligaste webbläsarna, som du känner till.

Se till så att du har minst två webbläsare installerade på din dator.
Förutom Internet Explorer bör du ha Firefox också. Du hämtar den här:
http://www.mozilla.com/sv-SE/

3

Läs igenom och arbeta med avsnitten Färger och Text

http://www.webdesignskolan.se/html/grunder/html_farger.php

http://www.webdesignskolan.se/html/grunder/html_text.php

Pixie, en praktisk färgplockare hittar du här: http://www.nattyware.com/pixie.php

Praktisk lista med färgnamn finns här: http://www.endprod.com/colors/colors.htm

4

Läs igenom och arbeta med avsnitten Listor, Grundkod för HTML-sidor, Bilder, Bakgrunder och Sidmarginaler.

http://www.webdesignskolan.se/html/grunder/html_listor.php

http://www.webdesignskolan.se/html/grunder/html_bilder.php

http://www.webdesignskolan.se/html/grunder/grundkod.php

http://www.webdesignskolan.se/html/grunder/html_bakgrunder.php

http://www.webdesignskolan.se/html/grunder/html_sidmarginaler.php

5

Läs igenom och arbeta med avsnittet Länkar

http://www.webdesignskolan.se/html/grunder/html_lankar.php

WYSIWYG-editorer är program som använd för att skapa webbsidor/webbplatser. De underlättar webbsideskapandet betydligt.

Det finns många program för detta. Här är några:

• SeaMonkey. Det är en all-in-one application, som ständigt utvecklas och uppdateras. Den är gratis och kan laddas ner härifrån: http://www.seamonkey-project.org/
  
  

  Hjälpdokument om hur man använder SeaMonkey. Finns också under Hjälp i programmet.
  

   

• Microsoft Frontpage. Version 2003 är den senaste och sista versionen.
   

• Adobe Dreamweaver. Ett av de mest använda programmen.

Sedan kan man använda de vanliga Office-programmen Word, PowerPoint, Publisher. Tänk bara på att du måste spara som Webbsida för att sidan ska kunna öppnas i en webbläsare.

Inlämningsuppgift 1   Klicka på länken till vänster så öppnas ett PDF-dokument med instruktioner.

Läs igenom avsnittet Sidmarginaler, som finns i Webdesignskolan.

http://www.webdesignskolan.se/html/grunder/html_sidmarginaler.php

6

Läs igenom och arbeta med ljudavsnittet.

http://www.webdesignskolan.se/html/ljud/html_ljud.php

Hämta ljudfiler (med olika format) på nätet.

Lägga in ljud på olika sätt i webbläsaren.

Spela in eget ljud med Windows ljudinspelare. Lägg sedan in ljudet på din webbsida.

Du hittar ljudinspelaren via Tillbehör – Underhållning.

Här kan du lära dig mer om ljud och även lyssna (ladda ner) ljudeffekter och musik.

http://www.multimedia.skolverket.se/

Inlämningsuppgift 2  Klicka på länken till vänster så öppnas ett PDF-dokument med instruktioner.

Läs igenom de tre sista delarna i HTML-grunder.

- HTML-editorer - webstandards - doctypes – DTD.

- Dokumenttyp - doctypes, XML och XHTML.

- webbläsare och säkerhet.

7

Läs igenom och arbeta med:

http://www.webbdesignskolan.com/html/ftp-program/ftp-program.php

och

http://www.webdesignskolan.se/webbhotell/webbhotell.php

Inlämningsuppgift 3 Klicka på länken till vänster så öppnas ett PDF-dokument med instruktioner.

9

Läs igenom och arbeta med:

http://www.webbdesignskolan.com/upplosning/upplosning.php

Tips på gratis bildbehandlingsprogram:

GIMP hittar du här: http://www.gimp.org/

Photofiltre kan du ladda ner från den här sidan:http://pim.skolverket.se/xp/handledningar/Om-PIM/Programvaror-i-PIM/2/

Här hittar du en manual till PhotoFiltre:

http://www.multimedia.skolverket.se/upload/2475/Photofiltre%206.0.pdf

Har du tid över?

Testa dina kunskaper här: http://www.w3schools.com/quiztest/quiztest.asp?qtest=HTML

10

Arbeta med egna bilder,
och

Inlämningsuppgift 4

Nedan finns en länk till ”Lag om upphovsrätt till litterära och konstnärliga verk”

http://www.riksdagen.se/sv/Dokument-Lagar/Lagar/Svenskforfattningssamling/Lag-1960729-om-upphovsratt-_sfs-1960-729/?bet=1960:729

11

Obs! Kompetensutvecklingsdag = Inga lektioner idag fredagen den 16 mars

Arbeta med att skapa enklare animeringar i programmet Easy GIF Animator.

Programmet kan laddas ner och användas 20 gånger som trial-version.

Kan laddas ner härifrån: http://www.blumentals.net/egifan/download.php

Det finns andra program man också kan använda.
T.ex. Picasion, där du laddar upp bilder, som görs om till animerad gif.

Inlämningsuppgift 5: Gör minst två gif-animeringar
(de får se ut hur som helst, använd fantasin). Infoga dem i en webbsida och skicka den till mig. Obs! Glöm inte att bifoga gif-bilderna också.

 Figurerna här är mina egna försök till animeringar.

Här kan du få mer inspiration.
http://www.creationguide.com/animated_gifs/

12

Läs igenom och arbeta med:

http://www.webbdesignskolan.com/html/tabeller/tabeller.php

Gå igenom koderna för tabell. Använd Anteckningar och/eller SeaMonkey för att testa de olika exemplen med koder och attribut. Enklast är att kopiera koderna och klistra in.

Prova sedan att göra tabeller direkt i SeaMonkey, Frontpage och Word. Det vill säga, skriv inte kod utan använd verktygen som finns i programmen. Granska koden som programmen genererar. När det gäller Word så tänk på att spara dokumentet i filformatet Webbsida. Så du kan öppna det i en webbläsare.

Inlämningsuppgift 6:

Gör en webbsida som du designat med hjälp av en tabell.

13

Läs igenom och arbeta med: Ramar (Frames)

http://www.webbdesignskolan.com/html/frames/frames.php

http://www.webbdesignskolan.com/html/iframe/iframe.php

Uppgift 7, Obs! Uppgiften behöver inte lämnas in, men spara webbsidorna i din mapp.

Gör en webbplats med valfri ramstruktur, men med minst 3 sidor. Använd programmet Anteckningar, SeaMonkey eller Frontpage 2003. Till Frontpage finns en manual. Den kan du inspireras av.

Frontpage-manual

15

Läs igenom och arbeta med:

CSS (Cascading Style Sheets) = Stilmallar

http://www.webbdesignskolan.com/css/css.php

Uppgift 8: Skapa en extern stilmall och skicka den till mig.

Stilmallen ska innehålla formatering för: bakgrund, teckensnitt, textstorlek, färger, länkar, rubriker, listor och tabeller.

16

Prova på att göra en blogg.

Bloggen ni skapar ska ni sedan anpassa på olika sätt. Designa, skriva inlägg och ladda upp bilder, bland annat.

Tjänsten är gratis och man kan vara helt anonym, om man så vill.

Här ser du min blogg. Inte så uppdaterad just nu, men ändå: http://boekdahl.blogg.se/

Du kan använda http://blogg.se/ för den här uppgiften. Eller någon annan bloggtjänst.

Klicka här för att skapa din egen blogg. http://publishme.se/signup/

Uppgift 9: Skicka ett e-postmeddelande med adressen (länken) till din blogg.

Tag också ett foto och ladda upp det till din blogg.

17

Läs igenom och arbeta med: CSS – positionering (boxar – containers – containing block)

http://www.webbdesignskolan.com/css_position/css_position.php

18

Arbete med projektarbetet. Egen webbplats.

Inlämningsuppgift:

Skriv och lämna in en designbeskrivning på hur du tänker utforma din webbplats.

• beskriv syftet med sidan
• sidornas uppbyggnad, beskrivning och skiss

19

OBS! Jag är inte här på lektionen idag den 11 maj. Kolla själva igenom hur man arbetar med Movie Maker och Photo Story.

Redigera digital video i programmet Movie Maker.

http://www.pim.skolutveckling.se/xp/handledningar/video/

Redigera en video som du länkar in på din webbplats.

Du kan också använda Photo Story, som du kan ladda ner här. Av foton kan du skapa en film, lägga till texter och även ljud.

Här kan du se en film som jag gjort i Photo Story

20

Gå igenom följande avsnitt om du har tid och/eller intresse. Här finns mycket att lära för den som vill fördjupa sina kunskaper i webbdesign.

http://www.webdesignskolan.se/css-effekter/css-effekter.php

http://www.webdesignskolan.se/css-meny/css_meny.php
http://www.webdesignskolan.se/css-layout/css_layout.php
http://www.webdesignskolan.se/css-layouter-exempel/css-layout-mallar.php

21

Inlämningsuppgift med avseende på upphovsrättsregler.

Klicka här för att få fram dokumentet. Svaren på frågorna skickas till mig med e-post.