OUGD504- HTML/CSS Coding Development

Now I have my content ready I have started to code my website.

In the stylesheet I set up the font family and container box. I have coloured the container grey just so I can see where it is but it will be white on the index page as well as the first pages on the rest of the links.

Next I created a box at the top to contain the logo. I have added some padding at the top to compensate for the navigation bar which will be fixed on all pages.

I create the bottom box for the roll-over buttons to go in.

I had to create a CCS code for each button because the sizes were different for each button.

This is the code for the roll-over buttons

I have made it so the buttons turn grey when hovered over like below.

Next I started to code the navigation bar to be displayed on all the link pages. I decided not to have it on the home page because it isn't needed because of the links. It will only be displayed on the four link pages.

The code above is for the solid bar.

The code above is for the type/links

The default setting for the text was purple and underlined so I had to change the text-decoration and colour in the CSS code to get it to display properly. I made the text change to grey when hovered over so the user will know there are links.

I decided to use a rollover button for the logo.

Now every page is set up with navigation and ready for the content to be dropped into.

About Page

This page has two backgrounds so I created a separate CSS from the the homepage to allow the two backgrounds to be placed on top of each other.

I added the body copy in dreamweaver so I had to create a new CSS. I had to adjust the width of the body copy box because I wanted it to line up with the heading. 

To get it to display properly I had to place all the div tags inside the background1 div. I used the same top div as the homepage for the heading image to go into.

On the second background I set up two columns. The left one contained the body copy and the right is an image.

I placed these divs in the second background div tag. The heading was originally black but I felt it didn't stand out enough on the blue background. I think the orange works much better with the background and illustration.

Gestalt Principles Page

I didn't need to set any new tags up for the opening page, I just had to make the heading in illustrator with the same width as the container and 203px height.

-Proximity

I had to make a new container box to put the images in. Now I can use the same box to place all the images in.

For the next page I used the same CSS tag for the left and right columns. I had to make a new tag for the image and I decided to rename the text tags so I could use different colours to suit the background.

I wanted the text to be justified so I added it into the Css.

-Closure

For next image I repeated the process but I had to adjust the top-margin because the image was a bit to close to the heading.

I created the two column layout the same as before, I didn't need to change anything because I used the same tag for the image and text.

-Continuation

I decided to change the colour of the heading because it was clashing with the black cross.



I just had to adjust the left-margin of the image because it was a bit too close to the text.

-Similarity

-Figure-ground

Figure-ground Page

The CSS wasn't working properly with the same tags for the headings as the other pages so I had to make new ones for the figure-ground pages. This was strange because the text div tags worked fine.

To keep all the headings consistent in width, the height varied quite a lot for the figure-ground heading so I had to set the top margin of the text box to -100px to compensate.

I had to make a new text CSS fore this page because the text was to far down the page and if I adjusted the original CSS it would affect all the other pages.

For the image I just had to adjust the top margin to get it to align with the text.

This is the code for the next two pages.

For the second page I used the same text CSS as the gestalt pages. Again I had to adjust the top margin. For some reason the the images are all over the page for this section of the site although I am using the same CSS as before so I have had to compensate differently each time.

Gallery Page 

This is the code for the heading. I used the same container as the other pages just with a different height size.

I had to make a new CSS for the background for this page because the images when together were longer than 800px.

To get the images to display in a three column grid I used the table setting in Dreamweaver and dropped the images images into each cell in the design view. I had to adjust the dimensions within dreamweaver for them to line up properly. 

The width is 270px and the height is 203px and 320px for the taller images. 

Below is the code for the images. I used the same bottom container as the images on previous pages and placed the code within this so the layout would be the same width as the other pages.

Now I have finished coding the main contents of all the pages all I need to do is figure out how to create a navigation method, so on the pages with long scrolls it will allow the viewer to jump back to certain pages for better usability.