Hur man kan få MVG med Dreamweaver
För att göra det tydligare vad som krävs för ett MVG: Här är ett exempel på vad man kan göra för att visa upp "det lilla extra" för ett MVG.
Tips: Använd google och imponera på mig! Ladda ner Dreamweaver där hemma (finns gratis i 30 dagar) och arbeta med det under julen och lämna in vecka 2 om du stävar efter MVG!
Som alltid, använd hörlurar när ni tittar på filmen (såklart).
Skapa en ny tom mapp med två dokument: index.html och stil.css (skapa nytt textdokument och ändra namn på dem). Tänk på att i index ska allt innehåll finnas, i stil så ska allt utseende finnas!
Skriv in följande i index.html:
<index>
<head><title>Din sidas titel</title>
<link rel=stylesheet href="stil.css" type="text/css">
</head>
<body>
All text och bilder på din sida kommer här.
<p class=bilar>Detta är en text som handlar om bilar, den kommer att vara skriven med typsnittet Arial i storlek 22</p>
<p class=cyklar>Detta är en text som handlar om cyklar, den kommer att vara skriven med typsnittet Times New Roman i storlek 12</p>
</body>
</index>
Testa nu att ändra något, till exempel storleken (size) i stil.css för att se hur storleken på din text ändras. Testa att ändra färg, storlek och plats genom att skriva in nya saker i stil.css. En lista med saker man kan skriva in i stil.css finns här. Valfritt: 1. Skapa fler webbsidor i din mapp (bilder.html) och länka samma stil-dokument (<link rel osv). 2. Lägg in en bakgrundsbild i stil.css och bestäm hur att den inte ska repeteras genom att läsa här.
Tips: Ha uppe både anteckningar och Internet Explorer samtidigt. Spara i anteckningar och ladda om sidan i Internet Explorer med F5-knappen. Stäng inte ner programmen varje gång du vill se dina ändringar, det behövs inte!
Detta ska ni göra idag:
När du känner att du förstår hur ett css-dokument fungerar så går du vidare till nästa uppgift och tittar på filmen.
Idag ska vi jobba mot MVG. Ett av de allra bästa verktygen för att skapa webbsidor idag är Dreamweaver CS5 som ni har på era datorer. Det är ett program som används ofta av personer som arbetar med att göra webbsidor. Titta nedan på den vackra filmen för att lära er hur Dreamweaver fungerar.
Detta ska ni göra idag:
Skapa en webbsida med ett index.html och ett stil.css. Använd en mall från Dreamweaver så som filmen visar.
Rensa bort all engelsk text från mallen i index.html och skriv in egen text.
Ändra stil.css så att det blir andra bakgrundsfärger. Leta efter sexsiffriga koder i stil.css som börjar med ett "#". T.ex: #FF00FF. Exempel på andra koder finns här: färgkoder.
Ändra stil.css så att den vänstra kolumnen är 40% av webbsidan istället för 20%. (Leta efter sidabar1 i stil.css och ändra också content width till 60%)
Lägg till en bild i index.html.
Testa så att sidan fungerar i Internet Explorer, spara allt och skicka in index.html och stil.css till mig. Skicka också in bilden du har använt.
Pröva på att göra en person som bytar ansiktsuttryck. Ladda ner två eller fler olika bilder på en person och för över ansiktet från alla bilder till endast en kropp. Se filmen nedan för hur man ska göra.
Med det ni har lärt er så ska ni nu göra en "laddningsbild" som ni sen ska lägga upp på internet. Se mitt exempel nedan. Ta hjälp av filmen i övning 1 om ni behöver.
Kort genomgång hur man gör:
1. Starta Photoshop
2. Öppna "Window" och sen "Animation".
3. Ändra i de olika rutorna längst ner hur det ska se ut!
4. När du är klar, ta "File" och sen "Save for Web & Device". Spara som gif och skicka in!
Nedan har ni olika exempel på en laddningsbild kan se ut:
Animera en text i Photoshop! Starta photoshop och följ filmen nedan så kommer du lära dig hur man gör animationer. Spara som gif och skicka in på Online! Du får gärna lägga upp den på någon av dina bloggar också och skicka länken på Online istället.
Skapa ett nytt dokument och svara på dessa frågor:
(Har din plats ingen webbsida alls så välj valfritt företag)
Vilken praktikplats ska du vara på? Har företaget en egen webbsida? (Ex Åhlens) Länka till sidan!
›Har lokala praktikplatsen en egen webbsida? (Ex Åhlens Lund) Länka till sidan!
›Hur ser sidorna ut? Vad är snyggt? Fult?
Vad används sidorna till? (Priser? Spel?)
Har ditt företag någon Facebook eller Twitter-sida? ›Vad används de sociala verktygen till?
Hur skulle du förbättra företagets webbsidor och sociala verktyg?
Välj sen av följande sidor som Andreas har gjort själv eller med hjälp av andra. Skriv i samma dokument som ovan en kort analys av sidans design och innehåll. ›Vad är tydligt? ›Vad är otydligt? ›Fria kommentarer!
Innehåll: Nyhetsdel med inlägg av det senaste från ditt företag. Bilder (och filmer) på kläderna du säljer. Kontaktuppgifter (namn, adress, email). Lägg till extra gadgets för bildspel, filmer och annat passande!
Design: Tydlig design! Bakgrunden får du bestämma själv, men gör den enkel, gärna ett enkelt mönster eller en enda färg. Tydlig textfärg. Mycket tomrum. Ta bort topplisten om du använder blogger.com! Byta ut favicon om du kan.
Betyg IG, G eller VG. Jag går runt och betygssätter.
.
Videouppgift 2: Ni ska ta filmmaterial från internet och använda er av valfria effekter, texter och övergångar för att framställa en speciell känsla. Det kan vara att byta ut en tuff musikvideo på youtube med en långsammare låt och rosa ton på filmen för att få det tuffa att istället verka mjukt och gulligt.
1. Börja med att hitta en länk från youtube.com till filmen du vill ha. Kopiera länken.
2. Gå till keepvid.com och klistra in länken i den blåa rutan. Tryck på download. Spara alla stora filmer och ljud på datorn (Hårddisk C). Tänk på att de kommer bara finnas på just den datorn i framtiden.
3. Välj mp4 för film eller mp3 om du bara vill ha ljudet. Tryck "kör" på alla rutor som kommer upp.
4. Lägg in dina filmer i Windows Movie Maker. Försök nu skapa en speciell känsla av din film! (Förslag: kärlek, ilska, hat, glädje, sorg, action, humor).
Var helst noga med så att du inte missar något som du ska göra. Läs vidare:
1. Börja med att kontrollera så din dator har videoredigeringsprogram. Sök efter Windows Live Movie Maker på start-menyn längst ner till vänster! Starta sen programmet.
2. Nu måste ni ha ett bildmaterial att ändra på. Det finns tre sätt som ni kan använda:
a) Spara ner ett antal bilder som hör ihop. Tänk att du ska presentera något!
b) Använd din mobil om du har sladden med dig eller om du kan emaila filmen via 3G.
c) Ladda ner från Youtube en film. Gå till youtube.com och leta upp en film som du vill ändra. Kopiera sen youtubelänken till sidan http://keepvid.com/. Acceptera att sidan använder Java och spara sen mp4-varianten av din film.
Spara ner flera olika klipp och bilder till din dator!
3. Då ditt material antagligen tar mycket plats så spara det på din dator direkt (och inte bland "mina dokument" eller din nätverksenhet!). Du hittar datorn genom att först trycka på startmenyn. Sen på OSDisk (C:). Skapa här en ny mapp "webbdesign". Tänk på att du måste sitta vid samma dator varje gång för att kunna se dina filmer nu!
4. Dra in ditt material till Windows Live Movie Maker och gör en presentation. Den ska flera olika klipp (eller bilder), övergångar mellan dessa och text både mitt i filmen men också i slutet och början! Se filmen till höger om du inte vill testa själv:
5. Till sist ska ni lägga upp den på Youtube! Tryck på youtube-knappen i Windows Live Movie Maker. Logga in med samma uppgifter som ni använde på er blogger.com, eller skapa ett nytt konto. Spara filmen som privat och inte offentlig, speciellt om ni använder upphovsrättsskyddat material, annars kommer Youtube antagligen blockera er.
6. När du ser att filmen fungerar på Youtube, tryck på "Redigera Information" och tryck på "Inställningar" byta sen klippet från Privat till Olistad och tryck på spara. Skicka in länken till din youtubefilm till mig på Online Arena!
Uppgift 1: Lär dig hur man drar in en bild till photoshop, lägger till ett lager och sen ändrar på detta lager. Använd hörlurar när du lyssnar! Använd helskärm så du inte missar något. När du är klar välj File i menyn och sen Save As. Ändra Format till png. Interlace none.Googla fram en egen bild på en person, eller använd denna:
Photoshop Uppgift 2: Byt hudfärg på en person! Välj valfri hel person eller ansikte och ändra hudfärg på personen. Jag vill att ni ska skicka in både originalbilden och den nya till mig! Spara alltid bilderna som png.
Photoshop Uppgift 3: Byt bakgrund bakom en person eller föremål. Följ guiden nedan om du behöver. Glöm inte att använda hörlurar! Markera runt personen och skapa ett nytt lager, testa olika bakgrunder! Skicka både original och den nya till mig!
Uppgift 4: Photoshoppa en text så att den får en bakgrund i texten. Följ guiden, men glöm inte att använda hörlurar! Börja med att googla fram en valfri bakgrund och fundera på vilken text du vill ha. Gör flera olika texter! Spara alla dina bilder som du gör i photoshop i png.
Uppgift 5: Ändra levels på en för mörk eller för ljus bild. Skapa en layermask för att bara göra en viss del av bilden ljusare/mörkare. Skicka in tre bilder till mig: 1 Originalet, 2 bilden där du bara ändrat levels och 3 bilden som har bara vissa delar mörkare/ljusare. Förslag på bild till höger:
Uppgift 6: Snygga till huden på en person, pröva på hur fotografer ändrar på bilder av modeller. Välj en valfri bild eller bilden till höger och följ guiden nedan för att ändra på ojämnheter i bilden. Skicka sen både original och den ändrade bilden till mig.
Exempelbilder från din lärare Andreas Palmblad här:
Uppgift 7: Använd valfritt verktyg till att klippa bort en person i en gruppbild. Försök göra det så det ser ut som att den personen aldrig var där! Spara som png och skicka både original och ändrad bild till mig på Online Arena.
Spara båda bilderna som png och skicka i båda fallen både original och ändrad bild till Online Arena!
För att ta bort den lilla raden från blogger längst upp på din sida så gör du såhär:
1: Gå till http://blogger.com sen Design och Malldesigner.
2: Tryck på Avancerat och gå längst ner i den lilla listan.
3: Tryck på Lägg till CSS.
4: Kopiera in den här koden och tryck på spara:
#navbar-iframe {
display: none !important;
}
.
5: Spara med den gula knappen lägst upp till höger.
6: Ta sen bort "Bloggarkiv" och "Om mig" från din hotellsida för att göra den snyggare!
7: Gå till Design på blogger.com och tryck "redigera" på de rutor du vill ta bort!
