Posts Tagged 'webbdesign'

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.

Hur kul är formulär?

Inte jättekul kanske! Men, det är sjukt användbart. Här visar jag hur du skapar ett ”form”-dokument i Google docs, vilket kan vara användbart när man vill göra en omröstning eller attitydundersökning. Sedan visar jag hur man gör ett enkelt mailformulär i Dreamweaver utan att gå in för mycket på det som händer på servern hoppas jag. Kort och gott, det är svårt att skicka ett formulär utan ett serverside-script, typ php, asp, pearl eller liknande.

Dagens uppgift i korthet:

  1. Skapa ett formulär med Google docs med en eller några frågor. Skicka till klassens epostadress.
  2. Gör ett formulär i Dreamweaver. Använd textfält, textyta, reset- och submit-knapp.
  3. Maila URLen till ditt Google-formulär och ditt zippade formulär från Dreamweaver till mig!

Animation i Photoshop

Här, ett litet klipp som handlar om hur man animerar i photoshop:

Dagens övningsuppgift:
Vi skall göra en banner som är storleksanpassad för att ligga längst upp på aftonbladet.se. För att den skall passa på sajten så måste den vara 980 x 120 pixlar i upplösning 72 pixlar per tum. Kunden är Mediegymnasiet dvs. Malmö stad. Målet är att få sökande till skolan. Formulera ett budskap i samma stil som nedan(påstående, svar, avsändare):

  • ”Jag får lära mig photoshop i skolan”
  • Sök in på Mediegymnasiet nu!
  • Mediegymnasiet [Malmö stad logotyp]

Animera dessa i photoshop.

Nästa gång tittar vi på hur man exporterar och publicerar.

webbformulär

Del 1:

Del 2:

Målet med dagens övning är att skriva ihop en html-sida som kan skicka ett formulär med hjälp av FormMail-scriptet som ligger på min server (punktlars.se) I din mail hittar du den exakta sökvägen om du skulle ha problem att skriva av. Formuläret skall för att fungera innehålla korrekt form-tag, recipient, text-input, submit-knapp. När detta är på plats och fungerar kan du trixa vidare med fler input-typer.

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 =)