DESIGN FOR WEB//WEBSITE DEVELOPMENT//OUGD504

STARTING THE WEBSITE // DEVELOPING WEBSITE:
After creating my wireframe and scamps I had a pretty good idea of how I wanted my website to look, being very inexperienced/having no experience on dreamweaver made the task slightly daunting and therefore felt restricted in some designs which I hope to improve with the opportunities given to use dreamweaver.

I started with the stylesheet, coding the numbers according to measurements in my previous plans (wire frame etc.)  I wanted my content to be left aligned,


#wrapper {
width:1024px;
height:768px;
margin-left:auto;
margin-right:auto;
}

#header {
width:1024px;
height:165px;
position:relative;
float:left;

I entered the following, the width being 1024px for content, navigation and header.  All floating left, margin - right: 12px

I started designing the index page first, the first thing was to create the buttons, when hovering over the buttons I wanted them to jump up slightly, to do this I needed to create the button, the exact size and font I wanted it to appear on the website in illustrator.  This is my culture button.  I typed it out and saved it for web on illustrator, with a transparent background, to give freedom for design incase I wanted to change my background colour from white.  I then saved a second image of exactly the same word, size and font, just moved up slightly, I saved this as 'culturebuttonrollover.'

In dreamweaver, I then clicked on insert, image object and rollover image:

Placing all my images in my 'tea website' folder were then easy to find when placing all the images as buttons.

I did this for all the buttons and had the navigation central as planned on my scamp:

I then applied the same process to making titles for each of my pages, these are the following pages:

I wanted to have circular images running throughout the website, especially on the homepage and the 'Teas' page.  I created a slipping mask on illustrator of some interesting tea images.  After saving the images as homepage tea images I then saved the second set of same images with the opacity lowered and tea facts written on them.

This is what the homepage will look like, I wanted to keep it simple and minimal amount.

The layout of my website has been made so that the text runs across, I edited the size of my text and was aware the 'Culture' page could look very overwhelming with loads of text, therefore I created the titles for the different tea cultures within the page on an image, lowering the opacity:

PAGE PROPERTIES:

As you scroll down more images are revealed before different cultures.

THE HISTORY PAGE:

Text aligned to the left and justify

I wanted to create something that would look clean, my target audience for this website would be older people as it shows the love of tea, however, I can see how I would be trying to reach out to a younger audience as the popularity of tea has taken a dive in recent years after looking up facts about tea in 2012.