1 / 7

Dagsorden :

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

hayden
Download Presentation

Dagsorden :

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. 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

  2. 1. Fra forsideskiftse tillayoutdiagram 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

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

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

  5. 2. Lav layoutdiagram til jeresforside 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

  6. 3-1. Block- og inlinehtml-.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-blockeller display: table-cell 151111helf KEA

  7. 3-2. Principper for kodning af skabelon fra layout-diagrammet • Alle bokse kodes med <div></div>-tags, som ligger indeni hinanden • Wrapperer 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

More Related