I began by redesigning my masthead to suit the website, i changed the dimensions, added a menu bar, and a strapline underneath.

I then added the masthead to the top of a black page, i used black as the background as it was one of the main colours used on the front page of the website. I made sure that the masthead was not so big that i did not have enough space underneath it to include a decent amount of content, and that it was not so small that it was hard to read.
I chose to use white boxes for my articles to go on so that they stood out against the black background, I began by using four of the same sized boxes with curved edges.

However, this left a large gap at the bottom which looked strange. After referring back to my research, i noted that on newspaper websites there is normally one main article with a number of smaller ones beneath it. I therefore deleted the boxes and added other ones in a less symmetrical style.

It was hard to know whether this would look professional or not at this stage, so i added pictures. I made sure that the pictures fitted to the curved edges of the boxes, i did this by inserting the pictures into the shape as opposed to just placing them over the shapes. The first picture i used was one of a holiday that i went on to Ayia Napa, the second was of a friends band playing a gig in Jersey, the third was of empty glasses and a cigarette box at a pub, the fourth box had two album covers which were copyright free, and the fifth box had a picture of a friends football match.
I chose not to fit the pictures in the bottom right box to the curved edges, this is because they are square album covers, and if i wanted them to fit perfectly they would take up a lot of space, making it harder to fit a decent amount of text in the box. I then added text and headlines to the boxes.

There was still space in the boxes so i added text saying 'Click here for the full article', this is where the links would be to the full articles.

Now that my front page of my website was completed, i began working on the second page. I used the same background and masthead as the first page. However, instead of using a number of smaller boxes, i just used one large one.

I then added pictures to the page, at first i was just using one picture. However, i found that if i wanted the picture to be nearly at the edges of the box, it took up to much space vertically, i therefore chose to use two images, placing them horizontally.
The pictures that i used were taken in a holiday in Ayia Napa.

At first this looked slightly odd, i therefore added text to the picture so i could decide whether to keep the design the same.

I decided to keep the design the same, as when the text was added it looked much better.
I then opened up the pages in dreamweaver.
For the website i wanted to make rollovers on the menu bar in the masthead. To do this, i used the hotspot tool to highlight what i wanted to change. Then i clicked 'effects' and then swap colour' to change the masthead to one which had a word in a different colour. Below is a picture which shows what happens when the cursor goes over the words 'Sports'.

No comments:
Post a Comment