44212: Web-site Development Planning to Build a Web-site Ian Perry Room:C49 Extension:7287

Slides:



Advertisements
Similar presentations
1 FrontPage 2000 Online Tutorial The following tutorial aims to help you get started with FrontPage 2000 for the creation of basic web pages. The different.
Advertisements

Page Design Scroll zone Data Tables Screen Readers
Web Pages Using FirstClass Dean McKinney Greater St. Albert Catholic Schools January, 2006.
44212: Web-site Development What is a Web Development Plan? Ian Perry Room:C49 Extension:7287
44212: Web-site Development Planning & Building a Web-site Ian Perry Room:C48 Extension:7287
XP Information Technology Center - KFUPM1 Microsoft Office FrontPage 2003 Creating a Web Site.
CIS101 Introduction to Computing Week 07. Agenda Your questions JavaScript text Resume project HTML Project Three This week online Next class.
CIS101 Introduction to Computing Week 06. Agenda Your questions Resume project HTML Project Two This week online Next class.
CIS101 Introduction to Computing HTML Project Two.
CIS101 Introduction to Computing Week 06. Agenda Your questions Resume project HTML Project Two This week online Next class.
A02 Creating my website NAME ______________. UNIT 2 – A02 – Creating my Website The purpose of this assessment objective is to create 5 web pages containing.
Training 1 FrontPage Creating Web Pages. 2 Objectives 1. Open FrontPage. 2. Create Web pages. 3. Insert pictures 4. Create a hyperlink from a picture.
Chapter 12: The Internet The ultimate direct. Internet Facts U.S. firms spend $14.7 billion on Internet advertising in 2005 By 2010, they are expected.
Using Dreamweaver. Slide 1 Dreamweaver has 2 screens that do different things The Document window where you create your WebPages The Site window where.
Website Design CLA – Transportation. Defining a Site Select: Site – New - Site Click Next.
Dreamweaver CS4 Concepts and Techniques Chapter 7 Page Layout with Frames.
CPSC 203 Introduction to Computers Lab 21, 22 By Jie Gao.
Web Technologies Website Development Trade & Industrial Education
Creating Integrated Web-based Projects using Microsoft Word.
Dreamweaver MX Unit A CIS 205—Web Site Design & Development.
44238: Dynamic Web-site Development Common Web-page Elements Ian Perry Room:C48 Extension:7287
WELCOME EF 105 Spring EF 105 Computer Methods in Engineering Problem Solving Week 2: FrontPage Introduction to Software Use to create Web Pages.
DREAMWEAVER Adding photos and other tips!. Making photo gallery  Gather ALL the photos you need into your images folder. (remember to copy the URL so.
HTML Concepts and Techniques Fourth Edition Project 6 Using Frames in a Web Site.
Hunter Valley Amateur Beekeepers Forum User Guide Guide shows sample screenshots with most relevant actions. Website is at
CPSC 203 Introduction to Computers Lab 23 By Jie Gao.
An Introduction To Websites With a little of help from “WebPages That Suck.
MS FrontPage 1: Developing a web site for the Sunny Morning Products Yong Choi CSU Bakersfield.
PowerPoint Presentation of Essential Concepts PowerPoint Presentation of Essential Concepts Chalice Tillis LEM 511.
Dreamweaver MX BTA3Open. Dreamweaver MX Application used for creating web sites Homepage must always be saved as index.htm All files names must be in.
44212: Web-site Development Review & Assignment 2 Requirements Ian Perry Room:C41C Extension:7287
44212: Web-site Development Review & Assignment 2 Requirements Ian Perry Room:C49 Extension:7287
Sports Website Creation. In this project you will design and produce your own website.
44212: Web-site Development Review & Assignment 2 Requirements Ian Perry Room:C48 Extension:7287
Saving PowerPoint Presentations as Web Pages Your Logo Here Open the PowerPoint Presentation. To convert to a format compatible with web browsers, launch.
Using Frames in a Web Site Project 6. Project Objectives Project 6: Using Frames in a Web Site 2 Define terms related to frames Describe the steps used.
Writing a Web Page. Using Frontpage FrontPage is a user-friendly WYSIWYG html editor. To begin, open the program and a new page. FrontPage is a user-friendly.
Living Online Lesson 3 Using the Internet IC3 Basics Internet and Computing Core Certification Ambrose, Bergerud, Buscge, Morrison, Wells-Pusins.
Hubnet Training One Health Network South East Asia Network Overview | Public and Members-only Pages; Communicating and Publishing using Blogs and News.
Web Authoring with Dreamweaver. Unit Objectives  Be able to define keywords: HTML, HTTP (protocol), browser, web server, client/server, tag, attribute,
Home page Web page link 1 Web page link 2Web page link 3Web page link 4.
HTML Comprehensive Concepts and Techniques Second Edition Project 2 Creating a Web Site with Links.
Web Site Development - Process of planning and creating a website.
Creating Web Pages with Links, Images, and Embedded Style Sheets
Creating a Google Site For a Digital Portfolio Purpose.
Creating Web Pages in Word. Sharing Office Files Online Many Web pages are created using the HTML programming language. Web page editors are software.
Making the website. Get your folders sorted first Create a new folder in “N” called “My hockey website” Create folders inside called “Documents”, “images”
1 New Perspectives on Access 2016 Module 8: Sharing, Integrating, and Analyzing Data.
A Web Coordinator guide to creating links. Other tabs and buttons in the ‘create link’ menu: ‘Querysting’ – these are useful for creating ‘pagejumps’
Intro to Google Docs 2014.
MicrosoftTM SharePoint Content Management SystemTutorial
Thinking Web > CONTENT DEVELOPMENT
Pre-Production Meet with the client to create a project plan:
Landscape Institute Introducing the new Branch Websites
Tips for Finding a Cheap Flight
Do you want to make info graphics for the US Election?
ΑΓΓ66 Creating a wiki Contact Session 3
LMEvents SharePoint Portal How-to Guide
Geography 121 Homepage Design Project Zero
USING DREAMWEAVER Contents: Assigning a Root Folder
Website 101 for Administrative Staff
CIS 273 Education for Service-- snaptutorial.com.
CIS 273 Teaching Effectively-- snaptutorial.com
Poster title Author(s) Institution(s) Corresponding author’s Name
LGC Website, Software updates, Documentation, and Videos
Poster title Author(s) Institution(s) Corresponding author’s Name
Lesson Objectives Lesson Outcomes
USING DREAMWEAVER MX 2004 Contents: Assigning a Root Folder
Multipage Sites.
A02 Creating my website NAME ______________.
Presentation transcript:

44212: Web-site Development Planning to Build a Web-site Ian Perry Room:C49 Extension:7287

Ian Perry44212: Web-site Development: Planning to Build 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.

Ian Perry44212: Web-site Development: Planning to Build 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 , but also by Telephone, Fax, or Post(?) if they want to.

Ian Perry44212: Web-site Development: Planning to Build 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

Ian Perry44212: Web-site Development: Planning to Build 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.

Ian Perry44212: Web-site Development: Planning to Build 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 &

Ian Perry44212: Web-site Development: Planning to Build 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!

Ian Perry44212: Web-site Development: Planning to Build 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

Ian Perry44212: Web-site Development: Planning to Build 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.

Ian Perry44212: Web-site Development: Planning to Build a Web-siteSlide 10 Develop the Structure First

Ian Perry44212: Web-site Development: Planning to Build a Web-siteSlide 11 Then Add the Images, Navigation & any Fixed Text

Ian Perry44212: Web-site Development: Planning to Build 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.

Ian Perry44212: Web-site Development: Planning to Build 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’.

Ian Perry44212: Web-site Development: Planning to Build a Web-siteSlide 14 Not Quite Right?

Ian Perry44212: Web-site Development: Planning to Build a Web-siteSlide 15 That’s Better!

Ian Perry44212: Web-site Development: Planning to Build 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’.

Ian Perry44212: Web-site Development: Planning to Build 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!

Ian Perry44212: Web-site Development: Planning to Build a Web-siteSlide 18 Next Week’s Workshop  Develop a ‘standard’ Web-page: for Flights ‘R’ Us.  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 the ‘standard’ that you intend to use for your ABM Car Sales Web-site.