Webdesign med Dreamweaver Glemmen vgs - Medier og kommunikasjon 1. januar 2013 Arly Dale 2013 Side 1
Strukturere layout på en webside Layouten på en webside kan organiseres på forskjellige måter. Tidligere var det vanlig å bruke tabeller i html-koden for få plassert elementene der man ønsket. Tabeller fungerte greitt nok, men det var vanskelig å få utnyttet bruken av stylesheet. Nå brukes div-tagger for å beskrive/definere blokker av innhold på websiden. Da får man en god struktur og full kontroll med stylesheet. Stylesheet brukes for beskrive utseende på disse blokkene og innholdet i disse. Nedenfor er et eksempel som viser bruk av div-tagger og CSS. Arly Dale 2013 Side 2
<div id= navbar > <div id= main > <div id= sidebar > Arly Dale 2013 Side 3
index.html style.css body{ background:#666666; padding: 20px; h1{ p{ font-family:verdana, Geneva, sans-serif; font-size:1.3em; font-family:verdana, Geneva, sans-serif; font-size:0.8em; index.html (utvidet) <div id= navbar > <div id= main > <div id= sidebar > #header{ height:162px; #navbar{ background:#916a31; height:36px; #page{ width:960px; background:#fff; margin:auto; #content{ padding:10px; #main{ width:690px; background:#ccc; float:left; padding:10px; #sidebar{ width:200px; background:#ccc; float:right; padding:10px; height:100%; #footer{ height:30px; Her kommer det også endel CSS-kode for å lage utseende på menyen. Se neste side. Arly Dale 2013 Side 4
Stylesheet kode for menyen #navbar{ background:#916a31; height:36px; /* navbar er litt høyere enn ul-listen for å få en mørk kant under menyen */ ul, li{ /* Nullstiller egenskaper i listen */ margin:0; padding:0; list-style:none; /* Fjerner punktene i listen */ float:left; /* Listeelementene legges til venstre, og menyen blir horisontal */ ul { background:#b07f20; /* listen får bakgrunnsfarge */ height:32px; width:100%; /* Listen går over hele bredden til navbar */ li a { display:block; /* Listeelementene behandles som blokker i steden for tekst */ line-height:32px; padding: 0 16px; /* Mellomrom mellom menyvalgene */ color:#ffffff; text-decoration:none; /* Fjerner understrekingen på linkene */ li a:hover { /* Mouse-over effekt på menyvalget */ background: #916A31; height: 32px; padding-top: 5px; /* Høyden økes med 5 piksler, og blir større en navbar */ position: relative; /* Posisjoneringen er relativ i forhold til navbar */ top: -5px; /* Ved å sette -5 løftes boksen slik at den går over kanten på navbar */ border-radius: 5px 5px 0 0; /* avrunnede hjørner på toppen */.current, a:hover.current { /* Aktiv side - aktiv side uten mouse-over effekt på menyvalget*/ background: #AD9B7F; color: #eee; padding-top: 5px; border-radius: 5px 5px 0 0; position: relative; top: -5px; border-bottom: 4px solid #917F63; cursor: default; /* Setter mus-peker til en pil for vise at ikke det er aktiv side. */ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Dette skal inn i html-filen: <div id= navbar class= cf > <ul> <li><a href= index.html title= Hjem class= current >Hjem</a></li> <li><a href= portretter.html title= Portretter >Portretter</a></li> <li><a href= brasil.html title= Reportasjebilder fra Brasil >Brasil</a></li> <li><a href= kenya.html title= Reportasjebilder fra Kenya >Kenya</a></li> <li><a href= ommeg.html title= Om meg >Om meg</a></li> </ul> Arly Dale 2013 Side 5
Ferdig webside Html-koden for den ferdige websiden ligger på neste side. Her kan man se hvordan div ene header, footer, navbar, main og sidebarhar fått et innhold. Det synlige innholdet er merket med rød ramme. Arly Dale 2013 Side 6
Index.html <!doctype html> <html> <head> <meta charset= UTF-8 > <title>html5 - CSS</title> <link href= style.css rel= stylesheet type= text/css /> </head> <img src= header.png > Banner <div id= navbar class= cf > <ul> <li> <a href= index.html title= Hjem class= current >Hjem</a></li> <li> <a href= brasil.html title= Bilder fra Brasil >Brasil</a></li> <li> <a href= kenya.html title= Bilder fra Kenya >Kenya</a></li> <li> <a href= portretter.html title= Portretter >Portretter</a></li> <li> <a href= ommeg.html title= Om meg >Om meg</a></li> </ul> Venstre del <div id= main > <h1>publisering på internett</h1> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas egestas euismod. Maecenas ut iaculis justo. Praesent nulla neque, accumsan vel interdum eu, dignissim in arcu. Duis lacinia, tortor et ultricies tincidunt, est libero pharetra turpis, quis fermentum dui enim et orci. Pellentesque ultrices mi a orci semper pulvinar. </p> <img src= bilder/brasil-36.jpg width= 640 alt= Bilde /> Meny Høyre del <div id= sidebar > <h1>fakta</h1 > <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lorem risus, viverra euismod blandit quis, tincidunt id dui. Vestibulum pretium sapien eu velit tristique id lobortis dui blandit. Fusce ligula leo, porta in aliquam in, pretium vitae nulla. Sed non tellus purus, eu ullamcorper nulla. Integer enim risus, tristique nec lobortis sed, convallis in nisl. Morbi vel sem eget est ornare lacinia. Praesent ac eros quis velit pellentesque accumsan.</p> <img src= footer.png > Footer </html> Arly Dale 2013 Side 7