Opgaven I AArhus er en fiktiv hjemmeside. Formålet med hjemmesiden, er at Folk som befinder sig i Aarhus kan henvende sig til I AArhus og berette deres synspunkt på Aarhus. Siden henvender sig til unge, der går op i hvad der rører sig i Aarhus. Om det er mad, restaurenter, flotte fotografier, kultur - hvad som helst, kan man anmode om at få skrive en artikel på sitet, for at inspirere andre. Siden skal designes og kodes. Designkrav Siden skal være indbydende og enkel Brugervenlig Let at navigere rundt i kontaktinformationer Stil ren Informerende Inspirerende Arbejdsproces Skitsering i hånden Design layout i Photoshop Billedbehandling i photoshop Flowchart Skelet Storyboard Opsætning i dreamweaver Metatags: keyword og description for synlighed Upload på testsite Browser Siden er blevet teste og er kompatibel i Firefox, Chrome, Safari og Explorer. Link http://www.creativeunited.dk/test/iaarhus/index.html Kvalitetsvurdering Siden er let og overskuelig. Den kan det den skal - altså vise hvad andre beretter om AArhus. Programmer Dreamweaver Photoshop Grafiske designparametre Stilen er meget ren og simpel. Stilet bliver båret af meget negativ space. Opsætning Max width: 960px Margin: 0 auto Fonte Montserrat, san-serif er brugt gennemgående, da den er let læselig og god til brug af skærm.
flowchart index.html home dit aarhus kontakt indlæg1 indlæg2 mail
Skelet #wrapper: - max width: 960px - margin: 0 auto header: - width: 100% - height: 100px Logo: - width: 304px - height: 73px 100px 304px 73px 960px 880px Nav: - height: 100% -width: 100% Article: - width: 100% 587px Footer: - width: 100% - Height: 30px Responsivt design Da hjemmesiden er responsiv, afhænger størrelserne af hvilken platform de ses fra, da det bliver skaleret ned/op. Derfor er dette kun et udgangspunkt. 30px
Storyboard Index.hmtl Actions: Logo: Linker til index.html Home: Linker til index.html Dit aarhus > train: Linker til oplaeg1.html Dit aarhus> lightshow: Linker til oplaeg2.html kontakt: Linker til kontakt.hmlt
CSS SSCREEN: @charset UTF-8 ; /* CSS Document */ * { margin:0; padding:0; section, article, header, footer, nav, aside, hrgroup, figure, figcaption { display:block; font-family: Montserrat, sans-serif; #wrapper { max-width:960px; margin:0 auto; header { display:block; height:100px; padding-top:2%; padding-left:4%; float:right; margin:0 0 0 0; font-size:80%; padding-left:400px; padding-right:20px; box-sizing:border-box; nav ul { margin:0; padding:0; list-style:none; border-top:white; float:right; nav li { position:relative; width:10em; line-height:1em; margin:0; padding:0; list-style:none; border-right:white; nav { height:10%; nav li:hover {
CSS SSCREEN: nav ul li a { display:block; text-decoration:none; padding:0.25em 0 0.25em 0.5em; width:9.5em; margin:0; color:black; nav>ul a { width:auto; nav ul ul { position:absolute; display:none; top:1.5em; left:-1px; nav ul ul li { border-bottom:1px solid white; border-left:1px solid white; nav ul li:hover ul{ display:block; a{ text-decoration:none; color:#ccc; line-height:1.0em; section { width:96%; padding:2%; article { /*denne tekst laver float right */.article p { font: Montserrat, sans-serif; font-size:1em; text-align:right; padding-right:2%; padding-top:2%; font-variant:small-caps;.article1 { padding-left:2%;
CSS SSCREEN: padding-right:100%; article p { font: Montserrat, sans-serif; font-size:.700em; font-weight:100; padding-right:48%; footer p { font: Montserrat, sans-serif; font-size:.90em; text-align:left; padding-right:2%; font-variant:normal; color:#ccc; article figure { padding-top:30px; padding-left:20px; padding-right:20px; padding-bottom:2%;.imgresponsive{ height:auto; footer { height:30px; padding-left:4%; h1 { h2 { h3 { h4 { font-size:2em; font-weight:lighter; font-size:1em; font-weight:100; padding-bottom:2%; font-size:.600em; font-style:italic; padding-bottom:2%; font-size:.800em;
CSS SSCREEN: form { font-weight:bold; padding-top:2%; padding-top:8%; textarea { display:block; span { form p { font: Montserrat, sans-serif; font-size:.154em; padding-right:2%; font-variant:normal; color:#ccc; padding-bottom:2%; margin-right:2%; label { padding-right:inherit; input { display:block;
CSS MOBIL: @charset UTF-8 ; /* CSS Document */ * { margin:0; padding:0; font-size:80%; padding-left:400px; padding-right:20px; box-sizing:border-box; header { display:none; height:100px; padding-top:2%; padding-left:4%; section { width:95%; margin:0 auto; nav li { position:relative; width:10em; line-height:1em; margin:0; padding:0; list-style:none; border-right:.089em solid grey; nav li:hover { nav { height:10%; float:none; margin:0 0 0 0; nav ul li:hover ul{ display:block;
HTML (INDEX):
HTML (INDEX):
HTML (INDLAEG1):
HTML (INDLAEG1):