1. Exploring FrontPage 2003 - Grauer and Barber 1 Committed to Shaping the Next Generation of IT Experts. Introduction to Web Development and Exploring FrontPage 2003 Robert Grauer and Maryann Barber Modified by A. Clark (USA)

2. Exploring FrontPage 2003 - Grauer and Barber 2 Objectives Use FrontPage to:  Create a web page  Open a web page  Rename a web page Define HTML - View and modify source code Format text and paragraphs - Add visual elements to a page Add hyperlinks that reference Internal and External Links

3. Exploring FrontPage 2003 - Grauer and Barber 3 Objectives (continued) Create a web page using:  Templates  Themes  Layout Tables Add active elements to a web page Understand FrontPage Views Print a website from Navigation View Publish the website to floppy disk

4. Exploring FrontPage 2003 - Grauer and Barber 4 Internet Review Internet – global network of networks WWW – system of Internet servers supporting specially formatted documents HTML – Hypertext Markup Language  Language web documents are formatted in Weather, sports, email, reference info, entertainment, financial services and much more!

5. Exploring FrontPage 2003 - Grauer and Barber 5 Internet Usage Statistics Source: http://www.internetworldstats.com/stats.htmhttp://www.internetworldstats.com/stats.htm

6. Exploring FrontPage 2003 - Grauer and Barber 6 Connecting to the Internet Three components needed  Communications capability (modem, LAN connection)  Internet Account/ISP  Software

7. Exploring FrontPage 2003 - Grauer and Barber 7 Activities & Issues Downloading – transfer from an outside source to your computer Uploading – transfer from your computer to another device  FTP programs Vulnerabilities – viruses and worms  Antivirus programs

8. Exploring FrontPage 2003 - Grauer and Barber 8 Components of the Web Web Server – stores hypertext/hypermedia documents and makes them available Web Client – PC or device used to access files held on web servers Web Browser – software application used to locate and display web docs  Netscape Navigator  Internet Explorer

9. Exploring FrontPage 2003 - Grauer and Barber 9 Web Documents and Web Sites Formatted in HTML Hyperlink tags used to link multiple HTML docs together and to connect to other web sites Web Page – one HTML document Web Site – collection of related web pages Home Page – main page of a web site; also defined as the first page displayed when you open your browser

10. Exploring FrontPage 2003 - Grauer and Barber 10 Addressing on the Web Every device on a network has an IP address  Unique 32-bit numeric address identifying a specific device Domain name address – text name identifying one or more IP addresses (ex: Microsoft.com represents about a dozen IP addresses) Domain Name Addresses are translated into IP addresses by a Domain Name Service

11. Exploring FrontPage 2003 - Grauer and Barber 11 URLs Uniform Resource Locator – Identifies document residing on a web server Parts  Transfer protocol (http or ftp)  Domain name of host server  Pathname (if applicable)  File name of document http://www.webopedia.com/TERM/U/URL.htm

12. Exploring FrontPage 2003 - Grauer and Barber 12 Elements of a Web Browser Same program components as many other apps Scroll bars Status bars Tool bar  Home, history, back, forward, reload/refresh, stop, favorites, address line Save web pages to disk or send via email

13. Exploring FrontPage 2003 - Grauer and Barber 13 Web Page Development Web Page – hypertext document you see on the web Web site – a group of related web pages HTML – language used to build web pages  Controls web page appearance  Web browser software translates HTML messages and creates text, images, and plays sound based on those commands Sounds, graphics, and animations are separate files referenced by the web page

14. Exploring FrontPage 2003 - Grauer and Barber 14 Planning Your Web Site Begin with an outline on paper Test on several different browsers – some features may not be displayed the same on all  IE  Netscape What does your server support?  FrontPage extensions (support for feedback pages, hit counts, etc.)

15. Exploring FrontPage 2003 - Grauer and Barber 15 Basic Web Design Pointers Keep it simple – simple design, no background or simple pattern (watermark); light backgrounds with dark text are easier to view Be consistent – common “look and feel” from one page to another  Similar fonts and formats in related docs for continuity View source code (HTML) of other sites you like to incorporate into your pages

16. Exploring FrontPage 2003 - Grauer and Barber 16 Developing your Web Site First, develop a general outline of what you want your site to look like. What is the site about? Should be a collection of related pages – some common overall theme or focus. What is your target audience? You want the viewer to “visit” longer. A large number of graphics can make pages take a long time to load.

17. Exploring FrontPage 2003 - Grauer and Barber 17 Organizing Your Site A site map visually organizes how your site will be navigated. Also, think about organizing file and directory structures (e.g. all photos/images into one folder). Home Page About Me My FamilyMy Dog LinksPhotos Pictures Resume

18. Exploring FrontPage 2003 - Grauer and Barber 18 Design Stage Add text and images just as you do in other applications such as MS Word. Pages are saved in HTML format Give the page a meaningful name Home page should usually be index.htm (may be home.htm; depending on host provider)

19. Exploring FrontPage 2003 - Grauer and Barber 19 Introduction to FrontPage FrontPage is a website creation and management software that:  Creates HTML (Hypertext Markup Language)  Allows a user to format documents in a manner similar to a word processor  Provides different views for accomplishing different tasks

20. Exploring FrontPage 2003 - Grauer and Barber 20 Introduction to FrontPage (continued) Allows a user to add active elements, such as marquees, to a web page Helps a user publish a website to a server Helps a user to manage and maintain their published website

21. Exploring FrontPage 2003 - Grauer and Barber 21 Hypertext Markup Language HTML consists of tags that are placed around plain text.  The browser follows the instruction of the tags  symbols are used to enclose the tags  Tags can be viewed in Code View

22. Exploring FrontPage 2003 - Grauer and Barber 22 Hypertext Markup Language (continued) Users may enter or modify HTML Tags in Code View Some tags come in pairs:  An Opening Tag  A Closing Tag Some tags do not need to be closed. Closing Tags are denoted by a slash, i.e.,

23. Exploring FrontPage 2003 - Grauer and Barber 23 Hypertext Markup Language FrontPage allows a user in Code View to:  View code  Enter code  Modify code Code View Button HTML Code is color coded

24. Exploring FrontPage 2003 - Grauer and Barber 24 Hypertext Markup Language (continued) Examples of HTML Tags  This is bold text  This is a level one heading  This begins a list This is an item in the list This is another item This ends the list  The tag at the end of a line indicating the next line will begin a new paragraph

25. Exploring FrontPage 2003 - Grauer and Barber 25 FrontPage Toolbars  Similarities to other Office Application Toolbars  Subtle differences between FrontPage Toolbars and other Office Application Toolbars Standard Toolbar Formatting Toolbar

26. Exploring FrontPage 2003 - Grauer and Barber 26 Creating your Web Site Template or blank web  Can modify any template to custom needs FrontPage creates site folders and default pages for you (home page is index.htm) depending on type of site created In order to link pages easily, all must be part of a site (i.e. create site first, then pages) Some components will not work unless a site is created first.

27. Exploring FrontPage 2003 - Grauer and Barber 27 Views Page View – used when creating, editing and formatting the content of your pages Folders View – manage/manipulate files related to your site Reports View – generate reports relating to your site Navigation View – control/view structure of site Hyperlinks View – map of hyperlinks included in site Tasks – tasks associated with creating and maintaining site

28. Exploring FrontPage 2003 - Grauer and Barber 28 Hyperlinks  The power of the web is in the ability to jump from one page or site to another page or site  This ability comes in the form of hyperlinks From Here To Here With one Mouse click

29. Exploring FrontPage 2003 - Grauer and Barber 29 Hyperlinks (continued) Types of hyperlinks  Internal hyperlink – link to other pages within your web site; allows visitor to navigate your site  Bookmark – internal hyperlink to a spot on the same page used to redirect the viewer Two step process (create bookmark then hyperlink)  External hyperlink – link to another site on the web (external to yours)  Mail to: links – link used to invoke default email client

30. Exploring FrontPage 2003 - Grauer and Barber 30 Hyperlinks (continued)  The code behind a hyperlink  Internal link - Click here to go the FAQ page  External Link - Click here to go to Google http://www.google.com

31. Exploring FrontPage 2003 - Grauer and Barber 31 Themes Create consistency in style Speed up page design Can be customized Can be created from scratch

32. Exploring FrontPage 2003 - Grauer and Barber 32 FrontPage Templates Templates simplify and speed up page creation by providing:  Page settings  Page formats  Page elements Templates utilize multi-columned tables for layout Users can define their own templates Additional templates are available for download from Microsoft.com

33. Exploring FrontPage 2003 - Grauer and Barber 33 FrontPage Templates To apply a template:  Choose the Layout Tables and Cells Task Pane  Choose the Table Layout desired

34. Exploring FrontPage 2003 - Grauer and Barber 34 The Photo Gallery Uses thumbnail images to display pictures on a web Several layouts to choose from Thumbnail images save downloading time Pictures can be edited within the Photo Gallery

35. Exploring FrontPage 2003 - Grauer and Barber 35 The Photo Gallery (continued) To use the Photo Gallery  Click Insert  Click Web Component  Select Photo Gallery  Select Layout  Click Finish Insert images

36. Exploring FrontPage 2003 - Grauer and Barber 36 Designing a Corporate Website  Page Design Basics - plan before beginning Top Down Design  Define the overall website – Develop the overall structure first  Break it down into smaller, more manageable pieces - Develop individual pages.

37. Exploring FrontPage 2003 - Grauer and Barber 37 Shared Borders FrontPage provides Shared Borders that are used to display banners and link bars.  Shared borders add consistency - They can be shared among all pages in a site.  The Corporate Presence Wizard includes Shared Borders automatically

38. Exploring FrontPage 2003 - Grauer and Barber 38 Other components Marquee – scrolling area of text or animated message, usually used to welcome visitors to your site Time/date stamp – automatically log when page was last updated Included Content – displays content of a referenced document or file Other – search engines, hit counters, applets, plug-ins, photo gallery, link bars, etc.

39. Exploring FrontPage 2003 - Grauer and Barber 39 Publishing a Website The Publish Web Command allows a user to publish a web page to a web server. A user cannot simply copy his or her files to a server A user may also publish a web page to:  A floppy drive  A hard drive  Jump drive (space permitting)

40. Exploring FrontPage 2003 - Grauer and Barber 40 Most Important Step… Even if you’ve examined your local site carefully, you’re still not done…

41. Exploring FrontPage 2003 - Grauer and Barber 41 How to make an annoying web site Use very small fonts Make one word many different colors Overuse italics and boldface Misspell words Use too many graphics Use large graphics Use annoying background colors

42. Exploring FrontPage 2003 - Grauer and Barber 42 Annoying web site pointers (cont) Use background pictures that are not transparent and place text on top Include broken links and/or too many links Overuse animated gifs Overuse bullets Include annoying MIDI files (music)

43. Exploring FrontPage 2003 - Grauer and Barber 43 Pointers for good web page design Create an outline of your site. All pages should be related with a common look and theme. Keep your site focused; each page should have one distinct theme; related themes should be linked from other pages. Look at other web pages for ideas. Know which tools are supported by your web host. Know your target audience.

44. Exploring FrontPage 2003 - Grauer and Barber 44 Summary  Lessons learned in this chapter:  About HTML  How to create a one page website  Add, modify and format text in a website  Create hyperlinks to both Internal and External sites  Insert a marquee into a website

45. Exploring FrontPage 2003 - Grauer and Barber 45 Summary (continued)  Use Templates and Themes  Use the Photo Gallery Feature  Insert Interactive Buttons  Work in different FrontPage Views  Use a Web Wizard  Publish a website

46. Exploring FrontPage 2003 - Grauer and Barber 46 Questions?