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?