Web Design Screenshots

I created my web site design in Photoshop and then using the slice tool to create the dimensions of the buttons and interactivity in the website then selecting the and combining the slices which weren’t necessary as separate slices.
I opened the html file in Dreamweaver that I had saved as a web file in Photoshop.

Then selecting the one of the slices which was a sticky note then in the properties box adding a link to the page; I did this on all sticky notes and all web pages and saved them. I did his to have a consistent design element through out of web design and also so it was easy to go to different pages and not have to keep pressing the back key and having to keep going back to the homepage to get anywhere on the website.

At first when I added the link a white space appeared on the design as seen above. So I went back to the properties box and typed ‘0’ in the border box this is so there will be no space left there and will give a cleaner look on my design.

I also wanted the homepage to have the images to be hover over buttons to the different pages so they added to the interactivity. I selected the laptop slice in Dreamweaver and on the insert tab I inserted a rollover image. I then selected the images I wanted and added text so it was clearer on which page it would be linked to this is for the viewers. I had already changed the original picture within the slice in Photoshop by changing the hue/saturation and making it extremely light so it was much more obvious what was being hovered over.

I then added the URL which was the next page in this case it was the contact page and pressed okay. I then found similar to before where I had to type in ‘0’ for the border which I first tried but it didn’t; I then tried deleting the original image and viewed it and it was now working properly, I then did this for the other two images on the home page.