Unit 65 Leeanne HibbertDiary of my WebsiteThis 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 addmy naviagtion buttons in a minute.
Unit 65 Leeanne HibbertHere 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 whichis inserted on my home page only. I have also added a ‘labels’ layer which includes all of thedifferent pages of my website. As you can see on the time line all of the pages I have inserted akeyframe so I know when each page starts and ends.
Unit 65 Leeanne HibbertThis screenshot is what my ‘about australia’ page looks like at the moment.This is what the ‘hostels’ page looks like at the moment.
Unit 65 Leeanne HibbertThis is what the ‘book Now’ page looks like at the moment.This is what the ‘Gallery’ page looks like at the moment.
Unit 65 Leeanne HibbertThis is what the ‘planning your travel’ page looks like at the moment.This is what the ‘contact us’ page looks like at the moment.
Unit 65 Leeanne HibbertThis icon is showing it isan 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
Unit 65 Leeanne HibbertAs you can see on the ‘about Australia’ page I have added my first image to the website. This imageis 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 yetthough.
Unit 65 Leeanne HibbertHere I have added an ‘actions’ layer. I am going to put this layer under the ‘labels’ layer. I haveadded 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 amnow going to add an action on each key frame to make sure it stops on each page, so you are able toview them.
Unit 65 Leeanne HibbertThis screenshot of the time line you can see that in the actions layer and on every key frame I haveadded 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 Ihave started adding text which I will need to finish off. Also on the right hand side I have added animage. I will be adding one more image to this page.
Unit 65 Leeanne HibbertThis image above has a white background, this will not look right on my website as all of the pagesare 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 andclick on the image it crops out the background.
Unit 65 Leeanne HibbertIn order to get the Australian Image that I am editing, to be transparent I need to create a newcanvas 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 ispaste the Australian image onto this and considering I have already used the ‘magic wand’ tool, thebackground of the image will already be transparent.
Unit 65 Leeanne HibbertNow as you can see the image now has a transparent background, meaning I can now put it onto mywebsite.Now on my homepage you can see that I have added two images. The bottom image was the topimage But I decided to change them round as it looks better like this.
Unit 65 Leeanne HibbertThis is a screen shot of the completed home page. As you can see I have now added all of the text onthe left hand side.This is a screenshot of the completed gallery page. I have now added all of the images onto it.
Unit 65 Leeanne HibbertThis is a screenshot of the hostels page. I have started to add text to it, now I am going to addimages 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.
Unit 65 Leeanne HibbertThis 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 iswhere I will add my text into.
Unit 65 Leeanne HibbertHere now in this screenshot I have added contact details into the blue square as I said I would on theabove screenshot.
Unit 65 Leeanne HibbertHere is a screenshot of the gallery; I have decided to change this around as I wanted to be able tomake it so that once the image has been rolled over it is enlarged in the gap in the middle of theimages.For me to be able to make the image larger once rolled over I had to double click on the image theninsert a keyframe on the ‘Hit’ box.
Unit 65 Leeanne HibbertOnce I had inserted a key frame I then had to choose the ‘rectangle tool’ on the right hand side andthen 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’.
Unit 65 Leeanne HibbertI then clicked on the ‘Over’ square and inserted another key frameOnce I had inserted another key frame on the ‘over’ square I then pasted the image I copiedpreviously onto the page in the ‘over’ area.
Unit 65 Leeanne HibbertNow as you can see in this screenshot the image is a perfect size in the middle area. Once I pastedthe image on the page I just selected the size I wanted on the right hand side and then moved theimage to where I wanted it to be for when it is has been rolled over. I did This whole sequence foreach image on my gallery.This screenshot is the ‘About Australia’ page. I decided to add a ‘fun facts about Australia’ part whichwould be a long list of different facts, but as it is a long list I want to add a scroll bar on the righthand side of the text box so I am going to now.
Unit 65 Leeanne HibbertIn order to enable a scrollbar on the text box I need to change the text from ‘Static text’ to ‘Dynamictext’ 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 thisscreenshot.
Unit 65 Leeanne HibbertThe next thing I had to do was click on the ‘Window’ button at the top of the page and then on thedrop 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 pageand I could then click what I want, I want a scroll bar so I clicked the ‘UIScrollbar’ button this willthen add a scroll bar onto my text box and all’s I have to do is adjust the size of the textbox and scrollbar.
Unit 65 Leeanne HibbertNow on this screenshot you can see I have adjusted both the text box and scrollbar so it is nowfinished and I have checked that it works and it does perfectly.
Unit 65 Leeanne HibbertI am now going to create a booking form on my ‘Book Now’ page. As you can see on this screenshotabove of the Book Now page Ihave converted the ‘Booknow’ 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’.
Unit 65 Leeanne HibbertI have then added text of the questions that will be on the booking form, this I wrote in the ‘Text’layer.
Unit 65 Leeanne HibbertOnce I have finished writing out the text I then click on the components layer and on the right handside 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 havemoved the combo box next to the text saying title.
Unit 65 Leeanne HibbertOnce I click on the values button a box will appear this box will be simply what will be in the combobox once clicked on. So I have chosen it to have four words and these are Mr; Miss; Mrs and sir. Ithen have to remember the order that I did the first combo box in as I then have to click on thelabels button and do the same combo box list in order for it to work correctly.
Unit 65 Leeanne HibbertFor the next few questions on the booking form they are just work questions so on the componentsmenu 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 nextto ‘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 toadd this next to the ‘arrival date’ and ‘leaving date’ text.
Unit 65 Leeanne HibbertOn this screenshot you can see that I have now added a ‘Date Field’ box next to the arrival andleaving date text. This means that when people are filling this form out they can click on the imageof 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 ablack straight line on the right hand side and then align them all up to this line so that they areequal. Once they are equal I will then delete this line.
Unit 65 Leeanne HibbertNow 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
Unit 65 Leeanne HibbertThis is a screenshot of the ‘planning your travel’ page. As you can see I have started to add text tothis page
Unit 65 Leeanne HibbertBecause 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 ‘Planningyour travel’ page.
Unit 65 Leeanne HibbertOn the timeline I also created a new layer and named it ‘Labels’ here I then created another pagenamed ‘Submit Home’ this was so when people click the ‘Submit’ button on the booking page, it willthen 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.
Unit 65 Leeanne HibbertHere I have now added an image and also changed the font text so it matches all of the writingthroughout the website. I have also added a blue line under the writing just to section both thewriting and image.I have no completed creating my website. I am now going to start my evaluation on the website.
Unit 65 Leeanne HibbertI have made a request a brochure page so that the writing saying ‘request a brochure’ on the hostelspage .On the request a brochure page I am adding an order form to it.
Unit 65 Leeanne HibbertI 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’.
Unit 65 Leeanne HibbertHere is the thank you page that the submit button leads to.