“Collect portrait images from the past 1000 years, one for each century, and present it on your reflective journal, describing the use of light in each portrait.
Use http://www.issuu.com for picture presentation, and embed into your journal.”
This was actually a time consuming task. Not easy to find a portrait from each century, and obviously, as photography was not properly developed until the first few decades of the 19th century.
However, here’s my presentation of my findings for the learning activity:
“With the file created in the previous learning activity, please place the 3
tags from vertical position, to a horizontal position.
Before you start, you have to set width to the <div-id> tag, and the <p> tags.
Practise positioning using absolute positioning, relative positioning and float.”
So, this was a bit of a challenge. Didn’t quite get it in the beginning with all the measurements and “maths” you have to do. (I’m absolutely blind to anything that has to do with numbers…)
However, I got the hang of it eventually, after going back and forth in the curriculum, and watching the lectures a couple of times.
So, I’ve played around with absolute and relative positioning, and I’ve also been practicing float.
Here’s absolute position in Firefox:
Think I have to keep on working on those measurements!
“Please open up a new HTML document, and add three <p> tags with text.
Place the three <p> tags in a <div id> tag.
Save the file in an html format.
With a new CSS Styling document, add the following properties and values to the <p> tag:
Margin: 15 px
Padding: 5 px
Border: Thin, Solid, #000
Make a print screen of the HTML document, tested in your browser and add name to the box model content.”
Here’s the result:
Not too sure if I have done the naming correctly, as I was a bit confused to what we were supposed to do at the last part of the task.
Managed to do this technically correct though – just hope the naming part was how we were supposed to solve that part of the learning activity.
“Keep on using the HTML website you’ve previously been working on. Make sure that your CSS file is linked to your html file.
Add different background colour to the different div-tag boxes defined in the HTML document.
Mark one word that is repetitive on your website, and style it as you wish (colour, font, size, bold etc.)
Add a thin solid black border to one of the tag elements on your website.”
Here’s how it looks like in Dreamweaver – at least some of it… 🙂
And, this is how it looks like in Firefox:
Alright! Fun stuff 🙂
“Using the website you created in week 17 with a word processing program, please create a wireframe that shows how the structure of the website is going to be presented visually.
Look back on previous learning activities, to see how you can structure the elements that you wish to display on the website.
Open the existing index.html file that you created in week 17, and divide the content into building blocks with id attributes.
Test the result in your web browser, create a print screen, and present on your reflective journal.
(Next week we will place the building blocks at the designated areas, according to the wireframe created this week…)”.
Here’s my wireframe:
Here’s how the index file looked like before adding id attributes:
And here’s how it looks like after adding the id attributes:
Not too much of a change, but I’m exited for next week just to see how this will end up.
I’m really starting to understand more in the world of Webdesign. However, I have to keep my tongue straight in my mouth, cause it seems like if you misunderstand, or make a small mistake, it really takes a lot of effort to straighten out again. (Especially if you don’t understand where the error has been made…).
Also, I haven’t quite started this periods mandatory hand-in just yet. Really felt lost when starting up this subject, so I figured I get more into the learning activities before creating the website that we are supposed to.
Feels like I’m getting ready now though, and might just take some time away from my little baby boy to get things started.
Have a nice weekend all!