1 / 9

Webdesign og webkommunikation

Webdesign og webkommunikation. Øvelsestimer (opgave 5) v/Morten Davidsen mdav@itu.dk Læser til daglig cand.merc.(dat.) på CBS. Øvelse 5. Udarbejde en HTML version af jeres heroes site, ud fra jeres oprindelige mockup Slice eventuelle billeder ud i photoshop

corbin
Download Presentation

Webdesign og webkommunikation

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. Øvelse 5 • 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 <div> • 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. HTML delen – næsten intet! <div id="container"> <div id="header">Hoved</div> <div id="menu">Menu</div> <div id="content">Indhold</div> <div id="footer">Bund</div> </div>

  5. CSS delen #1 /* 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%; }

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

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

  8. Lidt tips • 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!

  9. Gode links • Lynda.com Dreamweaver tutorials (10. Controlling Layout with CSS) • http://www.w3schools.com/Css/pr_class_position.asp (W3 schools - positioning) • 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)

More Related