Site Development

Homepage

I started of by creating a div and filling in with colour to make the header for my page.

I then added in my name as an image and placed it into a div over the colour background.

Next I added in the nav bar as separate images for each section so that they could all be linked to separate pages.

Finally I added in the social media buttons, again as separate images so that I could link them separately.

The space header bar is all a little close together and there is a lot of empty space so I will move it all along to lengthen the site.

I moved them along so that the space is evenly distributed.

Next I added in the search bar and text. I did this as images because a working search bar would have required a lot of extra coding for it to work and this wasn't necessary for this site.

I then began to add in the images. To do this I made separate divs for each because I wanted to add rollovers on top of each of the images.

I created all of the images as rollover images which allowed me to add the text description as a layer on top that appears when the mouse moves over the image.

I then added in the rest of the photos but I found they were too big for the current page size so it will have to be extended.

I extended the size of the page so that I could fit all of my images in without having to go through and resize them all as this would have been very time consuming and I would no longer have been able to fit four in a row.

I added in rollovers to each of the images as with the first one.

I wanted the navbar to have a white text rollover to make it clearer for the user that these were clickable, so I used the rollover image function to add the same image in whit over the top.

This made the text change colour when the mouse rolls over it which I think makes the site clearer to use and more interactive with the user.

Work Pages

I used the same basic template as on the home page with the rollover navbar and links, and added in divs for the text and images that I had designed in illustrator. I decided to add the text in as an image so that I could keep my font and keep all the text on my site cohesive with the nav bar because if I had typed it all in to dreamweaver the font would be changed for anyone that doesn't already have it on their system.

About 

I added in the text and icons I designed in illustrator using divs. As with the portfolio pages, I chose to add the text in as images so that my font would show on all devices. 

Contact

First I added in the basic images that I had designed on illustrator using divs. I wanted the text form to actually work and for the user to be able to type into it so I worked on that next.

When I initially added in the text it had a drop shadow outline to it and I wanted the box I had previously drew to be the container for the text so I had to work out a way to delete this.

I edited the CSS by changing the border to 'no border' and this solved the problem.

The text is now fully editable and can be typed in by the user when they click in either of the text boxes.

I then did the same for the message part of the form and extended it to fit the entire box my increasing the height and width of the text form.

I wanted to create a working send button so that the text disappeared and was sent off when it was clicked and found this wasn't possible with the image button I had created so I settled for having a working button made by dreamweaver over having the one I had designed in my font. The entire form of text now disappears when it is clicked which is the 'sent' effect I wanted to create. I also chose to add in a message within the box to make it clearer that text can be added in the box. I made it so that the message appears every time the page is loaded, but it is erasable if the users wishes to replace it with their own message.

I then added in my icons for the emails and phone numbers. I decided that I wanted another interactive element on the page so I decided to make them rollover buttons. This would also make it clearer to the user that these are clickable which makes the site easier to understand and would show the user that clicking them would take them to a new email or to call the phone number.

I chose to invert the colours on rollover, so that when hovered over the black and white colours switch over. I did this by adding it in as a rollover image and creating the two images as separate layers.