Website Development: Part 3

Almost There

During this week I have initially been working on the webpages, adding the new banner along with some newer features such as my box containers which have been set to hold the content within the webpages.

These containers were created using photoshop, the way I made them partially transparent is through CSS styling with various opacity codes which should make them cross compatible with many website browsers (I hope so..). If it isn't working on a certain browser then they should appear as an opaque container, not partially transparent.

In the About webpage, I have created my own image gallery, the user simply clicks on the image to make it expand. Then they can click it to make it shrink back to the thumnail size again. Again, this has an issue with Internet Explorer, it works but when an image is clicked, the webpage basically refreshes with the image appearing but the page jumps back up to the top. This will have to be fixed through CSS. The Contact and Fun webpages are pretty much in the same layout as the new Home and About webpages, but using the new transparent box containers improves and layout and visual features.

Website Development: Part 2

Banner

I have initially decided to change my banner and hyperlink images in order improve the features of each webpage. I have also decided to increase interactivity the user has with the website. To do this I have decided to create some rollover buttons using Adobe Illustrator and Photoshop (CS4). By simply creating two of the same image but different colour, I have been able to make a rollover hyperlink image. When the user moves the cursor over the link, it simply changes colour indicating where the cursor is focused.



As you can see above, the banner has been completely changed with different gradient colour usage and some 3D streak effects, which I will be applying more to the website later. The rollover hyperlinks are below the header within the content area; this makes it easier to identify (also due to size). The example shows that the Fun button has been highlighted red and the other buttons are not and this is due to the cursor rolling over the area.

Website Design: Development Part 1

Development

I have initially decided to being editing my website to finally increase my web presence.

I have been dismantling the website, taking out bits of old code and adding new material to increase the general visual quality of the site. I have completely dismantled the Homepage and because the CSS is one document and applies to all webpages. Heres an image to show the current construction.




The image above displays the current situation with the Homepage. The overflow scrolling box, images and the footer have been removed. The headers image has been shortened to 800px along with the content areas. This I feel makes it more centralised and more suitable for my website. The website hyperlink images in the header will be changed and my idea for this would be to used flash to make new buttons which will be animated, creating a better interactive effect to the site but keeping in mind not to over do it.


Webpage Removals
I have removed the Welcome and Music webpages for now. A preloading splash screen might be added by creating it in Flash CS4. Or I may go without. The Music webpage with the images will be completely removed. It has no true purpose within my website if I want to create a better web presence for myself.