_(Anja 3. t.)
4. time:
Gjennomgang:
Ble vi ferdige med å se gjennom festivalsidene?

Oppgave:
Gjør festivalsidene klar til kjapp presentasjon. Kopier hele siten fra skrivebordet og legg den på mediaserveren.

Gjennomgang:
Vi presenterer så langt vi er kommet på festivalsidene.

5. time:
Teori:
Tilpasse spry-widget menu DW

Oppgave:
Sett inn en meny fra DW i eget dokument (du kan gjerne lage et ordentlig css-oppsett om du ønsker trene mer på det)
Menyen skal bestå av minimum 5 lenker, hvorav 2 av disse skal ha nedtrekksmuligheter.
Alle linkene skal gå til eksterne sider.

Spørsmål som skal besvares på siden:
Er det lurt å gjøre ferdig alle linker på indexsiden før man starter å lage de andre sidene?
Hvorfor / hvorfor ikke?

Avslutning:
Logge

6. time:
Samling:
Kristins siste dag på jobb før hun går ut i permisjon, vi har en felles avslutning / kosetime med 1mka

__(Anja 8. timer)
1. time:
Intro:
Hvordan ligger vi an? Hva skjer denne uka?

Teori:
Repetisjon CSS3
Jquery intro (alle skal følge med, men dette er ikke pensum)
http://www.queness.com/post/1743/create-a-fast-and-simple-toggle-view-content-with-jquery


Videotut:
https://www.youtube.com/watch?v=aFtByxWjfLY&feature=related

2. - 7. time:
Oppgave:
Dere skal lage et nettsted hvor temaet er MUSIKKFESTIVAL.
Kriterier:
-Alle skal prøve å sette inn divene selv, dersom alt krøller seg til er det lov å bruke kopiering av grunnoppsettet slik vi har gjort før, men ikke før dere har prøvd på egenhånd.
- Egenkomponert header og favicon (vi skal se på hvordan dette settes inn neste uke)
- en index.html side + minimum 5 undersider
- galleri
- Youtube / vimeo snutt
- Et innslag av css3
- gjennomtenkt og konsekvent fargevalg

Deadline er tirdag 30.10.12 kl. 14.45

Hjelp hverandre! Dere er flinke!! Lykke til!!


8. time:
Gjennomgang:
Vi ser gjennom musikkfestivalsidene.

Oppsummering:
Logg

_(Mariann 2. t, Anja 5. t)
1. -2. time:
Oppgave:
- Bruk internett til å finne ut mest mulig om hva CSS er. Lag et lysbildeshow på 10 lysbilder. Last opp på slidshare. Embed din presentasjon under fagstoff på weeblyen din.
Vær innstilt på at kanskje nettopp din presentasjon skal vises i klassen.
- Fullfør filmnettstedet (Har du for eksempel husket å legge inn title på alle sidene, er fargevalget fornuftig, passer headeren med stilen ol.)
- Lag minimum 2 headere + et favicon til et nettsted hvor temaet er musikkfestival.

X-tra oppgave om ferdig:
lag flere headere, øv deg på å sette opp en site, opprette en index + en css fil på egenhånd. Følg css sett-inn-selv

3.  -4. time:
Presentasjon:
Hva er css?? 4 heldige vinnere får vise sin presentasjon til klassen.
Oppsummering:
Hva har vi fått til? Vi ser på noen av nettstedene deres.
Oppgave:
Fargeark, klipp og lek: Nå skal vi virkelig forstå CSS
Gjennomgang:
Begynner vi å forstå??

5. time:
Teori:
Innføring / Repetisjon CSS3
Jquery intro (alle skal følge med, men dette er ikke pensum)

6. – 7. time:
Oppgave:
Dere skal lage et nettsted hvor temaet er MUSIKKFESTIVAL.
Kriterier:
-Alle skal prøve å sette inn divene selv, dersom alt krøller seg til er det lov å bruke kopiering av grunnoppsettet slik vi har gjort før, men ikke før dere har prøvd på egenhånd.
- Egenkomponert header og favicon (vi skal se på hvordan dette settes inn neste uke)
- en index.html side + minimum 5 undersider
- galleri
- Youtube / vimeo snutt
- Et innslag av css3
- gjennomtenkt og konsekvent fargevalg
Deadline: tirsdag 30.11.12 kl 13.00

Avslutnig:
Logg + Plan for neste uke..

_(Tilsyn til og fra 2. t. + Anja 1.t.)
6 - 8. time:
Videotut:
Alle SKAL se gjennom
http://tv.adobe.com/watch/learn-dreamweaver-cs5/gs07-understanding-style-sheets/

eller

http://itfag.net/innforing-i-css/  
(norsk litt grundigere forklaring dersom du er usikker på hva som egentlig skjer med css)

Oppgave:
Dere jobber videre med filmnettstedet eventuelt starter med et nytt nettsted med samme tema (FILM). Du kan enten kopiere malene slik vi gjorde da vi startet øvingsoppgaven, eller du kan prøve de på «sett inn selv» som vi gikk gjennom felles på onsdag. Tenk design, farge og bildebruk. Vær kritisk til eget produkt, tenk sammenheng og målgruppe.

Dersom ting stopper opp i Dreamweaver i løpet av timene Anja er på VIP (6. og 7. t) kan dere enten bruke tiden på å prøve å kikke på flere instruksjonsvideoer på ITfag eller Adobe TV, eller dere kan lage minimum to headere og favicon til neste øvingsoppgave som blir å lage et nettsted for en musikkfestival. Velg sjanger selv.

Avslutning:
Logge om i går og i dag.

_(Anja 1. t. + VIP 2.t.)
4. time:
Gjennomgang:
CSS – sett inn selv.
Videotut:
Alle skal se gjennom:
http://tv.adobe.com/watch/learn-dreamweaver-cs5/gs07-understanding-style-sheets/

eller

http://itfag.net/innforing-i-css/   (norsk litt grundigere forklaring dersom du er usikker på hva som egentlig skjer med css)

Oppgave:
Jobbe videre med filmnettstedet / begynne på nytt

Avslutning:
Hva gjør vi i morra + logge

6. – 7. time:
VIP:
Dere får besøk av helsepersonell og skal fortsette med VIP som dere startet i uke 41.

__(Anja 8. timer)
1. - 2. time:
Intro:
Hvordan ligger vi an? Hva skjer denne uka?

Video tut:
Alle skal se gjennom:
http://tv.adobe.com/watch/learn-dreamweaver-cs5/gs01-defining-a-new-site/
http://tv.adobe.com/watch/learn-dreamweaver-cs5/gs02-creating-new-documents/

Oppsummering:
Hvilke muligheter har vi på nett?

Gjennomgang:
malhovedside + malgrunnoppsett (felles)

3. - 4. time:
Oppgave:
1. Klikk deg inn på M,1mkb, web, Grunnoppsett. (event under css på weebly)
2. Åpne filen malhovedside, og malgrunnoppsett (Dette er to tekstfiler skrevet i notepad).
3. Opprett en ny site som du kaller film_navn.
4. Velg new document, blank page, html, none, create. Lagr denne nye siden som du får opp som index.html i den nyopprettede siten din.
5. Finn fram til malhovedside. (Tekstfilen skrevet i notepad). Trykk på ctrl+a slik at alt blir markert, deretter trykker du på ctrl+c for å kopiere.
6. Gå tilbake til DW. Plasser markøren i code på indexsiden din. Trykk på ctrl + a slik at alt blir markert, trykk deretter på ctrl + v slik at all teksten fra notepad blir limt inn på indexen og dermed erstatter den eksisterende teksten.
7. Trykk på lagring.
8. Velg file new, css, create
9. Finn fram til malgrunnoppsett. (Tekstfilen skrevet i notepad). Trykk på ctrl+a slik at alt blir markert, deretter trykker du på ctrl+c for å kopiere.
10. Gå tilbake til DW. Plasser markøren i det nye css dokumentet sitt. . Trykk på ctrl + a slik at alt blir markert, trykk deretter på ctrl + v slik at all teksten fra notepad blir limt inn i css.filen og dermed erstatter den eksisterende teksten.
11. Velg file, save as, malgrunnoppsett. Pass på at formatet du lagrer i er css
(Hvorfor er det viktig at vi får riktig navn på denne filen? Jo fordi vi skal jo linke den opp til indexen vår. Om vi kikker nærmere etter i <head> på indexen ser vi her at denne er linket til nettopp det navnet)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Navngi de ulike sidene på en fornuftig måte</title>
<link href="malgrunnoppsett.css" rel="stylesheet" type="text/css" />
</head>
NB. Det er fult mulig å linke til et annet stilark, da må vi bare passe på at linken til css’en  i html dokumentet, samsvarer med navnet på css’en.

HUSK at det lønner seg å gjøre ferdig index’en med alle linker og lignende før man lager de andre sidene.

Lag et nedttsted med minimum en hovedside og tre undersider. Tilpass farge på linker, h1 og p. Dere må også legge inn et klipp fra youtube.com, samt laste opp bilder og legge inn et galleri på siden.


Temaet er film. Tenk på teorien vi har gjennomgått i timene.
Deadline er fredag 26.10.12 kl. 10.00

5. time:
Teori:
Hvordan sette inn galleri fra Bridge i DW.
Hvordan sette inn youtubeklipp

5. - 8. time:
Oppgave:
Jobbe videre med filmnettstedet.

Tips:
1. Bestem dere for hvordan designet, farger, linker, logo. Header  og lignende skal være og gjør index.html siden ferdig. (Surf litt rundt på nett i forkant og få inspirasjon og lignende.)

GJØR FERDIG HELE DESIGNET PÅ INDEXEN: DETTE ER FORELØPIG DEN ENESTE SIDEN DU HAR… Når du er fornøyd med farger, logo og lignende… Se punkt 2 og videre.

2. Dersom en av ”knappene” heter SKUESPILLERE,  markerer dere denne og legger deretter inn en link til SKUESPILLERE.html i property inspectoren nederst i dw. Heter den neste av ”knappene” FILM, markerer dere denne og legger deretter inn en link til FILM.html i property inspectoren nederst i dw). OSV….til dere er ferdig.
3. Når dere har lagd + linket alle knappene, står dere på index.html siden, velger: file, save as , og gir den navnet SKUESPILLERE.html. Skriv deretter SKUESPILLERE i dokumentvinduet på denne siden slik at den skiller seg ut fra index.html, når det er gjort åpner dere index.html igjen, velger file, save as FILM.html. Skriv deretter FILM i dokumentvinduet på denne siden slik at den skiller seg ut fra index.html Fortsett denne prosessen til dere har laget sider til alle knappene.
4. Trykk på f12, og forhåpentligvis kan du navigere fra side til side uten problemer.
5. Putt i tekst og bilder som passer på hver av sidene.
Husk hva vi har snakket om i timene… Konsekvent fargevalg, stil, fonter og lignende.


Dere kan gjerne også legge inn et klipp fra youtube.com, samt laste opp bilder og legge inn et galleri på siden. Dette er valgfritt, men om dere har lyst er det lov til å prøve…

Galleri: Se om dere husker hva jeg viste dere i timen. Saml bildene dere vil ha i galleriet i en mappe, åpne bridge, finn fram denne mappen, marker alle bildene i mappa (dette gjøres enklest ved å trykke på ctrl+a), trykk på den lille pilen til høyre for metadata (oppe på menylinjen, ganske langt til høyre, øverst i bridge) velg output. (hurtigtast for dette er ctrl+f5)
Kjenner du igjen vinduet? Velg et av galleriene, tilpass farge og lignende. Husk at du gir galleriet et navn. Pluss at du velger siten du holder på med når du browser nede på save location.

For å sette inn galleriet kikker dere på: http://1mkb12-13.weebly.com/html-galleri-ol.html
Videoer  fra eks youtube kopierer dere embed-koden og limer denne inn. Husk at dere må lime embed inn i koden, ikke rett i dokumentvinduet.

Hjelp hverandre! Dere er flinke!! Lykke til!!

Oppsummering:
Hva har vi forstått? Logg + hva skjer i morgen?

(Anja 3. t.)
4. -5. time:
Gjennomgang:
Hva jobbet dere med i går. Muntlig gjennomgang  nettsteds-, sammenligning-, og slideshare oppgave. (Vi ser på de individuelle artiklene deres neste uke)

Teori:
Hvordan sette inn galleri fra Bridge i DW.

Oppgave:
Høstnettsted fra maloppsett DW. Felles gjennomgang på tavla.

6. time:
Teori:
CSS

Gjennomgang:
mal hovedside + mal grunnoppsett

Avslutning:
Hva gjør vi til uka + logge

___(Egil 8. timer ( 3. t. tilsyn + 5 t.))
1. - 4. time:
Intro:
Hva skjer i dag?
Anja er borte. Egil ser til 3 første timer + er inne etter det.

Oppgave
Dere jobber individuelt. Bruk tida fornuftig!

1. Bruk tid på internett. Finn fram til 4 ulike nettsted:

- Ett dere liker
- Ett dere misliker
- Ett som dere syntes kommuniserer bra
- Ett som dere syntes kommuniserer dårlig

Hvorfor har du valgt disse. (farger, skrifttype, mengde tekst, bilder ol)
Noter ned punkter / begrunnelser for hvert av nettstedene.
Felles gjennomgang (onsdag) hvor alle presenterer sine sider.

2. Sammenlign burton.com  expert.no  thejohnnycashproject.com
Hensikten med denne øvingsoppgaven er å bli mer bevisst på hvordan nettsider kommuniserer og er strukturert.

Ta utgangspunkt i følgende moment når du jobber med oppgaven:
•    Hva er formålet med nettsiden?
•    Hvem er målgruppen?
•    Hvordan er den visuelle oppbyggingen (Hvordan ser siden ut)?
•    På hvilken måte kommuniserer siden med brukeren?
•    Hvilke muligheter for kommunikasjon tilbyr siden?
•    Kommuniserer siden godt med deg, hvorfor / hvorfor ikke?
Lever på mediaserveren. M, 1mkb, web, sammenlign. Merk besvarelsen med navnet ditt. 
(en av ordenselevene oppretter denne innleveringsmappen mappen)
Muntlig gjennomgang onsdag.

3. Powepoint
Lag en powerpoint på minimum 10 – maximum 20 slides hvor du noterer ned viktige ting du mår tenke på når du skal designe et nettsted. (Tips: les gjennom presentasjonene dere finner på http://1mkb12-13.weebly.com/webdesign.html)



4. – 6. time:
Teori:
Å skrive for skjerm + hvordan opprette konto og laste opp på slideshare.net

Oppgave:
Last opp powerpointen du lagde i forrige time  på slidesharekontoen din, og publiser deretter på weeblyen.(kopier embedkoden fra slideshare, og lim inn på weebly (dra ned den det står custom html på, akkurat som dere gjorde når dere limte inn vokien deres…))
NB Husk å skrive med egne ord, samt bruke bilder som er rettighetsklarert.

Skrive for nett:
1. Fagartikkel som skal presenteres på  weeblyen din under fagstoff. (se liste under om hva DU skal skrive om) Vi skal også ha en muntlig gjennomgang. Oppgaven er individuell.
Tema til nettartikkelen FAGLIG:
- Internetts historie (Adrian, Caroline)
- Hva er internett? (Susann, Markus)
- Creative Commons (Gerda, Trond)
- Skrive for nett (Guro, Rebekka )
- Fildeling (Aleksander)
- Nettlesere (Kristine, Sivert)
- Sosiale medier (Vanja, Catrine)
- Blogging (Emil, Julie)
- Open source (Sigurd)
- Søkemotorer (Camilla)

Deadline: kl. 13.50

7. – 8. time:
Oppgave:
Du skal i dag og i morra jobbe med å opprette et nettsted hvor temaet er høst.  Det første du må gjøre er å finne ut hva slags type nettsted du vil ha. Skal det presentere høstens klesmoter, høstmat, jakt, vær ol. Når du har bestemt deg skal du åpne photoshop og lage:

- 2 headere (bilde som skal være på toppen av siden) til dette nettstedet.
Størrelsen skal være w: 780px & h: 90px  (du kan fritt bruke bilder ol fra nett, dette skal ikke publiseres…)
 -2 logoer størrelsen skal være w: 180px & h: 90px
 -2 favicon Størrelsen skal være w: 64px & h: 64px eller 32px x 32px

Tips: Sjekk ut www.kuler.adobe.com for å finne fargekombinasjoner.

Dersom du blir ferdig kan du prøve på å opprette nettstedet ditt ved å følge oppskriften under (tilpassing av mal dw). Hjelp hverandre. Aleksander har testet dette en gang og kan gjerne vise på lærermaskinen hva han gjorde om han har lyst.  Det blir gjennomgang med Anja onsdag.

Oppgave
Høstnettsted:
Åpne DW, opprette site, velge oppsett fra mal.
NB siten må lagres på mediaserveren da vi skal ha en felles gjennomgang.
Velg:2 column fixed, left sidebar, header and footer.
Tilpass malen. Sett inn bilder fra nett + dummy tekst. Bruk litt tid på ¨finne ut hva som skjer når du endrer farger og lignende i css styles paletten:
Temaet er: HØST
Tips:
1. Bestem dere for hvordan designet, farger, linker, logo. Header  og lignende skal være og gjør index.html siden ferdig. (Surf litt rundt på nett i forkant og få inspirasjon og lignende.)

GJØR FERDIG HELE DESIGNET PÅ INDEXEN: DETTE ER FORELØPIG DEN ENESTE SIDEN DU HAR… Når du er fornøyd med farger, logo og lignende… Se punkt 2 og videre.

2. Dersom en av ”knappene” heter EPLE, markerer dere denne og legger deretter inn en link til EPLE.html i property inspectoren nederst i dw. Heter den neste av ”knappene” JAKT, markerer dere denne og legger deretter inn en link til JAKT.html i property inspectoren nederst i dw). OSV….til dere er ferdig.

3. Når dere har lagd + linket alle knappene, står dere på index.html siden, velger: file, save as , og gir den navnet EPLE.html. Skriv deretter EPLE i dokumentvinduet på denne siden slik at den skiller seg ut fra index.html, når det er gjort åpner dere index.html igjen, velger file, save as JAKT.html. Skriv deretter JAKT i dokumentvinduet på denne siden slik at den skiller seg ut fra index.html Fortsett denne prosessen til dere har laget sider til alle knappene.
4. Trykk på f12, og forhåpentligvis kan du navigere fra side til side uten problemer.
5. Putt i tekst og bilder som passer på hver av sidene.
Husk hva vi har snakket om i timene… Konsekvent fargevalg, stil, fonter og lignende.

x-tra oppgave (event om du ikke får til tilpassing av mal)
- 2 headere w. 1000px & h: 100px  
-2 logoer størrelsen skal være w: 70px & h: 100px
-2 favicon Størrelsen skal være w: 64px & h: 64px eller 32px x 32px
Du kan fritt bruke bilder ol fra nett, dette skal ikke publiseres. Temaet er musikkfestival.

x-tra/ x-tra oppgave

Tilpass en valgfri mal i Dreamweaver. Husk å opprette en site pluss strukturer mappene dine. Temaet til dette nettstedet kan du velge selv.
Avslutning:
Logg om hva som har vært jobbet med i dag.

__(Mariann 2. t, Anja 5. t)
1. time:
Oppgave:
Bruk litt tid på nett. Hvordan er ulike nettsted designet, hva funker, hva funker ikke? Finn en blogg / nettsted som skriver om webdesign, sosiale medier, hvordan nettet fungerer, trender og lignende. Denne bloggen skal du følge gjennom hele perioden. Send adressen på it’s til anha120.

Tips til nettsted som kan litt inspirasjon:
Nrkbeta :skriver om internett og ny teknologi
Six Revisions : Nyttig info for webutviklere og designere
WDL: Spennende artikler om hva som skjer på fagområdet
99designs:  webdesign som er kommet for å bli
2013, hvilke retning beveger vi oss i?

Klikk deg inn på linkene over, og skriv en kort artikkel om hva som var trendene innen web i året som gikk, samt hvilke forventninger man har til 2013. Lever på mediaserveren. M, 1mkb, web, trender. Merk besvarelsen med navnet ditt.  + legg inn under fagstoff på Weeblyen din.

2. time:
Brukeropplæring:
Bli kjent med Anne og biblioteket

3. time:
Oppsummering:
Hva jobbet vi med på tirsdag?
Oppgave:
Fullføre notisblokkoppgaven.
Gjennomgang:
Notisblokk

4. time:
Teori:
- Kort om Dreamweaver
- Webdesign_prosessen

Gjennomgang:
- Bli kjent med DW
- Hvorfor og hvordan opprette en site?
- Hvordan opprette et nytt dokument?
Oppgave:
- Sette inn samme oppsett som notisblokk-oppgaven tidligere.(7. – 8. time tirsdag)


5. – 6. time:
www.sau.no   www.ulv.no  www.elg.no
Oppgave:
Klikk deg inn på pdf’en ”Bli kjent med Dreamweaver” og følg anvisningen. Tenk gjennom det du gjør, prøv å forstå mest mulig.
Gjennomgang:
Hvordan gikk det med sau, elg, ulv?

6. – 7. time:
Gjennomgang:
Tilpassing av mal, linke sammen sider. 
Velg:2 column fixed, left sidebar, header and footer.
Oppgave:
Tilpass malen. Sett inn bilder fra nett + dummy tekst. Husk å lagre en site.Temaet er: HØST
Tilpassing av mal, linke sammen sider. 
Velg:2 column fixed, left sidebar, header and footer.

Oppgave:
Åpne DW, opprette site, velge oppsett fra mal.
NB siten må lagres på mediaserveren da vi skal ha en felles gjennomgang.
Velg:2 column fixed, left sidebar, header and footer.
Tilpass malen. Sett inn bilder fra nett + dummy tekst. Bruk litt tid på ¨finne ut hva som skjer når du endrer farger og lignende i css styles paletten:
Temaet er: HØST
Tips:
1. Bestem dere for hvordan designet, farger, linker, logo. Header  og lignende skal være og gjør index.html siden ferdig. (Surf litt rundt på nett i forkant og få inspirasjon og lignende.)

GJØR FERDIG HELE DESIGNET PÅ INDEXEN: DETTE ER FORELØPIG DEN ENESTE SIDEN DU HAR… Når du er fornøyd med farger, logo og lignende… Se punkt 2 og videre.

2. Dersom en av ”knappene” heter EPLE, markerer dere denne og legger deretter inn en link til EPLE.html i property inspectoren nederst i dw. Heter den neste av ”knappene” JAKT, markerer dere denne og legger deretter inn en link til JAKT.html i property inspectoren nederst i dw). OSV….til dere er ferdig.

3. Når dere har lagd + linket alle knappene, står dere på index.html siden, velger: file, save as , og gir den navnet EPLE.html. Skriv deretter EPLE i dokumentvinduet på denne siden slik at den skiller seg ut fra index.html, når det er gjort åpner dere index.html igjen, velger file, save as JAKT.html. Skriv deretter JAKT i dokumentvinduet på denne siden slik at den skiller seg ut fra index.html Fortsett denne prosessen til dere har laget sider til alle knappene.
4. Trykk på f12, og forhåpentligvis kan du navigere fra side til side uten problemer.
5. Putt i tekst og bilder som passer på hver av sidene.
Husk hva vi har snakket om i timene… Konsekvent fargevalg, stil, fonter og lignende.

Teori:
Hvordan kan vi bruke adobe bridge til å lage et galleri? Eks.
Bruk av Iframe for plassering av galleri.
Galleri:
Se om dere husker hva jeg viste dere i timen. Saml bildene dere vil ha i galleriet i en mappe, åpne bridge, finn fram denne mappen, marker alle bildene i mappa (dette gjøres enklest ved å trykke på ctrl+a), trykk på den lille pilen til høyre for metadata (oppe på menylinjen, ganske langt til høyre, øverst i bridge) velg output. (hurtigtast for dette er ctrl+f5)
Kjenner du igjen vinduet? Velg et av galleriene, tilpass farge og lignende. Husk at du gir galleriet et navn. Pluss at du velger siten du holder på med når du browser nede på save location.

For å sette inn galleriet i iframe, sjekk fagstoff, koder, hvordan sette inn galleri.

Oppgave:
Last ned noen HØSTbilder, lag et galleri, og legg dette inn på Høstnettstedet ditt.

Ekstra
Dersom noen blir ferdige velger dere en annen type mal, og så setter dere opp et nytt nettsted. (samme måte som høstoppgaven). Samme ”oppskrift”. Tema = mobil

Deadline: kl 14.45

Avslutnig:
Logg + Plan for neste uke..

_(Kristin 3. t.)
6 - 8. time:
Gjennomgang:
VIP
(klassens time om tid på slutten)