Laborationsanvisning Copy Cat Laboration 4 Författare: Johan Leitet Version: 1 Datum: 2011-09-19
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 ny 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. Vid redovisning av laborationen ska du kunna besvara frågor om hur du har löst de olika delarna och varför de är lösta på det sätt du löst dem på. När du anser dig vara klar med laborationen kontrollerar du att din källkod uppfyller laborationens samtliga krav. Innan redovisning ska du kontrollera samtliga dokument gentemot en validator. 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. 2 (5)
Uppgift 4.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) in 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 4.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. 3 (5)
Uppgift 4.3 - Copycat På kursens webbplats hittar du filen uppgift4.3.zip. I denna fil hittar du de filer som krävs för att utföra denna uppgift. 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 zip-arkivet. 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 xhtml-filen utan du ska enbart skapa en CSS-fil. Sidan ska vara godtagbar i de senaste webbläsarna. Observera att det även finns skärmdumpar på hur mouseovereffekter med mera ska se ut. 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 4.4 CSS Sprites 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å kursens webbplats hittar du filen uppgift4.4.zip 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. 4 (5)
Uppgift 4.5 CSS3 En i högsta grad frivillig uppgift. Titta igenom vilka möjligheter CSS3 ger dig att krydda upp din sajt ytterligare. Kanske skulle du vilja ha ett speciellt typsnitt på dina rubriker? Kanske utnyttja multipla kolumner för texten på presentationssidan? Testa någon animering etc. Varsågod. Nu får du lite tid över till det. 5 (5)