Øvelsestimer (opgave 5) v/Morten Davidsen Læser til daglig cand.merc.(dat.) på CBS.

Præsentationer af emnet: "Øvelsestimer (opgave 5) v/Morten Davidsen Læser til daglig cand.merc.(dat.) på CBS."— Præsentationens transcript:

1 Øvelsestimer (opgave 5) v/Morten Davidsen mdav@itu.dk Læser til daglig cand.merc.(dat.) på CBS

2  Udarbejde en HTML version af jeres heroes site, ud fra jeres oprindelige mockup ◦ Slice eventuelle billeder ud i photoshop ◦ Undlad at benytte flere billeder end nødvendigt, f.eks. hellere benyt en baggrundsfarve end baggrundsbillede, hvis resultatet er det samme ◦ Opret containers ved hjælp af ◦ Benyt CSS positioning til at placere jeres indhold ◦ Efterfølgende kan i style resten af jeres indhold, såsom overskrifter, paragraffer, lister m.v.

3 Simpelt eksempel

4 Hoved Menu Indhold Bund HTML delen – næsten intet!

5 /* Sætter en baggrundsfarve og sætter margin til 0 */ body { margin: 0px; background-color: #96C; } /* Laver en "container" boks, som indrammer alt indhold */ #container { width: 500px; margin-left: auto; margin-right: auto; } /* Hoved sektion */ #header { background-color: #438a48; width: 100%; } CSS delen #1

6 /* Menu sektion */ #menu { background-color: #2675a8; float: left; width: 25%; height: 500px; } /* Indhold sektion */ #content { background-color: #CF9; float: left; width: 75%; height: 500px; } CSS delen #2

7 /* Fod sektion */ #footer { background-color: #df781c; clear: both; width: 100%; } CSS delen #3

8  Der findes mange løsninger på samme problem, vær altid opmærksom på det når man benytter positioning  Altid godt at have en ”container” til at indramme alt indhold og arbejde ud efter  Ved brug af float, så husk at benytte clear når du vil have indhold ned på en ny linje  Undlad generelt at bruge fixed, med mindre du virkelig ved hvad du laver  Bliv bekendt med box modellen! Lidt tips

9  Lynda.com Dreamweaver tutorials (10. Controlling Layout with CSS)  http://www.w3schools.com/Css/pr_class_pos ition.asp (W3 schools - positioning) http://www.w3schools.com/Css/pr_class_pos ition.asp  http://net.tutsplus.com/tutorials/html-css- techniques/design-and-code-your-first- website-in-easy-to-understand-steps/ (Tutorial fra photoshop til html & css) http://net.tutsplus.com/tutorials/html-css- techniques/design-and-code-your-first- website-in-easy-to-understand-steps/ Gode links