Website Development - Tour Page

As when I set up the pages within the website I created a basic template for all of the pages I was able to open the tour page and begin to develop this page straight away. After much thought, and a discussion with Melissa we decided that we would include the slide show banner on every page within the website. We decided to do this as when re-looking over our research we found that most websites of this genre kept the top half of there homepage at the head of every page.

I decided that I would include a scroll bar of information on tis page as well as on the homepage. I decided to do this as I felt this was a suitable interactive feature to have positioned on to the Tour page. This is because a lot of information can be given an once, and the scroll bar is eye catching drawing the viewers attention to the information. 

 To include the scroll bar on this page I copied and pasted the scroll bar from the last page and adjusted the information within the bar by editing the coding.

At the foot of the page I also copied and pasted the copyright information which I had created for the homepage. After doing the the next step that I took was to insert an AP DIV so that I could write a title for the page. I decided to call the page 'UK TOUR'.  I decided that I would write this in the same font which I had used for the copy right, advertising banners, navigation bar and link titles. I decided to do this to show consistency and to conform with the codes and conventions, as whist researching existing products I had seen this use of the main font within the webiste.

The next part of the page I decided to work on was the list of tour dates. After referring to my research I decided that I would create my list in a similar style to that of Katy Perry. To achieve this I began creation in Adobe Illustrator.

I started of by drawing one red box,one black box and one white box. I then copied and pasted the white and black boxes alternately. In the red box I wrote three titles and in the black and white boxes I wrote the tour dates in a chronological order of dates.

I decided to use the font style Ariel for the concert information as it is clear and easy to read and red as firstly the color ties in with the color scheme and secondly because the red stands out on the black and white background.  I decided that I would write the headings in Impact as this ties in with other merchandise that had been created, for example the tour poster. This shows consistency and links the different products together.

The next stop that I will take is to create an interactive count down bar to the first performance of Vanessa Carlton on her UK Tour. I will create this in Adobe Flash.

In Flash I have created three layers and in each layer inserted a key frame which I will enter text into. I have then marked where I want the information to be positioned.

I have now written the code for the count down timer so my count down timer will work correctly as you can see below.

Now that my count down timer works correctly I will now export the timer as a movie. You do this by going to file then export and then export movie. In Dreamweaver I now need to insert an AP DIV in which I will position the timer.

Before inserting the Flash video which I have exported I decided to create a box for the flash to be inserted into and create a title. So the viewer knows what the countdown timer is counting down to.

I then imported the Flash movie in the following way.

This image shows the development of the tour page so far. The empty space which I have left down the right hand side is where i want to position the front cover of the program for this tour and the tour poster. I am not able to include these products yet as they have not been finally completed by the other member of my group.

Lastly I am going to create a sold out and tickets button in Photoshop. When the viewer clicks the ticket button they will be taken to ticket master where they can purchase tickets for the concert. I created the tickets by drawing a red rectangular box measuring 100 by 25. I then write 'Tickets' in a black font the same used within the website for the navigation bar etc. Bellow is the button I created.

I will now insert the button into an AP DIV and position the button in the correct position. I will continue to so this until I have enough ticket buttons. I will now create a sold out button in Photoshop and repeat the same steps to create and import the button as above. Here is the sold out button I have created.

Now I have inserted and positioned the tickets and sold out buttons. I will now link the ticket buttons to an external website. this website will be Ticket Master. I have decided to do this as it is a common code and convention on a page of this type. I will create the link in the following way:

Firstly I highlight the AP DIV of the button I wash to link, and secondly I type in the URL of the external website I want the button to link to in to the link option at the bottom of the page.

After clicking on the button I have just linked the button takes me to ticket master. I have decided to create an external link to ticket master as this is a commonly used feature on websites of this type.