<Time and Space> View of Bergen. DIKULT 105 Web Disign words.

Size: px

Start display at page:

Download "<Time and Space> View of Bergen. DIKULT 105 Web Disign words."

Melinda Hicks
5 years ago
Views:

1 <Time and Space> View of Bergen DIKULT 105 Web Disign words 0

2 1 Illustration : First style (Old note style), in Firefox

3 2 Illustration : Second style(grey style), in Firefox

4 [Source Code] <!DOCTYPE html> <html> <head> <title>time and Space</title> <meta charset="utf-8"> <link rel="stylesheet" href="css/three.css" id="replacelink"> <script src="scripts/switchcss2.js"></script> <link href=' Gloria+Hallelujah Indie+Flower Comin g+soon Architects+Daughter Dancing+Script' rel='stylesheet' type='text/css'> <body> </head> <header> <h1> View of Bergen :-) </h1> </header> <a id="switch" href="#" onclick="switchcss2('css/three.css', 'css/four.css');return false;"> [Click Here!] </a> <figure id="topleft" class="leftfigure"> <a href="img/uliken.jpg"> <img src="img/ulikensmall.jpg" alt="daytime view"> </a> <figcaption> Daytime view of Bergen from Ulriken </figcaption> </figure> <figure id="topright" class="rightfigure"> <a href="img/floyenevening.jpg"> <img src="img/floyeneveningsmall.jpg" alt="evening view"> </a> <figcaption> Evening view of Bergen from Floyen</figcaption> </figure> <figure id="centerbottom" class="leftfigure"> <a href="img/floyennight.jpg"> <img src="img/floyennightsmall.jpg" alt="night3 view"> </a> 3

5 <figcaption> Night view of Bergen from Floyen </figcaption> </figure> <figure id="bottomright" class="rightfigure"> <a href="img/port.jpg"> <img src="img/portsmall.jpg" alt="night1 view"> </a> <figcaption> Night view of Bergen from the Port </figcaption> </figure> <figure id="bottomleft" class="leftfigure"> <a href="img/village.jpg"> <img src="img/villagesmall.jpg" alt="night2 view"> </a> <figcaption> Night view of Bergen Village </figcaption> </figure> <h2 id="part1"> You can enjoy</h2> <h2 id="part2">the different view of Bergen with time</h2> <h2 id="part3">which one is your favorite view?</h2> <footer> <p> Copyright MiJung Yoo. all rights reserved. </p> </footer> </body> </html> 4

6 [CSS1_First Style] body { background: url("../img/simple-background.jpg"); background-size: 100%; background-attachment: fixed; text-align: center; position: relative; height: 1020px; } h1 { color: brown; margin-top: 0%; } #switch {position: absolute; top: 20px; right: 45px; } figure { position: absolute; } #topleft { left: 0; top: 100px; } #topright { right: 0; top:100px; } #bottomleft { left:0; top:550px; } #bottomright { right:0; top:550px; } #centerbottom { left:50%; top: 550px; margin-left:-250px; } h2 { font-family:'waiting for the Sunrise', cursive; } #part1 { font-size: 34px; } #part2 { font-size: 34px; } #part3 { font-size: 34px; } figcaption { font-family: 'Waiting for the Sunrise', cursive; font-size: 30px; } 5

7 header { background-color: transparent; margin-bottom: 90px; } header h1 { font-size: 80px; color: brown; font-family:'indie Flower', cursive; } footer { position: absolute; width: 100%; right: 0; bottom: -50px; background-color: #FFCC99; text-align:right; font-family: 'Dancing Script', cursive; } footer p { color: black; screen and (max-width: 1650px) { img { width: 75%; } screen and (max-width: 1400px) { img { width: 50%; } } 6

8 [CSS2_Second { font-family: 'cookiemonstermedium'; src: url('../fonts/cookiemonster-webfont.eot'); src: url('../fonts/cookiemonster-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/cookiemonster-webfont.woff2') format('woff2'), url('../fonts/cookiemonster-webfont.woff') format('woff'), url('../fonts/cookiemonster-webfont.ttf') format('truetype'), url('../fonts/cookiemonster-webfont.svg#cookiemonstermedium') format('svg'); font-weight: normal; font-style: normal;} body { background: url("../img/simple-background2.jpg"); background-size: 100%; background-attachment: fixed; text-align: center; width: 57%; margin-left: auto; margin-right: auto; position: relative; height: 1520px; } h1 { text-align: left; margin-left: 20px; } #switch { position: absolute; top: 72px; right: 10px; } h2 { color: white; font-family: 'coming soon', cursive; font-size: 34px; } #part1 { position: absolute; bottom: 235px; right: 130px; } #part2 { position: absolute; 7

9 bottom: 170px; right: -90px; } #part3 { position: absolute; bottom: 100px; right: -45px; } header { background-color: #CCCCCC; margin-bottom: 25px; } header h1 { font-family: 'Gloria+Hallelujah', cursive; font-size: 70px; color: black; }.leftfigure { float: left; margin-left:0; }.rightfigure { float: right; margin-right:0; } figcaption { font-family: 'coming soon', cursive; font-size: 25px; } footer { font-family: 'cookiemonstermedium'; text-align: right; font-size: 20px; position: absolute; width: 100%; right: 0; bottom: -85px; background-color: #CCCCCC; } footer p { color: black ;} 8

10 [Wireframe] 3 Illustration : Wireframe 9

11 [Main Text] < Time and space in Bergen> In this Assignment, I want to show the 'View of Bergen' with time. Same place in Bergen, we can enjoy another view with time, I think it's really go well with the topic, this is the why I choose this 5 pictures. However I'm beginner of the web designing, so that I want to make simple web. So, in wireframe, I tried to arrange the picture just in sequence. In text, I just explain where and when this picture is taken. Therefore, you can easily find tight relationship between picture and text. The first CSS, which I named it as 'Old note style', looks old-fashioned. I want to choose the simple background to emphasize the pictures. So the background also looks oldfashioned. But because of this old-fashioned background, I can express the 'old note style'. Also, I select the font which looks like hand writing. Therefore, I can make 'old note style' web. The second CSS, which I named it as 'grey style', is very dark. I intend to make totally different web page with the first CSS, so I choose the dark (but simple) background. (the reason why I choose the simple background is same as the first CSS.) In this second CSS, I used the color which is similar to grey; light grey, dark grey, black and white. So I can feel `coherence` in this web. According to Roland Barthes(1977b/1964) in 'The Reotoric of the Image' there will always be words inside ot next to an image that assist us in our interpretation.(fagerjord, Anders. 2010,p.108.) You can enjoy the different view of Bergen with time. Which one is your favorite view? : This is what I wrote in text under the picture. I think all of the view of Bergen is great, but I feel totally different with time. In the daytime, I just feel oh, it's Bergen's view. However, in night, I think it's very calm and peaceful and much more beautiful than the daytime. Actually, I love the night view of the Bergen(my favorite), so I just want to ask to others.. Which one is your favorite? to share our different thinking. I want to make the web pages look simple and stable. Then, people who look this web can feel comfortable. So I just put the pictures in sequence in both style. First one looks like board. And the picture surrounds the text, so that it seems more stable. Next, the second one looks like normal web. It's not that special, but it's very normal style so that no one has repulsion of this web. I think basic style can be easily accepted and never tired of it. Finally, when I tried to test my work, full-screen page is perfect. (in my opinion) But, when I resize the web, picture moves at its direction. I adjust a little bit with picture, but in first style, even though I tried my best, I don't know how to make smaller font size. It's my first time to make my own web, still I'm not good at making a web, So I think it's what I did my best, therefore I'm content of it. 10

12 [Reference List] Fagerjord, Anders "Multimodal Polyphony. Analysis of a Flash Documentary". In Inside Multimodal Composition, edited by Andrew Morrison, Cresskill: Hampton Press. 11

Multimedia Systems and Technologies Lab class 6 HTML 5 + CSS 3

Multimedia Systems and Technologies Lab class 6 HTML 5 + CSS 3 Instructions to use the laboratory computers (room B2): 1. If the computer is off, start it with Windows (all computers have a Linux-Windows