1. 44212: Web-site Development Planning & Building a Web-site Ian Perry Room:C48 Extension:7287 E-mail:I.P.Perry@hull.ac.uk http://itsy.co.uk/ac/0607/Sem1&2/44212_WSD/

2. Ian Perry44212: WSD: Planning & Building a Web-siteSlide 2 The Planning Process?  Review your Web Development Plan: Content Decisions; which business processes might be best supported by the Internet/Web? Site Map; showing the overall structure of the proposed Web-site.  Then think carefully about: Navigation Method(s); how will user find things? Standard Web-page Design; most (all?) Web- pages will have this structure.

3. Ian Perry44212: WSD: Planning & Building a Web-siteSlide 3 Content Decisions for FRU?  Major business processes concentrate upon the provision of; Flights, Car Hire, Accommodation, and Travel Insurance (Annual & Single Trip)- for Business & Independent Travellers.  Want to raise awareness of the good deals that Flights ‘R’ Us can offer.  Then, invite potential customers to contact Flights ‘R’ Us: ideally by E-mail, but also by Telephone, Fax, or Post(?) if they want to.

4. Ian Perry44212: WSD: Planning & Building a Web-siteSlide 4 Site Map for FRU? Showing overall structure of Web-site. Home Page FlightsAccommodationCar Hire Travel Insurance Booking Request Annual Single Trip

5. Ian Perry44212: WSD: Planning & Building a Web-siteSlide 5 Navigation Method for FRU?  How will the user find things? Via a Simple Menu System: at the bottom of each page. Allowing the user to navigate directly to the 4 major sections of the Web-site: may need some in-text hyperlinks where a section has more than one Web-page; e.g. Travel Insurance. Also need some means of navigating back to the Home Page: so the user can never get lost.

6. Ian Perry44212: WSD: Planning & Building a Web-siteSlide 6 Standard Web-page for FRU?  Most (all?) pages will have this structure: Flights ‘R’ Us Logo Page Title Page Content (utilising existing documents?) Navigation Bar Flights, Accommodation, Car Hire, Insurance. Contact Details i.e. Address & E-mail

7. Ian Perry44212: WSD: Planning & Building a Web-siteSlide 7 How to Build a Web-site?  Name all files on the ‘Site Map’. this will save a lot of anguish later!  Develop the ‘standard’ Web-page: most (all?) Web Pages will look like this. make the major navigation ‘work’.  Use copies of the ‘standard’ Web-page: for a consistent ‘look-and-feel’. adding the Page Content as required: from existing documents if possible?  Test, test, test!

8. Ian Perry44212: WSD: Planning & Building a Web-siteSlide 8 Name ALL Files on Site Map flights.htm Home Page Flights Accommodation Car HireTravel Insurance Booking Request Annual Single Trip index.htm accomm.ht m car.htm insure.htm annual.htm single.htm book.htm

9. Ian Perry44212: WSD: Planning & Building a Web-siteSlide 9 Develop the ‘Standard’  Build the structure of the ‘standard’ Web- page: tables, images, text, horizontal lines, etc. images can be scanned from existing documents, or downloaded from the Web.  Make the major navigation ‘work’: clicking on a navigation bar image takes user to one of the 4 major parts of the Web-site: Flights, Accommodation, Car Hire, Travel Insurance. clicking on the Flights ‘R’ Us logo always returns the user to the Home Page.

10. Ian Perry44212: WSD: Planning & Building a Web-siteSlide 10 Develop an ‘outline’ Structure [ using tables & horizontal lines ]

11. Ian Perry44212: WSD: Planning & Building a Web-siteSlide 11 Then Add the Images, Navigation & any Fixed Text

12. Ian Perry44212: WSD: Planning & Building a Web-siteSlide 12 Use the ‘Standard’ - 1 Open the ‘standard’: And save (immediately!) with a new file name, i.e. refer to the names on your ‘Site-Map’. Change the ‘Page Title’: and the Title in the Header. Add relevant ‘Page Content’: utilising existing documents where possible. Save the completed HTML Page.

13. Ian Perry44212: WSD: Planning & Building a Web-siteSlide 13 Use the ‘Standard’ - 2  Examine the results and make any necessary adjustments. Some pages may look OK when the ‘Page Content’ has been inserted, others may need quite a bit of work.  Repeat for all Web-pages. Remember that the ultimate test is to view your Web Pages with a Web Browser, and to check that the navigation actually ‘works’.

14. Ian Perry44212: WSD: Planning & Building a Web-siteSlide 14 Not Quite Right?

15. Ian Perry44212: WSD: Planning & Building a Web-siteSlide 15 That’s Better!

16. Ian Perry44212: WSD: Planning & Building a Web-siteSlide 16 Repeat for other Web-pages  Being very careful; NOT to alter the ‘standard’.  And you will end up with a Web-site that; ‘works’ (i.e. is robust), has a consistent look-and-feel & and is easy to navigate.  i.e.; three of the things that users tend to like about the Web-sites they ‘visit’.

17. Ian Perry44212: WSD: Planning & Building a Web-siteSlide 17 Take Your Time & Be Careful  Spend quite a lot of time developing your ‘standard’ Web-page: You do not want to have to change it, having already used it to build several Web-pages with the original version.  Make sure that you only work with files that are located in ONE folder: or work only on a floppy disk, as that is how you have to hand-in Assignment 2.  And remember that “less is definitely more”: except when it comes to testing!

18. Ian Perry44212: WSD: Planning & Building a Web-siteSlide 18 Next Week’s Workshop  You will develop a ‘standard’ Web-page: for Flights ‘R’ Us.  Then ‘use’ this ‘standard’ Web-page: in order to build a small, i.e. 5 page, Web-site. incorporating a variety of images & text that I will provide for you.  After which: you really should get on with the development of a ‘standard’ Web-page that you intend to use for your Zeitgeist Club Web-site.