Diary of my website

Unit 65 Leeanne Hibbert

Diary of my Website

This is the background colour which I have chosen for each of the pages on my website.

This blue strip at the top of this first page is what is going to be my navigation bar. I am going to add my naviagtion buttons in a minute.


Here now as you can see I have added all of my seven buttons to the navigation bar.

This screenshot as you can see I have now added a ‘content’ layer, this has text added onto it which is inserted on my home page only. I have also added a ‘labels’ layer which includes all of the different pages of my website. As you can see on the time line all of the pages I have inserted a keyframe so I know when each page starts and ends.


This screenshot is what my ‘about australia’ page looks like at the moment.

This is what the ‘hostels’ page looks like at the moment.


This is what the ‘book Now’ page looks like at the moment.

This is what the ‘Gallery’ page looks like at the moment.


This is what the ‘planning your travel’ page looks like at the moment.

This is what the ‘contact us’ page looks like at the moment.


This icon is showing it is an image


This screenshot above is of my library, the library is where resources go such as images. As you can tell by my library I have just imported my images in to it. I have imported all of the images together instead of one at a time as I think it is a lot more easier to import them all together as it takes less time whilst you are creating your website

As you can see on the ‘about Australia’ page I have added my first image to the website. This image is only shown on this particular page.

This is the gallery page as you can see I have started to add images to it. I’ve not added

all images yet though.


Here I have added an ‘actions’ layer. I am going to put this layer under the ‘labels’ layer. I have added this new layer so that I can now add a blank key frame just before the end of each label.

Now after creating my actions layer, I have added a key frame just before the end of each label. I am now going to add an action on each key frame to make sure it stops on each page, so you are able to view them.


This screenshot of the time line you can see that in the actions layer and on every key frame I have added the action ‘stop’ this is so that now all of my pages will stop so you can view them properly.

This is a screenshot again of the homepage to my website. As you can see on the left hand side I have started adding text which I will need to finish off. Also on the right hand side I have added an image. I will be adding one more image to this page.


This image above has a white background, this will not look right on my website as all of the pages are a sandy type colour with a tint of orange. So I am going to edit this image in photoshop.

This is the photo opened up in Photoshop. The tool circled is the ‘magic wand’ when I click this and click on the image it crops out the background.


In order to get the Australian Image that I am editing, to be transparent I need to create a new canvas which is already transparent. This is what I am doing above in this screenshot.

This screenshot above is the transparent canvas that I have just created. Now all that I need to do is paste the Australian image onto this and considering I have already used the ‘magic wand’ tool, the background of the image will already be transparent.


Now as you can see the image now has a transparent background, meaning I can now put it onto my website.

Now on my homepage you can see that I have added two images. The bottom image was the top image But I decided to change them round as it looks better like this.


This is a screen shot of the completed home page. As you can see I have now added all of the text on the left hand side.

This is a screenshot of the completed gallery page. I have now added all of the images onto it.


This is a screenshot of the hostels page. I have started to add text to it, now I am going to add images of hostels in Australia and a brief description of it.

This is a screenshot of the finished page Hostels. I’ve added 4 images of different hostels plus text.


This is a screenshot of the contact page; I have added 3 images on the right hand side.

This again is a screenshot of the contact us page. I have now added a blue square to the page; this is where I will add my text into.


Here now in this screenshot I have added contact details into the blue square as I said I would on the above screenshot.


Here is a screenshot of the gallery; I have decided to change this around as I wanted to be able to make it so that once the image has been rolled over it is enlarged in the gap in the middle of the images.

For me to be able to make the image larger once rolled over I had to double click on the image then insert a keyframe on the ‘Hit’ box.


Once I had inserted a key frame I then had to choose the ‘rectangle tool’ on the right hand side and then draw this rectangle outline over the image I had double clicked on.

Once I had drew over the image I was clicked on I then right clicked this image and pressed ‘Copy’.


I then clicked on the ‘Over’ square and inserted another key frame

Once I had inserted another key frame on the ‘over’ square I then pasted the image I copied previously onto the page in the ‘over’ area.


Now as you can see in this screenshot the image is a perfect size in the middle area. Once I pasted the image on the page I just selected the size I wanted on the right hand side and then moved the image to where I wanted it to be for when it is has been rolled over. I did This whole sequence for each image on my gallery.

This screenshot is the ‘About Australia’ page. I decided to add a ‘fun facts about Australia’ part which would be a long list of different facts, but as it is a long list I want to add a scroll bar on the right hand side of the text box so I am going to now.


In order to enable a scrollbar on the text box I need to change the text from ‘Static text’ to ‘Dynamic text’ which is what I have done on this screenshot above.


I then needed to make the behaviour as ‘Multiline’ Which is again what I have done in this screenshot.


The next thing I had to do was click on the ‘Window’ button at the top of the page and then on the drop down menu that came up below window I had to click on the ‘Components’ button.

Once I had clicked on Components the components list appears on the right hand side of the page and I could then click what I want, I want a scroll bar so I clicked the ‘UIScrollbar’ button this will then add a scroll bar onto my text box and all’s I have to do is adjust the size of the textbox and scroll bar.


Now on this screenshot you can see I have adjusted both the text box and scrollbar so it is now finished and I have checked that it works and it does

perfectly.

I am now going to create a booking form on my ‘Book Now’ page. As you can see on this screenshot above of the Book Now page I have

converted the ‘Book now’ title into a movie clip.


I then double clicked on the ‘book Now’ title and on then created another layer, calling one layer ‘text’ and the other ‘Components’.


I have then added text of the questions that will be on the booking form, this I wrote in the ‘Text’ layer.


Once I have finished writing out the text I then click on the components layer and on the right hand side will be all the different options that I can choose. For the first text which is ‘Title’ I will need a ‘combo box’ so on the components I click the combo box option.

The combo box will then appear on the page and as you can see in this screenshot above I have moved the combo box next to the text saying title.


Once I click on the values button a box will appear this box will be simply what will be in the combo box once clicked on. So I have chosen it to have four words and these are Mr; Miss; Mrs and sir.

I

then have to remember the order that I did the first combo box in as I then have to click on the labels button and do the same combo box list in order for it to work correctly.


For the next few questions on the booking form they are just work questions so on the components menu I am going to insert a ‘Text input option’.

In this screenshot you can see I have added the text input boxes to most of the questions, the next to ‘arrival date ‘ and ‘leaving date ‘need the ‘date field ‘ option.


This screenshot above is what the ‘date field’ option on the components list looks like. I am going to add this next to the ‘arrival date’ and ‘leaving date’ text.

On this screenshot you can see that I have now added a ‘Date Field’ box next to the arrival and leaving date text. This means that when people are filling this form out they can click on the image of the calendar on the right hand side of the date field box and select which dates they need.

Now to make sure that all of my boxes are in line with each other and straight I have just used a black straight line on the right hand side and then align them all up to this line so that they are equal. Once they are equal I will then delete this line.


Now I have aligned all of the boxes up so I have deleted the line that was on the right hand side.

On this print screen you can see I have now added the text ‘Submit’ and made it to be a button


This is a screenshot of the ‘planning your travel’ page. As you can see I have started to add text to this page

Because I added so much text onto this page I have added a scrollbar to the text box.

As you can see by this screen shot I have now added 3 images on the left hand side of the ‘Planning your travel’ page.


On the timeline I also created a new layer and named it ‘Labels’ here I then created another page named ‘Submit Home’ this was so when people click the ‘Submit’ button on the booking page, it will then take them to the ‘submit home’ page.

This print screen is the ‘Submit Home’ page. This is what you will see when you click on the ‘Submit’ Button. I am going to add an image to this page.


Here I have now added an image and also changed the font text so it matches all of the writing throughout the website. I have also added a blue line under the writing just to section both the writing and image.

I have no completed creating my website. I am now going to start my evaluation on the website.

I have made a request a brochure page so that the writing saying ‘request a brochure’ on the hostels page .

On the request a brochure page I am adding an order form to it.


I have now added the order form to the request a brochure page. I just need to add a submit button.

I have now

added my submit button and it now leads to the ‘thank you page’.


Here is the thank you page that the submit button leads to.

Diary of my website

Documents

Transcript of Diary of my website