Dagsorden: Formål: Jeres websider skal layoutes i bokse/sektioner Formiddag 09.00 1 Fra sideskitse til layout-diagram 09.45 2 I laver et layout-diagram for jeres forside 10.30 3 Fra layout-diagram til side-skabelon i html Eftermiddag 11.50 4 I laver layout-diagram til jeres forside 5 I laver side-skabeloner til jeres forside 6 I lægger indhold i skabelonen 7 I validerer forsiden 8 I layouter og validerer undersider (så mange I kan nå) 9 I lægger foreløbigt site i Dag3-mappe og uploader 151111helf KEA

1. Fra forsideskiftse til layoutdiagram Med udgangspunkt i sideskitsen, laves et layout-diagram, hvor: Siden er delt op i bokse. Hver boks kan indeholde andre bokse men kun i 1 enkelt række eller 1 enkelt kolonne Bokse med flere rækker eller flere kolonner er forbudt! Hver boks skal have et navn (små bogstaver – ikke mellemrum, æøå(/\...) Bokse, som der kun er én af skal have et # (hash) foran navnet Bokse, der er flere af (serier) skal have et . (punktum foran navnet. Sæt mål for alle bredder i diagrammet 151111helf KEA

#wrapper #logofelt #top #menu .info #aktuelt #indhold #left .info #right .nyhed .info .nyhed .info .nyhed #bund 151111helf KEA

#wrapper #logofelt #top #menu .info #aktuelt #indhold #left .info #right .nyhed .info .nyhed .info .nyhed 500px 250px #bund 151111helf KEA 800 px

2. Lav layoutdiagram til jeres forside I har 45 min til at lave layout-diagram for forsiden. Diagrammet SKAL overholde reglerne: En boks må kun indeholde blogge, som ligger i én kolonne eller række Alle bokse skal have navne Navnene skal bestå af små bogstaver – specialtegn (incl. æøå) er forbudt # foran boks med unikt indhold . foran bokse med ikke-unikt indhold (klasser) 151111helf KEA

3-1. Block- og inline html-.lementer Block-elementer er elementer på websiden, som ligger i deres eget afsnit (med linjeskift før og efter). Eksempler: p h1 ul li ol body div Inline-elementer er elementer, som ligger på samme linje som andre elementer. F.eks: a img span Block-elementer kan styles, så de kan lægge sig vandret med: display: inline-block eller display: table-cell 151111helf KEA

3-2. Principper for kodning af skabelon fra layout-diagrammet Alle bokse kodes med <div></div>-tags, som ligger indeni hinanden Wrapper er yderste boks. I den ligger top, indhold og bund. Inden i hver af disse ligger….. osv Indrykninger mellem div-tags er EKSTREMT vigtige Alle div-bokse skal enten have id- eller class-attribut (så de kan styles) En boks centreres i sin ”moder-blog” med stylingen: margin: 0 auto; (boksen skal have en bredde!) Bokse med stylingen: display: inline-block; eller display: table-cell; lægger sig vandret 240211 helf KEA