Inledning

Vi kommer på denna laboration fortsätta med CSS och nu finslipa vår sida. Du kommer även att få träna lite extra på CSS genom att göra en ny layout på en separat sida och så långt det går försöka efterlikna en redan färdig design.

Mål

Vi fortsätter med css. Efter laborationen ska du: - Kunna stila formulär - Ordna utskriftsvänliga versioner - Kunna använda css-sprites - Ha en orientering om nya CSS3-tekniker.

Förberedelse

Innan du kommer till laborationstillfället bör du vara så förberedd att du känner att du hinner genomföra och redovisa laborationen under det handledda tillfället. Du får givetvis göra laborationen helt klar i förväg och du har då möjlighet att utnyttja handledningstillfället för frågor och redovisning.

Läs igenom hela laborationshandledningen innan du påbörjar laborationen.

Genomförande

Utför laborationens uppgifter och moment samt dokumentera vad du kommer fram till på de olika delarna. I schemat finns handledningstid utlagd då du har möjlighet att ställa frågor kring uppgiften och få hjälp ifall du kört fast. Använd också kursens forum för att ställa frågor där. Posta dock inga lösningar av uppgifterna på forumet.

När du anser dig vara klar med laborationen kontrollerar du att din källkod uppfyller laborationens samtliga krav.

Plagiat

Laborationen ska genomföras enskilt. Du får givetvis fråga klasskamrater om hjälp men du ska skriva din egen kod och kunna svara för varför du skrivit din kod på det sätt du gjort. Vid fuskmisstanke lämnas misstankar samt berörda dokument över till universitetets disciplinnämnd.

Uppgift 3.1 - Stila formuläret

Förra laborationen innehöll mycket arbete med stilmallen på din portal. Denna laboration kommer att fortsätta på detta arbete och först och främst ska du ge dig på att stila upp ditt formulär.

Försök göra formuläret så enkelt som möjligt för användaren. Se t.ex. till att texterna (label) inte ligger för långt ifrån fälten som ska fyllas i.

Sedan förra laborationen har du förmodligen ett färdigt färgschema som du även kan nyttja på formuläret för att få det att visuellt hänga ihop med resten av sajten.

Uppgift 3.2 – Utskriftsvänlig version

För att det på ett snyggt sätt ska gå att skriva ut innehållet på din sida på en skrivare utan att få med en massa onödig information ska du nu skapa utskriftsvänliga stilmallar till din sajt.

Arbeta gärna om typografin till något du tycker lämpar sig för utskrift och se till att ta bort onödiga delar så som exempelvis menyer.

Länkar till externa webbplatser ska skrivas ut i sin helhet när man skriver ut sidan.

PS. Du kan i alla webbläsare förhandsgranska hur din sida kommer att se ut vid utskrift så att du slipper ödsla träd på detta.

Uppgift 3.3 - Copycat

Denna uppgift går ut på att du givet ett påbörjat html-projekt ska färdigställa det och efterlikna en prototyp så gott du kan.

1. Ladda först ner de filer du ska utgå ifrån från denna länk: copycat.zip

2. Packa upp filen och skapa en ny mapp i din utvecklingsmiljö och lägg de nedladdade filerna där. Använder du cloud9 kan du skicka upp filer till ditt workspace genom att i menyn gå på "File" --> "Upload local files"

3. Du kan nu börja editera uppgiften.

Din uppgift blir att med hjälp av css skapa en sida som så nära du kan återskapar exemplet som du hittar i de skärmdumpar som finns i rootkatalogen ("IE7hela.png" och "IE7mouseover.png"). Till din hjälp har du fått html-filen till vilken du ska skriva css-filen "basic.css". Du får INTE ändra i html-filen utan du ska enbart editera den CSS-fil som finns. Sidan ska vara godtagbar i de senaste webbläsarna.

Layouten har en fast bredd och är centrerad i webbläsarfönstret.

De teckensnitt som använts är "Verdana" samt "Times New Roman". Hur du får fram vilka färger som använts kan du nog klura ut genom att använda ett lämpligt grafikverktyg.

När du är färdig så länkar du till uppgiften från din laborationsportal samt skriver ett kortare blogginlägg om uppgiften på startsidan på din blogg samt länkar till uppgiften.

Uppgift 3.4 – CSS Sprites

Växla nu tillbaka till arbetsytan för din laborationsportal.

För att få testa på att använda CSS-sprites så ska du nu lägga till lite enkla ikoner till din meny. På denna länk hittar du en .zip-fil som innehåller en sprite som du kan använda. Det går givetvis lika bra om du själv tar fram en sprite som du tycker passar bättre till din sidas layout.

Verktyget http://spritegen.website-performance.org/ kan du då ha stor nytta av.

Om du använder den medföljande bildfilen så ser du att det finns två versioner av varje ikon. En svartvit och en färgad. Tanken är då att använda den svartvita på menyn och när muspekaren förs över ett menyalternativ så används den färgade ikonen. Bra att veta är att varje ikon i filen är 24*24 pixlar stor och mellanrummet mellan ikonerna är 24*24 pixlar.

Du är nu färdig med laborationen.