Sunday 24 April 2011

steps of making: second page of website







step 1
I wanted to design some adverts for the second page of my website. Write the summer coming up it is evident that many students go on holiday so I decided to design an advert for a competition to win a five star holiday I started with a an image from the holiday then started adding layers on top. I used bole yellow typeface to write “ win a 5 day, 5 day holiday for two” I did this is because this prize would be the thing to really entice readers to enter. But putting a box out over the image at the bottom it enabled the important information (the question) to stand out. I changed the opacity of the box to 50% so the picture could be seen behind it as the image is another tool to entice people to take notice of the advert.


audience feed back:
positive points:
nice idea for advert will attract younger people
the image is good as it shows the audience what they could win
the blue links with colourscheme of the rest of the newspaper
Bold and bright typface stands out and catches reader eye
nagative points
need contact details
people will not know where to submit answers to



step 2
I placed this advert in the bottom two fifths of the page that I had set up using the same dimensions as the first. I then started making a second advert. I did this by splitting the page into three columns and placed it inn the top two fifths of the right hand column. I used an interesting, funny image of a young person to grab the reader attention as well as bright, bold font. The question Bored?  Involves and engages the reader. Now they are interested in what the advert is advertising they will be more likely to read on to find out- the answer being a club aimed at young people.
I also added a banner at the top of the page which was for a title. These were also used in my first page to highlight key titles and headlines.
step 3
I shaded a small section of the box out a blue colour and used the smudge tool to add detail this made my advert stand out that bit more 



step 4
I added a title for the page, it was to be the entertainment page. I used a white font which stood out on the blue banner. Then added a story about a local band using a bolder, large font for the mast head. I also added two images of the band to draw in the reader. I placed the images in boxes with rounded edges which I have used throughout the website pages.






step 5


I now had a narrow space to fill so decided to put in short movie reviews another topic that young people are interested in also added a blue banner to the bottom three fifths of the left hand page
step 6

I made another simple advert for a well know company as young people tend to be always after the latest deal for their phones especially as the website and paper is aimed at student or young people who may not have a lot of money. 

step 7 


After my market research I found that a popular activity for young people is going to the cinema so I added a film review section in the centre of the entertainment page. The yellow stars not only act as a rating system for the films but catch the eye of the user.
I also placed an orange advert at the bottom of the empty column which left me with enough space to put in a box for another feature.
So this page flowed from my home page I added made the box the same colour as the blue I used on the home page. I did this by using the colour pick tool and then using the paint bucket tool to fill it in.



step 8


I added in a final article named fun in the sun, using a yellow bright font to make it sand out and putting the same style sun I used on the home page for the weather report.

In my feedback i found that most people agreed I needed to add contact dteails to my advert the holiday so i adjusted this accordingly.




The next step was to put this onto dream weaver, i did this in the similar way to the home page. By saving the facebook art into a PDF file and saving it for web and devices i was able to paste the artwork into the main section of a template we were given with the dimensions on and then add in my ast head and links.
I added in th esame links, benner and mast head to the dream weaver document so my website appeard consistant.

here is the final Html code for my Entertainmet page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Entertainment</title> <style type="text/css"> <!-- body { margin-left: 0px;             margin-top: 0px;       margin-right: 0px;     margin-bottom: 0px; } #container {            height: 1085px;             width: 800px;            margin-top: 0px;       margin-right: auto;    margin-bottom: 0px;             margin-left: auto; } #masthead {       background-color: #CCC;     margin: 0px; padding: 0px;             float: left;             height: 120px;           width: 100%; } #linksTop { background-color: #FFF;     margin: 0px; padding: 0px;     float: left;        height: 25px; width: 100%;             border-bottom-width: 2px; border-bottom-style: solid;   border-bottom-color: #333; } #linksTop ul {        font-family: Verdana, Geneva, sans-serif;   font-size: 11px; line-height: 25px;      font-weight: bold;      padding: 0px;             margin-top: 0px;       margin-right: 0px;     margin-bottom: 0px;             margin-left: 25px; } #linksTop li {   display: inline;           list-style-type: none; margin-top: 0px;       margin-right: 0px;     margin-bottom: 0px;             margin-left: 5px;        padding-top: 0px;         padding-right: 25px;             padding-bottom: 0px;           padding-left: 0px;      border-right-width: 1px;     border-right-style: solid;      border-right-color: #333; } #linksTop li a:link {   list-style-type: none; color: #666;   text-decoration: none; } #linksTop li a:visited {    list-style-type: none;             color: #666; text-decoration: none; } #linksTop li a:hover {     list-style-type: none;             color: #F00;   text-decoration: none; } #strapline {      background-color: #333;     margin: 0px; padding: 0px;             float: left;             height: 35px; width: 100%; } #strapline p {          margin: 0px; font-size: 14px;          line-height: 35px;             font-weight: bold;      color: #FFF;   padding-top: 0px;      padding-right: 25px;             padding-bottom: 0px;     padding-left: 25px;    font-family: Verdana, Geneva, sans-serif; } #maincontent_Container { float: left;             height: 825px;           width: 748px;            border-right-width: 1px;      border-left-width: 1px;             border-right-style: solid;      border-left-style: solid;         border-right-color: #CCC;    border-left-color: #CCC; padding: 25px; } #mainContent {    float: left;        height: 820px;           width: 748px;            padding: 0px;     position: relative;      background-color: #CCC;     margin: 0px; background-repeat: no-repeat; } #banner {       background-color: #333;     margin: 0px; padding: 0px;             float: left;        height: 35px;             width: 100%; } #banner p {             margin: 0px; font-size: 14px;          line-height: 35px;      font-weight: bold; color: #FFF;   padding-top: 0px;      padding-right: 25px;             padding-bottom: 0px;             padding-left: 25px;    font-family: Verdana, Geneva, sans-serif; } .style1 {          color: #0099FF } --> </style> </head>  <body> <div id="container">   <div id="masthead"> <img src="images/MAST-HEAD.jpg" width="800" height="120" /></div>        <div id="linksTop">     <ul>         <li class="style2"><a href="news 2 copy.html">Home</a></li>       <li class="style2"><a href="news 2.html">Entertainment</a></li>       <li class="style1">News</li>       <li class="style1">Gallery</li>     </ul>   </div>   <div id="strapline"><img src="images/BANNER FINISHED.jpg" alt="5" width="800" height="35" /></div>    <div id="maincontent_Container">      <div id="mainContent"><img src="images/web page 2 copy. finiishhhhed !!!.jpg" alt="56" width="750" height="820" /></div>      </div>   <div id="banner"> <img src="images/footer.jpg" alt="footer" width="800" height="35" />   </div> </div> </body> </html>


No comments:

Post a Comment