Site Development (06/02/2011)

I have created the basic page layout to that of my designs, and below is an image of what I have made. I have tried to stick as close to my design as possible, but also using some more advanced CSS features such as ‘text shadow’ to make it look like the titles are glowing. Below is an image of the website current development.

I have realised it’s not much difference from my designs but the banner is the most noticeable part of the site. So I have a few ideas, I could create a new image for the header so it looks just like the designs. Below is an image of the new header image I could use to make it a lot like my designs.

I have also thought of making the header work in a different way by using two different images, one of the images will be for the header and one will be for the navigation bar. Below is an example of the two images I would have used to give it the same appearance to that of my designs.

+

Through this idea I figured I will be able to make the site have more functionality and give it more of an advanced appearance that will be functional across all web browsers. This would be to use sprite images. This is also a feature of CSS and it helps a lot making an (Image/button) change appearance when hovered over or clicked where all of the data is stored in one image. The site will be created to look for a certain range of pixels within the image. Below is an example image of the sprite I might use in the development of the site

I got this information and the example from a magazine I bought not so long ago, that shows some good techniques when developing websites. Below I have provided an image for the front of the magazine.

Or there is another method I have considered using which would be to use CSS to colour the background of the navigation bar links to the same colour of the images that are used for the site because this method will be saving on resources as I have a limited amount of data to cover.

I can use CSS to also change the colour of the background when the link is hovered over as well so it can be just as good whilst saving resources and data can make it seem a better option.

Initial Design

After being asked to crete designs, I created some basic designs for what I am attemptin to create. I am hoping to create the website as close to the designs I have created as possible. It makes the site easy to navigate and comfortable, the website looks clean and tidy and the colour combination doesn't cause any problems.

The first image shows the simple design I am going for using a banner, sidebar, page content and footer. Below is an image off the basic design for how the website will be laid out and how I aim to make it look.

The next image shows how the sidebar works when a link will be clicked. My plan is to make it similar to that of a drop down menu, I will aim to do this using JavaScript, this will also be helpful because I can use JavaScript to prevent repeating the text and having it changable in one place without having to change several pages of the site. Below is an example of the sites sidebar.

As you can now see there are more options availible under the Unreal Engine option. My plan is to make it so when a user clicks any of the availible links it will take them straight to that tutorial page. Below is an image of the link being activated.

If a user clicks any of the options at the top of the page where the banner is it will take them to a seperate page where all the tutorial lists are that are also shown in the sidebar when the type is clicked. For example if a user was to click the Unreal Engine banner link it will provide a view like the image below but show the options that were shown on the image above. Below is the image of banner link access to the root of the tutorial types.

Website idea

I have been asked to create a website for a module within my degree. The limitations that have been set are to have a minimum of 15 pages and the site must be under 3MB. Since then I have been asked to present my idea and I have decided to go with a tutorial website.

The website will have pages of tutorials that will be accessible to all users, there will be a range of tutorials from Photoshop, 3DS Max and even Audio Development. The tutorials with teach the users step-by-step basic instructions on how to develop using the specified software.

I will have to create and provide some designs for how I am going to base the structure of the website.