start uppgifter kod uppgifter DW css html bilder färg & text länkar kursinfo kontakt
intro 1 recept 2 boxar 3 css-klur 4 webbanalys 5 egen sajt

En liten sajt med html och css

Du ska nu göra en egen liten sajt, helt och hållet kodad "för hand" med html-kod och css-kod. Din sajt ska ha minst tre sidor. Du väljer själv vilket innehåll den ska ha, men längre ner på den här sidan följer några krav på vad sajten ska innehålla rent tekniskt. Använd Anteckningar eller någon annan kodeditor för att skriva koden till sajten.

Skisser i Photoshop

De flesta professionella webbdesigners använder först papper och penna och sedan Photoshop för att göra skisser till sina sajter. I Photoshop går det snabbt att göra en skiss över hur sidan ska se ut, prova ut rätt färger, se precis hur det kommer att bli när sidan är färdig. Plus att med en sådan skiss har man något att visa kunden/beställaren, något som är påtagligt utan att man lagt ner timtals med kodningsjobb på det. Det är ju riskabelt att koda sidan helt klart och sedan visa den för kunden - risken är stor att kunden säger nej tack och vill göra en massa ändringar, och då får man göra om allt arbete.

Du ska göra skisser i Photoshop för hur din egen sajt ska se ut. Tänk på att du kanske måste göra flera skisser om dina sidor har lite olika utseende. Försök låta sidorna påminna om varandra, i t ex färgval och grundlayout, så att en besökare känner igen sig på alla sidor.

Lämna in skisserna för bedömning innan du börjar koda sidorna.

Ser man till att lägga varje sak i varsitt lager i Photoshop är det lätt att gå in och ändra färger i efterhand, testa nya kombinationer, flytta runt eller ändra storlek på objekt på sidan, osv. När man är nöjd med skissen är det lätt att börja arbeta med css-koden. Då ser man direkt vilka behållare man behöver på sidan, vilka selektorer och klasser man kan behöva skapa i css-koden och vilka färger man ska arbeta med. Koderna för färgerna kan man hämta direkt från skissen.

 

Tekniska krav

vi vill att din sajt uppfyller följande krav:

Lämna in din sajt innan du går vidare till att jobba med Dreamweaver.