Digitalt Skapande och IT med Andreas Palmblad: Webbdesign

Syfte: Att kunna skapa webbsidor snabbt är ett måste när man ska visa upp något eller göra marknadsföring för en produkt eller idé. Detta oavsett om du vill skapa en webbsida för butiken du äger eller för något du har skapat själv.

Modul1: Skapa en blogger-blog utan topbar

Gå till http://blogger.com logga in med ditt google-konto eller skapa ett nytt! Kolla runt i alla menyer och skapa en snygg sida för något du gillar eller vill marknadsföra. Glöm inte att ta bort menyn "navbar" längst upp! När bloggen är klar så kopierar du in länken till bloggen i en kommentar till ditt google-dokument.

Gå till minut 4:15 för att se hur man lägger in Viktigt om hur man ta bort navbar, gadgets
ett youtube-klipp som modul! och ändrar favicon. Detta bör alla göra!

Modul 2: Skapa en enkel html-sida

Alla websidor skrivs i koden html, högerklickar du på denna sida och väljer att visa koden så ser du hur den här sidan är uppbyggd. Naturligtvis skriver man inte all den koden själv för hand utan använder sidor så som blogger.com eller program så som Dreamweaver, men det är bra att känna lite kod ändå.

För att träna in att skapa sidor i html så logga in på http://www.codecademy.com/ och träna igenom Web Fundamentals!

I ditt google dokument skriver du in som kommentar tillräckligt med taggar för att det ska bli en grundläggande sida med någon länk, bild och text!

Modul 3: Skapa en sida i dreamweaver

Ett av de allra bästa verktygen för att skapa webbsidor idag är Dreamweaver CS6. Ladda ner Dreamweaver (finns gratis i 30 dagar). 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:

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.

Här är ett exempel på vad man kan göra för att visa upp "det lilla extra" i Dreamweaver.

Tips: Använd google och imponera på mig!