Category Archives: Week 18 – Navigation and Introduction to Dreamweaver

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

Advertisements

Navigation and Introduction to Dreamweaver – Learning Activity 2.4 – Sitemap

“Draw up sitemaps from three of the websites previously worked with, earlier this week.”

Sitemap 1 – http://www.karmoygeddon.no

Karm√łygeddon Sitemap

Sitemap 2 – http://www.harleydavidson.com

HarleyDavidson Sitemap

Sitemap 3 – http://www.wikipedia.org

Wiki Sitemap-Recovered

This was a pretty tedious task to be honest. I guess it’s easier when creating a website yourself, to create a sitemap in advance, and not like we did here.

Anyways – almost done for the week ūüôā

Rock’n’Roll

-Marit

Navigation and Introduction to Dreamweaver – Learning Activity 2.2 – Building Blocks

“Pick out three websites from the previous learning activity.

  • Define each website’s elements and building blocks.
  • Create a wireframe of each of the three sites main page.
  • Name the building blocks.”

A bit of random naming of the blocks here, don’t know if I’ve got the hang on the technical terms quite yet, but here’s my go at the task:

Wireframe – http://www.karmoygeddon.no:

Karm√łygeddonWireframe

Pretty simple website – only aiming to provide information to the viewer.

Wireframe – http://www.listeverse.com:

ListeverseWireframe

Several blocks containing links to specific lists, whether it’s recently added ones, “top ten” ones or the most popular ones.

Wireframe – http://www.matprat.no

MatpratWireframe

More elements than the two previous sites. Own bloc for memeber area of the site. And there’s alo two search engines on main page of the site.

That’s it for now…

Rock’n’Roll

-Marit

Navigation and Introduction to Dreamweaver – Learning Activity 2.1 Research – Websites

Start of a new week, and a new tattoo inked onto my body. So while I’m sitting here scratching like a mad cow, this was our first learning activity for the week:

“Find 10 separate websites, that are different in:

  • Contents – message sent to visitor.
  • Navigation – how you navigate yourself on, in and around on the website.
  • Structure and design – wireframe.
  • Justify the choice of each link you have found.”

1. http://www.h-avis.no
Content: Daily/weekly updates on regional news in my hometown, some domestic, and a couple of foreign news as well. Mainly aimed at the locals in town and in this region.
Navigation: Direct navigation by entering the websites address in the address bar of your browser. Searchable navigation with an embedded search engine on the site, and tab navigation – which is a hyperlink navigation.
Menu choices are also highlighted when clicked on.
Wireframe: Ad placed on the very top of the website. Logo is placed on top along with navigation tabs, and is placed there on every “undersite” as well. Main box on website is all the little boxes of news and ads that you can click on for the full text of an article, or more info on the ad placed there.
At the very bottom of the site, there is a box with various practical information, such as “contact us”.

2. http://www.matprat.no

Content: Website containing recipes for different types of food, nutritious advice, and practical cooking advises.
Navigation: Direct navigation, searchable navigation, tab navigation.
Menu choice is highlighted when clicked on, and there’s also a “breadcrumb path”, when you click yourself deeper into the site. It’s shown under the logo on each page.
Wireframe: Divided into three main parts. 1. Top with logo on left hand side, and main tabs centered. 2. Left side box with subcategories. 3. Box on right hand side with links to different parts of members site.

3. http://www.youtube.com

Content: A site for uploading, sharing and showing off video clips and short videos.
Navigation: Direct navigation, and searchable navigation.
Wireframe: Simple design, with logo always placed on your upper left corner, along with the search engine. A small menu on the left hand side with a couple of searchable topics.
The middle of main page is filled with examples of videos that are most popular, and videos the visitor might like according to previous search history on the site.

4. http://www.foto.no

Content: Norway’s biggest website for photography. Contains interviews, articles, artwork, forums, and members area.
Navigation:  Direct navigation, searchable navigation and tab navigation. Logo is always placed on your top left side, and highlighted menu choices.
Wireframe: Ad placed on the very top of site. Followed by a tab box with main categories.
Main box is filled with clickable links to articles and interviews recommended to read.

5. http://www.ebay.com

Content: Widely known around the world for being a bidding and selling websites, where everyone, as well as private and businesses, can sell new and used items of all kinds.
Navigation: Direct navigation, searchable navigation and tab navigation. Logo is always placed on your top left side, and highlighted menu choices.
On this website, we also find linear navigation, where the user or visitor navigates through the website in an order decided by the web developer.
Wireframe: Top box is the searchable engine. Left hand side contains the main category tabs. Main box contains recent purchases, member log in etc.

6. http://www.harleydavidson.com

Content: Information on Harley-Davidson products and bikes, where you can find your dealer, contacts, and news etc.
Navigation: Direct navigation and tab navigation. Main logo is not always displayed, and certainly not in the same place as on the main site. Menu choice is highlighted.
Wireframe: Top box is the tab menu – and the main box basically only contains a link to new products. You will have to click on the tab menu to choose any other topic.

7. http://www..wikipedia.org

Content: This is probably one of the most well-known Internet Encyclopedias in the whole world.
Navigation: Searchable navigation, and direct navigation. The page also contains a main menu when first entering the site, where you can choose the language of your liking.
Wireframe: Logo is always displayed on your left hand side. There’s also a box to the left with different tabs the user can click on. On your right hand side, there’s a box with different type of information for the search you recently did. Mid page contains the information on your search. A plain and simple site, as you would presume the user would want for an encyclopedia.

8. http://www.listverse.com

Content: Basically a website with loads of different “top ten” lists in all sorts of categories imaginable.
Navigation: Direct navigation, tab navigation and searchable navigation. Sites logo is always displayed in top box centered.
Wireframe: Top box is mainly clickable tabs to the main categories on the site. Right hand side contains recent and top lists. And the main centered box contains recently added lists as well.

9. http://www.karmoygeddon.no

Content: Contains information about the yearly metal festival ‘KARM√ėYGEDDON’, and¬† other single gigs the promoters puts on during each year. Also contains information on previous gigs and shows.
Navigation: Direct navigation and tab navigation. Logo is always placed as a top box on each page you click into.
Wireframe: Down from the logo, there’s a box with tabs to main categories on the page. Main box contains ads from up and coming shows, and bands that will be playing in the near future.

10. http://www.dragenshule.no

Content: This is an alternative webshop, where you can buy alternative clothes, decorative items, patches, hair and make-up products etc.
Navigation: Direct navigation, tab navigation, always keeps the logo in the same place on top of page. This is probably a WordPress page, or similar.
There also seems to be a describing title of all sub pages.
Wireframe: Top tabs is aimed directly at the buyer with information on the site, contact information, log in and sign up choices.
Left hand box presents the buyer with purchase categories, and purchase information.
Right hand box shows ads, and middle section box contains example of products + more ads.

So, there you go. A lot of time spent ogling websites. Yaaaawn!
Finito!

Rock’n’Roll

-Marit