Webdesign og webkommunikation
Download
1 / 9

Webdesign og webkommunikation - PowerPoint PPT Presentation


  • 72 Views
  • Uploaded on

Webdesign og webkommunikation. Øvelsestimer (opgave 5) v/Morten Davidsen [email protected] 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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Webdesign og webkommunikation' - corbin


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Webdesign og webkommunikation

Webdesign og webkommunikation

Øvelsestimer (opgave 5) v/Morten Davidsen

[email protected]

Læser til daglig cand.merc.(dat.) på CBS


Velse 5
Ø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.



Html delen n sten intet
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>


Css delen 1
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%;

}


Css delen 2
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;

}


Css delen 3
CSS delen #3

/* Fod sektion */

#footer {

background-color: #df781c;

clear: both;

width: 100%;

}


Lidt tips
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!


Gode links
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)


ad