Week 23 Learning Activity - Planning the Structure Create the structure of your web page (from Learning Activity - Put Thought Into Your Design) in terms of HTML files and folders. You need to set these up so that you are ready to code your website. First use a pen and paper to do your planning; then do it on the computer when you are sure of your structure. This Learning Activity must be published on your WordPress blog by the end of the fifth week of Web Design. So. This was my visual plan for the web in week 20:
I see now That I have to change and maybe expand something. So this i sketches of my plan: On the sketche I have added an extra page named Link, Bu I now see that I can make the links at the page with the map.- So 5 pages totally.
I think these two weeks has been extremely tuff. Luckely I have a math-brain and like working with HTML coding. But I have spend A LOT of time on tecnical issues and also suffered from very late answers from Noroff. Unfortunally. But here comes what I have mannaged so far: HOME <!doctype html> <html lang= no > <head> <meta charset= utf-8 > <title>mitt Lofoten</title> </head> <body> <header role= banner > <H1>Min hjerteplass Lofoten</H1> <H1>dra på besøk...</h1> <nav role= navigation > <ul> <li>min Hjerteplass Lofoten <a href= Ref. 23 Structure on Lofoten Mitt Lofoten.html title= same directory link ></a></li> <li>historien </li> <li>opplevelser </li> <li>fiskerestauranter </li> <li> Linker</li> </ul> </nav> </header> </section> <footer role= contentinfo > Kontakt Links Home </footer> </body> </html>
MITT LOFOTEN <!doctype html> <html lang="no"> <head> <meta charset="utf-8"> <title>mitt Lofoten</title> </head> <body> <header role="banner"> <H1>Min hjerteplass Lofoten</H1> <H1>dra på besøk...</h1> <nav role="navigation"> <ul> <li>title="min hjerteplass Lofoten" </li> <li>title="historien" </li> <li>title="opplevelser" </li> <li>title="fiskerestauranter" </li> <li> title="linker"</li> </ul> </nav> </header> <section> <main role="main"> <h2> Mitt Lototen</h2> <article role="article"> <p>idet jeg lander med Widerøe på Leknes og går ut flyet blir jeg altid møtt av Lofotens friske havlukt.<br>- Jeg speider etter en skikkelig "lofoting" for å få en fin liten dosis av denne herlige dialekt.<br> <h4>lykke!</h4> <br>så er det gode venner, fantastisk fisk og spetakulærer fjellturer. Godt for sjelen er det!</p> </article> </main> </section> </section> <footer role="contentinfo"> Kontakt Home </footer> <section>
HISTORIEN <!doctype html> <html lang= no > <head> <meta charset= utf-8 > <title>mitt Lofoten</title> </head> <body> <header role= banner > <H1>Min hjerteplass Lofoten</H1> <H1>dra på besøk...</h1> <nav role= navigation > <ul> <li>title= Min hjerteplass Lofoten </li> <li>title= Historien </li> <li>title= Opplevelser </li> <li>title= Fiskerestauranter </li> </ul> </nav> <section> <main role= main > <h2>historien</h2> <article> <p>historien i Lofoten handler om fisk. Fisk fisk og fisk. Lofotinge har altid vært bønner og fiskere Alt i vikingtiden started eksporten av tørfisk fra Lofoten Under Christian IV. 90 % av bruttonasjonalproduktet kom fra Lofoten. I dag er fisken fortsatt hodesyssel. Turister kommer rett etter.</p> </article> </main> </section> <footer role= contentinfo > Kontakt Home </footer>
<!doctype html> <html lang= no > <head> <meta charset= utf-8 > <title>mitt Lofoten</title> <link rel= Stylesheet href= LofotenStyles.css > </head> <body> <section> <main role= main > <header><h2>historien</h2></header> <article> <p> <h5>historien i Lofoten handler om fisk. Fisk fisk og fisk. Lofotinge har altid vã rt bã nner og fiskere Alt i vikingtiden started eksporten av tã rfisk fra Lofoten Under Christian IV. 90 % av bruttonasjonalproduktet kom fra Lofoten. I dag er fisken fortsatt hodesyssel. Turister kommer rett etter.</h5> </p> </article> </main>
OPPLEVELSER <!doctype html> <html lang="no"> <head> <meta charset="utf-8"> <title>mitt Lofoten</title> </head> <body> <header role="banner"> <H1>Min hjerteplass Lofoten</H1> <H1>dra på besøk...</h1> <nav role="navigation"> <ul> <li>title="min hjerteplass Lofoten" </li> <li>title="historien" </li> <li>title="opplevelser" </li> <li>title="fiskerestauranter" </li> <li> title="linker"</li> </ul> </nav> </header> <section> <main role="main"> <h2> Opplevelser </h2> <article> <p>du kan gøre alt i Lofoten <li>surfe på noen av verdens beste bølger <li>spise utrolig god fisk <li>gå på spetakulære fjellturer <li>besøke vikingtiden <li>ta på hvalsafari eller fisketur <li>ligge på ryggen i snøen og nyte nordlyset</p> </article> </main> </section> <footer role="contentinfo"> Kontakt Home </footer>
LINKs <!doctype html> <html lang="no"> <head> <meta charset="utf-8"> <title>mitt Lofoten</title> </head> <body> <header role="banner"> <H1>Min hjerteplass Lofoten</H1> <H1>dra på besøk...</h1> <nav role="navigation"> <ul> <li>title="min hjerteplass Lofoten" </li> <li>title="historien" </li> <li>title="opplevelser" </li> <li>title="fiskerestauranter" </li> <li> title="linker"</li> </ul> </nav> </header>> <section> <h2> Fiskerestauranter </h2> <p>link to the <a href="same.htm" title="same directory kink">same.htm</a> page, in the same directory</ p> <p><a href="http://svinoya.no/restaurant" title="link to Børsen Spiseri." target="_blank"> </a>børsen Spiseri</p> <p>fiskekrogen<a href="http://www.fiskekrogen.no" title="fiskekrogen" target="_blank" > </a></p> <p>smaken av Lofoten <a href="http://smakenavlofoten.no/restaurant/meny" title="smaken av Lofoten" target="_blank"> </a></p> </section> <footer role="contentinfo"> Kontakt Links Home </footer> </body> </html>
I m aware that there is failor in the coding and will keep on working with that... Now back to Lynda.com Week 24 Learning activity : Take the basic website you have designed in your previous two Learning Activities in this module (Learning Activity - Put Thought Into Your Design and Learning Activity - Planning the Structure) and convert that into HTML and CSS code. This will help you understand the importance between the design and the programming phase and how they work together. Don t stress if you can t get everything right, just do as much as you can.
Font: H1:Bauhaus 93 5em reg red Bold H2: Chiller 3em reg H3: Chiller 2.5emreg H4: Chiller 3em reg white H5: Chiller 1.5em pt reg white linehight 2 Header: h2 red, h1, h2 red, h3 orange Nav: h4 Article: h5 Footer: h4 blue I choose these fonts to make the content more informal and playfull. Also I make the font-size in the article slightly larger than I would have done a more serious and heavy article. For the same reason.
Backgroundcolor :F5F6F7 I don t want it completely white. Margin and Padding From week 20 I planned to have this structure at each page: But I see now now that I forgot a footer! I will add that in some way. I still want to keep the proportion for the pages, so I will keep the index page as planned, since the nav contents the info that I want in the footer. On the other pages I will add a footer with little logo, links to contact, maps, links and index-return
A little, read huge, frustration: I see that I really need to refresch my memory about Dreamweaver, HTML and CSS and have spend A LOT of time going through a lot of Lynda Videos again. It is so timeconsuming and I am behind a lot. But I like it a lot and will carry on... I have been cleaning up a lot in my CSS sheet, and maybe too much...? Lynda Videos that helped: Making Sense of the CSS Box Model with Morten Rand-Hendriksen Where I am now and because of too much timeconsuming have to stopp for now: LofotenStyles.css Html{ margin:0; Padding:0; background-color:#265490; body{ width: 960px; margin: 1em; background-color: white; font-family: Chiller; float: right; padding: 1 1em; height: auto; header{ margin-bottom:1em; text-align:center; nav { width: 340px; float: left; background-color: #FCFBFB; margin: 0em 0.5em 0.5em 0em; padding-left: 0 em; padding-top: 0em; article{ width: 610px; Padding: 0em; margin: 1em 2em 2em 0.5em; float: left; background-repeat: no-repeat; background-size: 960px 600px;
height: 400px; background-image: url(../../../unnamed%20site%202/arbeid%20med%20t%c3%b8rfisk.jpg); footer{ margin: 1em; Padding: 0.6em; text-align: center; height: 50px; float: none; clear: both; width: 960px; background-repeat: no-repeat; banner{ text-align:center; a: hover {color:gul; img{ display: block; margin: 0 0 0 0px; padding: 0; max-width: 100%; width: 960px; height: 747px; H1{ H2{ font-family:bauhaus 93; font-size:5em; font-weight:bold; font-style:normal; color:#1b75bb; font-size:3em; font-weight:normal; font-style:normal; color:#ef4f24; H3{ font-size:2.5em; font-weight:normal; font-style:normal; color:#f4854c;
H4{ font-size: 3em; font-weight: normal; font-style: normal; color: #F4854C; background-size: 960px auto; H5{ font-size: 1.5em; font-weight: normal; font-style: normal; text-align: center; color: #F7F9F7; line-height: 2; background-image: url(../../../unnamed%20site%202/historien.jpg); width: 960px; H6{ font-size: 1.0em; font-weight: normal; font-style: normal; color: #EF4F24; line-height: 2; vertical-align: middle; H7{ font-family:bauhaus 93; font-size:2em; font-weight:bold; font-style:normal; color:#1b75bb; H8 { font-size: 1.3em; font-weight: normal; font-style: normal; color: gray; line-height: 2; float: left; clear: left; H9{ font-size:1.0em; font-weight:normal; font-style:normal; color:#f4854c; line-height:2 ul{ font-size: 2.8em; font-weight: normal; font-style: normal; color: hsla(0,20%,99%,1.00);
background-color: #FBFBFB; body header { body header { width: 960px; Ref.23 Structure on Lofoten Index.html: <!doctype html> <html lang= no > <head> <meta charset= utf-8 name= viewport content= width=device-width > <title>mitt Lofoten</title> <link rel= Stylesheet href= LofotenStyles.css > </head> <body> <header role= banner > <p><h2>min hjerteplass</h2> <H1>Lofoten</H1> <H3>dra på besøk...</h3></p> </header> <nav role= navigation > <ul> <p style= font-style: normal; font-weight: normal; text-align: left; background-color: hsla(216,62%,28%,1.00); padding-left: 0.2em; >Mitt Lofoten <a href= Ref. 23 Structure on Lofoten Mitt Lofoten.html title= Min hjerteplass Lofoten ></a></p> <p style= font-style: normal; font-weight: normal; text-align: left; background-color: hsla(216,63%,41%,1.00); padding-left: 0.2em; >Historien <a href= Ref. 23 Structure on Lofoten Historien. html ></a></p> <p style= font-style: normal; font-weight: normal; text-align: left; background-color: hsla(216,62%,50%,1.00); color: hsla(0,20%,99%,1); padding-left: 0.2em; >Opplevelser<a href= Ref. 23 Structure on Lofoten Opplevelser.html > </a></p> <p style= font-style: normal; font-weight: normal; text-align: left; background-color: hsla(216,62%,66%,1.00); color: hsla(0,20%,99%,1); padding-left: 0.2em; >Fiskerestauranter<a href= Ref. 23 Structure on Lofoten Links.html ></a></p> <p style= font-style: normal; font-weight: normal; text-align: left; background-color: hsla(216,61%,82%,1.00); padding-left: 0.2em; >Linker<a href= Ref. 23 Structure on Lofoten Links.html ></ a></p> </ul> </nav> <p> </p>
<article> </article> </body> </html> Ref.23 Structure on Lofoten Mitt Lofoten.html: <!doctype html> <html lang= no > <head> <meta charset= utf-8 > <title>mitt Lofoten</title> <link rel= Stylesheet href= LofotenStyles.css > p {text-align: center; </head> <body> <section> <main role= main > <header><h2> Mitt Lofoten</h2></header> <article role= article > <p> <h5>idet jeg lander med Widerøe på Leknes og går ut flyet blir jeg altid møtt av Lofotens friske havlukt.<br>- Jeg speider etter en skikkelig "lofoting" for å få en fin liten dosis av denne herlige dialekt.<br> <h4>lykke!</h4> <br>så er det gode venner, fantastisk fisk og spetakulærer fjellturer.</h5> <h3>godt for sjelen er det!</h3></p> </article> </main> </section> </section> <footer role= contentinfo > <p><h8>kontakt Kart</h8><h6>Min hjerteplass</h6><h7>lofoten</h7><h9>dra på besøk...</ H9><h8>Links Home</h8></p> </footer> <section> Ref.23 Structure on Lofoten Historien.html <!doctype html> <html lang= no > <head> <meta charset= utf-8 > <title>mitt Lofoten</title> <link rel= Stylesheet href= LofotenStyles.css > </head>
<body> <section> <main role= main > <header><h2>historien</h2></header> <article> <p> <h5>historien i Lofoten handler om fisk. Fisk fisk og fisk. Lofotinge har altid vært bønner og fiskere Alt i vikingtiden started eksporten av tørfisk fra Lofoten Under Christian IV. 90 % av bruttonasjonalproduktet kom fra Lofoten. I dag er fisken fortsatt hodesyssel. Turister kommer rett etter.</h5> </p> </article> </main> </section> <footer role= contentinfo > <p><h8>kontakt Kart</h8><h6>Min hjerteplass</h6><h7>lofoten</h7><h9>dra på besøk...</ H9><h8>Links Home</h8></p> </footer> Ref.23 Structure on Lofoten Historien.html <!doctype html> <html lang= no > <head> <meta charset= utf-8 > <title>mitt Lofoten</title> <link rel= Stylesheet href= LofotenStyles.css > </head> <body> <header><h2> Links</h2></header> <section> <h2> Fiskerestauranter </h2> <h3><p><a href= http://www.fiskekrogen.no title= Fiskekrogen target= _blank >Fiskekrogen </a></p> <p> <a href= http://smakenavlofoten.no/restaurant/meny title= Smaken av Lofoten target= _blank > Smaken av Lofoten</a></p></h3> </section> <footer role= contentinfo > <p><h8>kontakt Kart</h8><h6>Min hjerteplass</h6><h7>lofoten</h7><h9>dra på besøk...</ H9><h8>Links Home</h8></p> </footer> </body> </html> I simply can t find a way to show how the design looks, so you will only get the code s here for now. Challenges I have to take next is: How to position text elements how to work better with the boxes how to work with fluid grids