1ME321 Webbteknik 1 Lektion 5 Struktur & Layout med CSS Rune Körnefors Medieteknik 1 2018 Rune Körnefors rune.kornefors@lnu.se
Agenda Veckoplanen Denna vecka Exemplet Gretas Blommor Garretts modell Structure plane Informationsarkitektur Interaktionsdesign CSS layout display float clear overflow sprites 2
Resultat på plan 2 Från lektion 4 Kravspecifikationen för Gretas Blommor Kravspecifikation Innehåll Vad ska finnas - Produkter ska visas med bild, namn och pris. - Produkterna är kategoriserade i buketter, kransar och övrigt. - Veckans erbjudanden ska visas på ingångssidan. - Ingångssidan ska ha foto som visar butiken och öppettider ska anges. - Interiörbilder från butiken samt kort presentation av personalen (förnamn och bild). - Förslag på blommor efter vad de ska användas till, t.ex.födelsedag, bröllop, begravning, etc. - Karta som visar var butiken finns. - Beställningsformulär där tilläggsavgifter och totalpriset hela tiden visas. Vad ska man kunna göra Funktionellt - Bilder på produkter ska kunna förstoras. - Man ska kunna sortera inom kategorierna på pris eller i bokstavsordning. - Man ska kunna beställa buketter och kransar för leverans. - Man ska kunna göra en fritextsökning på webbplatsen. - Man ska kunna kontakta butiken via ett kontaktformulär. Plan 3: Informationsarkitektur Hur ska det organiseras och struktureras? Var ska innehållet finnas? Plan 3: Interaktionsdesign Hur ska interaktionen gå till? Vad ska användaren respektive programmet göra? 3
Plan 3: informationsarkitektur Första utkast till struktur och namn på sidor/länkar. Webbplatsens struktur Förändrad struktur och namn, efter ytterligare en genomgång av kravspecen samt koll av analys av andra webbplatser och personas. Ljusgrön ruta = webbsida 4
Plan 3: informationsarkitektur Ljusgrön ruta = webbsida 5 Plan 3: Gretas Blommor Start välkomsttext bild på butiken öppettider veckans erbjudande Var innehållet i kravspecen ska finnas. länkar (utöver global navigering) till sortimentsidor för olika tema (födelsedag, bröllop och begravning) Sortimentsidor alla produkter i kategorin visas med: liten bild namn pris köpknapp (med länk till beställningsformulär) Ej i kategorin Övrigt Beställ beskrivning av hur man beställer Köpvillkor punktlista med villkoren. Interiör bilder och kort text som visar butiken invändigt en bild på all personal och text med förnamn Kontakt kontaktformulär karta Beställningsformulär allt som krävs för beställningen på en enda sida
Plan 3: Interaktionsdesign Plan 3: Gretas Blommor Flöde i interaktionen. Bilder på produkter ska kunna förstoras: 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 på pris eller i bokstavsordning: 1. Pris eller bokstavsordning väljs i en meny. Fritextsökning: 1. Skriv sökord. 2. Utför sökning. Kontakt via kontaktformulär: 1. Formulär med namn epost-adress meddelande Interaktion för att beställa blomsterbukett eller krans för leverans: (Det går endast beställa en produkt.) 1. Gå in på sortiment för buketter eller kransar (eller födelsedag, etc.). 2. Klicka på köpknapp för önskad produkt. 3. Man kommer då till ett formulär med följande: a. Datum för leverans b. Mottagare Namn, adress, telefon, om varan får lämnas vid dörr om mottagare ej är hemma c. Korttext d. Beställare Namn, epost, telefon e. Betalningssätt Faktura: adress Kort: Om detta väljs går man vidare till en betaltjänst, då man klickar på knappen för att bekräfta beställningen f. Acceptans av köpvillkoren 6
CSS Cascading Style Sheets 7
Test av några stilar som används i layouten display float clear overflow lekt5-ex1 lekt5-ex2 lekt5-ex3 lekt5-ex4 8
Layout Grundstilen med centrering och färgade bakgrunder. Justering av navigeringsmenyn. Lika breda rutor. Två kolumner med hjälp av float. Skjut ned sidfoten till fönstrets underkant med "Sticky footer". lekt5-ex5-1 lekt5-ex5-2 lekt5-ex5-3 lekt5-ex5-4 9
CSS sprites En bild innehåller flera mindre bilder. Visas som bakgrundsbild. Width och height för elementet bestäms, så att en av bilderna visas. Vilken bild som ska visas, bestäms genom att positionera bakgrunden. lekt5-ex6 10