Posts Tagged 'css'

Dreamweaversajt, del 3(liten avstickare)

Här visar jag hur man jobbar med att skissa fram en webbdesign. Mkt. basic med penna och papper, typ!

Det som hände sen var att eleverna:

  1. fick analysera sin sajtidé till midsommarfesten
  2. skissa upp sin design på rutat papper.
  3. förklara hur de hade tänkt för en kompis
  4. kompisen fick sedan återge hur designen skulle fungera.
Diskussion följde och därefter fick eleverna uppgiften att göra ”look-and-feel” designen i photoshop/illustrator! Detta kommer vi att fortsätta med även nästa lektion.
Annonser

Dreamweaversajt, del 2

Här visar jag hur man gör en meny i form av en osorterad lista <ul> och stylar den med hjälp av en formatmall, sk. css(cascading style sheet). Detta återanvänds sedan på alla sidor på sajten.

indesigna lite mera…

Här kollar vi på hur man använder Character styles, hur man monterar en bild, en text och hur man kan få linjerad text med baslinjeraster.

del 1:

del2:

boxlayout II

Ett annat sätt att lösa samma sak som vi höll på med igår, fast utan absolut positionering utan med ett mer dynamiskt förhållningssätt:

Prova på att göra om din design på detta sätt också(gör nu en kopia, så du kan se skillnaden…) och lägg precis som igår upp en länk till din dropbox som en kommentar till detta inlägg.

boxlayout, css

Det blir mycket på en gång här nu, men idén är att skapa en bild av ett arbetsförlopp från photoshop till en färdig layout…fast förenklat. Vi skapar en webbsida kopplad till en css-fil som beskriver innehållets färg och form. En container-div håller ett antal boxar. Containern har relativ position och innehålls-divvarna har absolut positionering i förhållande till containern. Ja, ungefär så.

Uppdraget idag är alltså att göra en enkel boxlayout i photoshop och ”översätta” den till en html-fil med koppling till css-filen. När du är klar, lägg den i din public-mapp i dropbox och klistra in den publika länken i en kommentar till detta inlägg. Spara även ner och lägg in en länk till en gif/jpg-bild av din photoshop-fil.

Del 1:

Del2:

Blir du riktigt hooked på css och vill fördjupa dig finns det ett par ställen jag vill rekommendera.

Har du några egna favoritsidor som hjälper dig, lämna en kommentar =)

CSS-introduktion

CSS1.0 handlar framför allt om att styra typografi på webbsidor. Vad består då typografi av? Här är ett kul sett att se på saken:

Man styr inte bara webbsidors typografi med hjälp av stilmallar(som i webbsammanhang heter CSS, cascading style sheets). I indesign använder man sig till exempel av character styles. Här är en liten film om hur det funkar:

För att du skall förstå hur detta kan användas i ett webbsammanhang tänkte jag att vi skulle besöka följande webbsida:

http://www.csszengarden.com/

Nu skall du få prova att definiera en text med hjälp av css. Här finns en instruktion för hur man gör:

Texten du skall använda hittar du genom att klicka här!!!

När du är färdig skall du ha en folder som innehåller ett html-dokument och en css-fil. Zippa mappen och lägg upp på inlämningssidan för ”tänk grönt” projektet.