Category Archives: Week 19 – Dreamweaver – Typography and Layout

A Simple Website (Oblig.6)

Whoooop!
Finally, I’m done with mandatory hand-in 6! Unfortunately, I haven’t really had the time to add any WordPress posts related to this hand-in during the project. You see, I’ve had a hard time understanding HTML, CSS and Dreamweaver altogether – so I’ve just been focusing on learning activities, and the project itself.
Forgivable, I’m sure 😉
Anyways… Here’s the project description:

“To achieve a basic understanding of HTML and CSS, you shall build a simple website, styled with CSS.

The website must contain:

  1. Index site.
  2. 3 subpages with the following themes:
    • Historical review of HTML and CSS (a brief written and visual display.)
    • Design online – links to good and bad websites describing the reason of the impression of the design.
    • Your own experience with usage and design of websites.”

So, it took me a while to get started, as I have never touched upon anything related to HTML and CSS. I had to do most of my learning activities, before getting started on the design, just to make sure that I had some basic knowledge.

I started with finding information that I was going to put on my site, along with my own writing on my index page, and third and last subpage.
I’ve mostly been using google and Wikipedia for my two first subpages, googling words like HTML, and CSS history, badly designed websites, good websites etc.

Next thing I did, was to create a wireframe. However, I found it hard to copy my initial wireframe, as I’ve had some serious issues with positioning in Dreamweaver. I’m still finding it really hard, although, I think I kind of got the hang of relative positioning at least!

So, after reading the curriculum, watching our lectures, and some additional tutorials, I started creating my website in Dreamweaver.

My head has been filled with tags, and boxes and questions on how to create buttons, background images and menus for the past couple of weeks.
Especially the last part – menus.
I’ve been trying and failing so many times during this project to create a menu that was going to be more pleasing to the eye, than the one I’ve landed on.
When I finally did have a menu that was pretty decent, I discovered that it’s pretty crappy to use a font that few people have stored on their machine. So, I had to change the font to a more widely used one, and the result is the result on my website today.
I also tried making buttons in Photoshop, but I couldn’t find enough time to finish that. I’ve used the “Spry” option in Dreamweaver instead.
Luckily, I’ve managed to create a custom background in Photoshop, and it’s probably the thing on my website that I like the most.

Final big issue I had, was today. FTP upload… My head was wrecked after receiving the error of “403 Forbidden” when trying to open my website in a Firefox, Chrome and Explorer browser.
I searched through google, I searched Noroff forums, I pulled my hair, and was biting my fingernails, when I finally came to realize – i saved my index file as Index.html. Capitol “I”. What a stupid mistake.
Only thing I had to do, was to save my index file with a lowercase “i”.
Problem fixed!

I am somewhat pleased with my final result, seeing I didn’t know anything about webdesign in advance.
It’s a decent enough first simple website I suppose, and I’m thrilled I actually managed to technically complete this.

In the future, I’ll be focusing more on the design, and expanding my knowledge and implementing this into my wedesigns.

Here’s my final result:

http://elevarbeid.webstudent.no/dmk1_nettstudier/marit_nilsen/

Hand-in is due tomorrow, and I can’t wait for the freakin’ weekend to come along!

Rock’n’Roll

-Marit

Week 19 – CSS Position – Learning Activity 3.3

“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:

Absolute

Think I have to keep on working on those measurements!

Rock’n’Roll

-Marit

Week 19 – Box Model – Learning Activity 3.2

“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
Background-colour: #999
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:

Boxmodell

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.

Rock’n’Roll

-Marit

Week 19 – Adobe Dreamweaver CSS – Learning Activity 3.1

“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… 🙂

Styled HTML

And, this is how it looks like in Firefox:

StyledBrowser

Alright! Fun stuff 🙂

Rock’n’Roll

-Marit