1ME321 Webbteknik 1 – Lek0on 5 Struktur & Layout med CSS Rune Körnefors Medieteknik 1 © 2015 Rune Körnefors [email protected] Agenda • 
Veckoplanen –  Vecka 40 –  Läsanvisningar • 
Exemplet Gretas Blommor –  GarreKs modell – Structure plane –  Layout • 
2 CSS –  ﬂoat och centrering –  clear –  sprites CSS sprites lekt5-sprites"
En bild innehåller ﬂera mindre bilder. Visas som bakgrundsbild. Width och height för elementet bestäms, så aK en av bilderna visas. Vilken bild som ska visas, bestäms genom aK posiTonera bakgrunden. 3 i
3: Plan rkitektur a
To n s
a
m
r
n fo
Plan 3: Gretas Blommor Från lek0on 4 med lite 0llägg Start VälkomsKext, bild på buTken Sidokolumn med veckans erbjudande och länkar Tll sorTmentsidor för olika tema. SorTmentsidor För varje produkt en liten bild, namn, pris och köpknapp (med länk Tll beställningsformulär). Beställ Beskrivning av hur man beställer. Köpvillkor Punktlista med villkoren. Interiör Bilder som visar buTken invändigt. En bild på personalen. Kort text kring bilderna. Kontakt Kontak^ormulär och karta. Ljusgrön ruta = webbsida 4 In
3: Plan design To n s
terak
Plan 3: Gretas Blommor InterakTon för aK förstora bild på produkt: 1.  Klicka på bilden, så visas en ruta med förstorad bild. 2.  Klicka på den förstorade bilden, så döljs den igen. Sortera inom kategori: 1.  Pris eller bokstavsordning väljs i en meny. InterakTon för aK beställa blomsterbukeK eller krans för leverans: Det går endast beställa en produkt. 1.  Gå in på sorTment för bukeKer eller kransar. 2.  Klicka på köpknapp för önskad produkt. 3.  Man kommer då Tll eK formulär för följande: a.  Datum för leverans b.  MoKagare • 
Namn, adress, telefon, om varan får lämnas vid dörr om moKagare ej är hemma c.  KorKext d.  Beställare • 
Namn, epost, telefon • 
• 
Faktura: adress Kort: kortnummer, etc. (betaltjänst) e.  BetalningssäK f.  Acceptans av köpvillkoren 5 j Tll p
e
r
ö
H
Layout lan 3
Från lek0on 4 Sidornas layout header search nav main sidebar content footer 6 Fönsterlayout!
AlternaTv
1 för design av layouten. header Fast liggande delar search nav main content sidebar Dynamisk storlek Rullningsbar ruta footer 7 Dokumentlayout!
AlternaTv
2 för design av layouten. header Scrollas med dokumentet search nav main content sidebar Hela dokumentet rullar (scrollas) i fönstret footer 8 Innehåll under utveckling!
•  Bakgrunder färgade olika för de olika delarna –  Så aK man ser vilka ytor de upptar •  Fula bilder –  Så aK man inte diskuterar dem istället för layouten •  U^yllnadstexter för aK se layouten i olika storlekar –  Navigering: text med länkarnas rubriker –  Löpande text, t.ex. nonsenstext som Lorem Ipsum 9 Steg och test under utveckling!
•  Skapa först strukturen i HTML •  Utveckla sedan CSS-‐koden stegvis –  Testa ejer varje steg •  Testa både med litet innehåll och mycket innehåll •  Prova med olika fönsterstorlekar •  Testa i ﬂera olika webbläsare –  AlternaTv: utveckla först för en webbläsare och modiﬁera sedan så aK det funkar i andra webbläsare 10 Skapa HTML- och CSS-kod HTML-‐koden är densamma i samtliga steg Stegvis utveckling av CSS-‐koden gretas-blommor5"
steg1 – idenTﬁera blocken steg4 – sTcky footer Samma kod som på förra lekTonen. Referera Tll taggar och id och säK olika bakgrundsfärger. Se Tll aK sidfoten kommer längst ner i fönstret på sidor med lite innehåll. hKp://www.csssTckyfooter.com/ steg2 – prov med innehåll steg5 – de inre kolumnerna Lägg Tll en sida med mer innehåll och CSS-‐kod för viss formatering av innehållet, bl.a. bakgrundsbild i header. Elemnten #content och #sidebar i två kolumner inTll varandra. Rutor för veckans erbjudande och temalänkar i #sidebar. steg3 – två kolumner steg6 – konkret innehåll Elementen nav och main i två kolumner inTll varandra. HTML-‐dokument för samtliga sidor, byt ut Lorem ipsum mot "rikTga" texter, lägg in skisser på bilder som ska ﬁnnas med samt justera marginaler och bakgrundsfärger (även om det for^arande kan vara "fel" färger). 11 Kontroll mot kravspecen Kravspeciﬁka,on Grön: Helt
uppfyllt Gul: Nästa
n uppfyllt Röd: Delvis
Innehåll uppfyllt -  Produkter ska visas med bild, namn och pris. -  Produkterna är kategoriserade i bukeKer, kransar och övrigt. -  Veckans erbjudanden ska visas på ingångssidan. -  Ingångssidan ska ha foto som visar buTken och öppeoder ska anges. -  Interiörbilder från buTken samt kort presentaTon av personalen (namn och bild). -  Kontak^ormulär. -  Förslag på blommor ejer vad de ska användas Tll, t.ex. födelsedag, bröllop, begravning, etc. -  Beställningsformulär där Tlläggsavgijer och totalpriset hela Tden visas. Funk,onellt -  Bilder på produkter ska kunna förstoras. -  Man ska kunna sortera inom kategorierna på pris eller i bokstavsordning. -  Man ska kunna beställa bukeKer och kransar för leverans. -  Man ska kunna göra en fritextsökning på webbplatsen. Teknisk speciﬁka,on -  Ska fungera både på vanlig dator och mobila enheter med en skärmstorlek ner Tll 320 pixels bredd. -  Ska fungera i webbläsarna Chrome, Firefox, Internet Explorer, Opera och Safari (även 5 år gamla versioner). 12