Øvelsestimer (opgave 5) v/Morten Davidsen Læser til daglig cand.merc.(dat.) på CBS
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.
Simpelt eksempel
Hoved Menu Indhold Bund HTML delen – næsten intet!
/* 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
/* 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
/* Fod sektion */ #footer { background-color: #df781c; clear: both; width: 100%; } CSS delen #3
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
Lynda.com Dreamweaver tutorials (10. Controlling Layout with CSS) ition.asp (W3 schools - positioning) ition.asp techniques/design-and-code-your-first- website-in-easy-to-understand-steps/ (Tutorial fra photoshop til html & css) techniques/design-and-code-your-first- website-in-easy-to-understand-steps/ Gode links