Development: The Second Chapter

Steamrolling

Development of the website has been steamrolling these past few days, I have developed each webpage to a fair standard through Html and Css codes. Layout difficulties were almost about to hinder progress on website designing but I managed to tweak the Css to work with image positions and background image locations.

Desiging Logo for the Header has been fully resolved and has been added to the webpages along with hyperlinks for each title (such as Home, Music etc.) Using the 'a href' tag.

Graphics For Headings

Using graphics for headings will be useful to help the user identify which webpage he/she is on. Using Adobe Illustrator and Photoshop I have produced some interesting ideas which I will add to the website as it progresses throughout the next week or so.

I have stuck to the original idea of keeping the font family the same for all the headers and logo's used within my website. Using the special 'Star Vader' font I found over the internet and using offset paths to create the graphical colour effects, I have found it really useful to make one style of logo. I have also kept to the same house style of colours: Red, White, Blue and Black.

In Action

Bring on the Hoverbox

Using hoverboxes in Html and Css I have been able to use this idea to expand the size of images when the mouse cursor moves over an image. By harnessing the codes, I should be able to come up with an effective image gallery to improve the quality of the webpages.

Sneak Peek - Snippets of Hoverbox Code and Demo

When the mouse cursor moves over the image, it will expand.

In action on the Music webpage

Html

The Html is the most important part when viewing the hoverbox. The Html contains the image source and the class which is set to "preview". Each image can also be setup as a hyperlink, which will be ideal for linking to other webpages on the site.. however I have currently set the names of mine to "#" for later use.

Note:Full Css has not been displayed.

Bottom of the Page

Whats it going to be?

The bottom of the webpage will be a useful area to list favourite links to my webpage, it will also contain a logo of Mozilla Firefox to show users that this website favours this web browser especially in the Fun! webpage (although the rest of the site works in IE7+ too).

In the image above, I have matched the house style of the main header banner using the red and white gradients and a thick red border to make it look seperate from the main content and the body background colour. I have included a link to the Home webpage along with various links to favourite sites of mine which maybe useful to any user willing to use this website regularly. Most importantly it contains the W3C validation markup certificate which shows that the site passes validation.

I should really add a link which can help users jump to the top of the page for better usability.

Advanced Layout Ideas and Final Design

From creating sketches of my website layout, to conducting practice and creating my final layout idea through Dreamweaver. I have overcome some new ways of learning along with some good design ideas for future usage if I ever come to make other websites in the near future.

Final Planning Ideas

Establish a layout which is fully usable for any age group from any demographic.

Colour schemes need to be similar and have something in common. (Achieved: Red, White, Blue and Black).

Simplicity is key - Finding a way of creating a website using complex code which I can learn from but making the website look simple for users to navigate and read through.

Must pass W3C Markup Validation Service for both Html and Css templates

Must contain a sufficient amount of Javascript and must have the use of validation through a form so users can input the correct information.

Navigation must be clear on each webpage so the user can navigate quickly without suffering problems.

Website Final Layout

This is a zoomed out screenshot of my website, as you can see the header is bold and pronounced and contains the navigation buttons along with the robust logo it contains. The central area is where the content is. There are hoverbox images and a special overflow box full of text. This will help the user scroll up and down in this area of the webpage instead of having to use the main scroller on the side of the webpage..improving usability. The content background is the image of clouds and a pure blue sky to display a peacful atmosphere. It mixes very well with the other colours used within the website. I have used the black background idea to keep the website central along with black within the header names surrounding the inner colours of the other logo's I have created through illustrator and photoshop. Almost forgot to mention. I have added a clock using Javascript within the Home page.. just a random feature to help users keep track of time!

Towards the bottom of the webpage, it contains where all of the hyperlinks are going to be situated to other websites (which are my favourites). It matches the house style of the header colours background.

A close-up of the top of the webpage.

The Javascript clock can be seen in higher detail, along with the hoverbox image gallery and the overscroll box.

In conclusion

In conclusion to the final designs of my website, I am going to choose this as my main layout for each webpage. This is because it is very suitable for presentation, the layout is easy to establish to any user and colour helps spot and attract the users attention. Navigation is used professionally to help the user guide through page to page. This is it!