DOKU- MEN- TATION TEK- NISK

Transkript

1 TEK- NISK DOKU- MEN- TATION GRUPPE 21: AMALIE HOVGESEN- CLEA-MARIE FIND PALUDAN THERESE HASSE LARSEN - CECILIE POSS AMALIE LEONORA DAM - KASPER MUNK JENSEN

2 : 1. MOCKUP 2. FORSIDE 3. SITEMAP 4. LAYOUTDIAGRAM 5. KODEEKSEMPEL 6. DESIGNMANUAL

3 MOCKUP COMPUTER,TABLET, SMARTPHONE EXPLORE MAP ABOUT CONTACT EXPLORE THE CITY HABOUR AND SEE ALL THE SEA SIGHTS. BE YOUR OWN CAPTAIN AND ENJOY THE FREEDOM TO EXPLORE COMPUTER Welcome EXPLORE Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + EXPLORE MAP ABOUT CONTACT SEASIGHTS EXPLORE THE CITY HABOUR AND SEE ALL THE SEA SIGHTS. BE YOUR OWN CAPTAIN AND ENJOY THE FREEDOM TO EXPLORE EXPLORE THE CITY HABOUR AND SEE ALL THE SEA SIGHTS. BE YOUR OWN CAPTAIN AND ENJOY THE FREEDOM TO EXPLORE EXPLORE TABLET Welcome EXPLORE Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Welcome Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. SMARTPHONE Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur

4 MOCKUP OVERSIGT

5 SCREENSHOT AF FORSIDE

6 SITEMAP index.html map.html index.html about.html contact.html map1.html map2.html map3.html map4.html map5.html map6.html map7.html index.html

7 LAYOUTDIAGRAMMER index.html

8 contact.html

9 map.html, map1, map2, map3, map4, map7

10 about.html

11 KODEEKSEMPEL Responsive webdesign og kodning handler om at tilpasse sin hjemmeside til mange skærmstørrelser både store og små. I vores kodeeksempel har vi i body lavet en div container med class= tema_container som skal indeholde ikoner der skal tilpasses skærmformatet. Det vil sige vi altså har brug for både store og små ikoner. Dette gøres ved at lave forskellige baggrundsbilleder i vores CSS. tema_container styler vi til at have en maks. bredde på 990px hvilket er den størrelse man ser i et stort skærmbillede. En div boks er et blokelementet der altid vil fylde hele skærmen. Vi vælger at give den en bredde for at have mulighed for at centrere den ved at sætte margin til 0 i toppen og auto i siderne.

12 Hvert tema har deres egen div container, eksempel class= tema one, som har fået et baggrundsbillede. Bredden på div containeren har vi sat til 25% hvorved der indeni tema_container ligger sig fire containere som er udregnet i forhold til tema_container. Vi sætter display til at være inline-block sådan at de fire containere ligger sig ved siden af hinanden og vi indsætter float som vi indstiller til at være left, sådan at elementet flyder fra venstre. Vi sørger for at baggrundsbilledet kun bliver vist engang ved at indsætte stylingen: background-repeat: no-repeat; I de fire tema_containere er der endnu en div container med tekst. Vi har sat padding-top til 160px da denne er justeret i forhold til baggrundsbilledet sådan at teksten ikke ligger over baggrundsbilledet. Efter de fire containere har vi indsat et div element: clear-fix der specificerer hvilke sider elementerne ikke måde flyde til, og sådan at elementerne ligger sig på linje. Det er muligt at tilpasse et stort skærmformat til et mindre dette gør vi på følgende måde: I <head> opsætter vi fire regler i form af links, som siger noget om de forskellige layouts. Når browser størrelsen bliver under 990px vil designet blive flydende. Når skærmen ændrer sig og bliver over 990px så vil designet derfor skifte karakter ved hjælp af CSS3 media forespørgsler. Hvis skærmstørrelsen er mellem 50px og max 500px så vil browseren bruge css reglen screen_small_layout.css og hvis max bredden er mellem 501px og 990px så ændrer skærmlayoutet sig til screen_layout_medium.css. Når man skifter fra laptop til tablet så registreres skærmstørrelsen og opløsningen sådan at designet optimeres.

13 DESIGNMANUAL

14

15 SEASIGHTS

16 FONTTYPES Roboto-Thin ABCDEFGHIJKLMN OPQRSTUVXYZÆØÅ abcdeftghijklmn opqrstuvxyzæøå