Struktur & Layout med CSS

Transkript

1 1ME321 Webbteknik 1 Lek0on 5 Struktur & Layout med CSS Rune Körnefors Medieteknik Rune Körnefors rune.kornefors@lnu.se

2 Agenda Veckoplanen Vecka 40 Läsanvisningar Exemplet Gretas Blommor GarreKs modell Structure plane Layout CSS float och centrering clear sprites 2

3 CSS sprites En bild innehåller flera 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. lekt5-sprites" 3

4 Plan 3: informatonsarkitektur Från lek0on 4 med lite 0llägg Plan 3: Gretas Blommor 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

5 Plan 3: InterakTonsdesign 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 e. BetalningssäK Faktura: adress Kort: kortnummer, etc. (betaltjänst) f. Acceptans av köpvillkoren 5

6 Hör ej Tll plan 3 Layout Från lek0on 4 Sidornas layout header search nav main content sidebar footer 6

7 Fönsterlayout! header AlternaTv 1 för design av layouten. Fast liggande delar search nav main content sidebar Dynamisk storlek Rullningsbar ruta footer 7

8 Dokumentlayout! header AlternaTv 2 för design av layouten. Scrollas med dokumentet search nav main content sidebar Hela dokumentet rullar (scrollas) i fönstret footer 8

9 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

10 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 flera olika webbläsare AlternaTv: utveckla först för en webbläsare och modifiera sedan så ak det funkar i andra webbläsare 10

11 HTML- koden är densamma i samtliga steg Skapa HTML- och CSS-kod Stegvis utveckling av CSS- koden gretas-blommor5" steg1 identfiera blocken Samma kod som på förra lektonen. Referera Tll taggar och id och säk olika bakgrundsfärger. steg2 prov med innehåll Lägg Tll en sida med mer innehåll och CSS- kod för viss formatering av innehållet, bl.a. bakgrundsbild i header. steg3 två kolumner Elementen nav och main i två kolumner intll varandra. steg4 stcky footer Se Tll ak sidfoten kommer längst ner i fönstret på sidor med lite innehåll. hkp:// steg5 de inre kolumnerna Elemnten #content och #sidebar i två kolumner intll varandra. Rutor för veckans erbjudande och temalänkar i #sidebar. steg6 konkret innehåll HTML- dokument för samtliga sidor, byt ut Lorem ipsum mot "riktga" texter, lägg in skisser på bilder som ska finnas med samt justera marginaler och bakgrundsfärger (även om det for^arande kan vara "fel" färger). 11

12 Kravspecifika,on Kontroll mot kravspecen Innehåll - 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. Grön: Helt uppfyllt Gul: Nästan uppfyllt Röd: Delvis uppfyllt 12 Teknisk specifika,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).