Creating the Linked Page of the Website

The linked page of the website is relatively easy to create as the template of the page itself has already been created, as it is the same as the the home page. This page will be the linked page from the button 'Top Stories', and will include a story from the newspaper. I have chosen to do the fashion story for my linked page, as I have already written the large amount of text for the story, and it would be the same text as in the newspaper itself.

As you can see I started by adding the headline and photos which were the same as the print version of the story. I placed them where I felt appropriate and where I knew it would leave enough space available for the text of the story itself.I also added an extra button to this page, which enables the viewer to navigate back to the page they were previously viewing. This also works as a rollover and changes colour when the mouse hits it, like so-

The page started to look like this once I had started to add the story itself, which conveniently fitted into the space perfectly.

I liked how the page looked as it was exactly what I aimed for, to look just like an online newspaper, and show key similarities to a print paper, which it does. I continued to tweak the layout and tried some other font styles but settles for this one in the end, and my web page looked like this-

The home button linked directly back to the home web page, as well as the 'back to previous page' button.

Creating The Home Page of the Website

To start my website, I must firstly created the image of it on Photoshop. I will use guides in order to ensure the image can be sliced easily later on and put into Dreamweaver and made into an actual working website.
The starting point was the top of the web page, where the masthead and buttons would be.
I started by placing the masthead int he top left corner, and then thinking of what navigation buttons I would need for my site. I decided on a 'home' page, a 'top stories' page, 'your say', 'classified ads' and 'contact' page for the buttons to represent. As I am only creating one other linked page for my project I will have to decide what one I want to create.
The masthead will stretch across most of the top of the page leaving a small area empty in the right of the page. As this will be the same for every web page, I need to pick something that would be relevant on each one. I noticed during the research phase while looking at newspaper websites that some offer the viewer to read the print edition online. This meant subscribing or paying a small fee. I think this is a really attractive feature for a website, and also a potential money making device, so I am going to add this to my top left ear piece.
After tweaking with designing I ended up with this masthead and navigation area for my site-

I have kept the area quite simple so that is is clear and easy to use. The button to read the print edition is large and in the same red colour used for the 'Q' in the masthead, so it coordinates nicely. I will the theme of colours of red grey and white used in the masthead as the main colours used throughout the web pages and used the rollovers.

I also wanted other aspects of the website to be similar to the print newspaper itself, so that the viewer recognises and has the sense of reading the paper even though its on the website, so I am also going to add two features along the bottom of the page that will stay the same on every linked other linked page.

Thishas created a 'template' for all of the web pages. I edited the 'clinic' advert from the newspaper and made it suitable to fit the web page. I also included the advert that encourages readers to share their stories online.
I then started to turn the stories from the newspaper into leads for the website. The main story of my paper was the one about the new campus at the university. I wanted this one to be a large picture, with a headline and lead to make people want to click and read the full story.

I used white text with blending options and shadow effects  to make it stand out. I also used a clipping mask on the photo to make it have rounded edges as this looked more pleasing to the eye. I will use this clipping mask throughout the webpages to keep the same style. The rollover will be the 'read more...' text. This will turn red when the mouse rolls over it. I did this by duplicating the layer and changing the colour of the text.

I then did the same for the fashion story which was featured on the second page of the newspaper.

 

Again I have stayed with the white text, which works well as the background of the picture is so dark. The rollover is the same as the last one, and turns red over 'read more...'. I also used the same clipping mask, this worked well on the dark photo. I placed both stoires onto the page and the layout started to grow-

This showed the reamining available space in which I had left to work. I wanted to make small box like leads to storys as I saw on other websites in the research phase. I decided to start this by turning the football team story into a lead like this. This would mean using the picture along with the headline or just one or two lines of text to make the reader want to click and read more. I played around with a few designs, and liked this one-

I used some bold text for the main part of the headline, and then a further line of information to attract attention. I plan to do toher stories like this to fill up the space with other story leads on my page. Here is what the story looked like once I included it in my page, and the rest of the available space. Here you can also see the guides and margins I have used to ensure my webpage is neat and laid out properly.

I plan to fill the rest of the space with similar leads to other stories and areas on the website. I created a similar lead to the story I used on the front cover of the paper, about the student winning the Art Competition and then filled the rest of the space with new other leads. My page started to look like this-

With the guides on I was happy that I had filled all of my space without making anything look too squashed or empty. The rollovers would be clear and there are many different areas and stories for a viewer to look at.With the guides off, my web page looked like this-

Researching the Website

I stared researching websites for newspapers and magazines. I had a look at some examples on the internet for both local and national newspapers. Here are some of the websites I used for research:

http://www.echo-news.co.uk/
http://www.dailymail.co.uk/home/index.html
http://www.standardmedia.co.ke/
http://www.dailystar.co.uk/home/

Newspaper websites seem to work in a simple format, often mimicking an actual newspaper, with a white background and a masthead at the top.

Just as the actual paper, the red-top masthead is again in the top left corner. This area along with the buttons to navigat around the website stay the same throughout each page on the website.
The stories and headlines would be the same for the printpaper that day, and some of the adverts featured would also have been edited for the online paper. Here is another example of a website for a newspaper, this time for the 'Daily Mail'

The masthead for this paper has been slightly changed from that of the print paper. The font and text of the word 'mail' is the same, but they have changed the name to 'Mail Online'.
Again for this site the masthead and buttons and whole top area of the paper stay the same as you navigate through the site.
The stories themselves arent set out like in the print edition. The main headlines and stories are all shown on the front page, but normally with just a headline and picture, and maybe a small lead of rollover information taking you to the complete story on another page.
As you can see on the right hand side of the site above, a similar box layout showing a small picture and small paragraph of info is shown to entise people to read some of the smaller stories.
The sites seem slightly more colourful than the print versions themselves, along with the changing of colours used with the rollovers for linked pages. I will try to incoorporate all of these key features into my website in order for it to be realistic and easy to navigate around.