Introduction to Web Development and Exploring FrontPage

1. Introduction to Web Development and Exploring FrontPage www.assignmentpoint.com

2. Objectives • Internet and Web Review • 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 www.assignmentpoint.com

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 www.assignmentpoint.com

4. Internet Review • Network – software and hardware necessary for two or more computers to communicate • Internet – global network of networks • http://www.internetworldstats.com/stats.htm • WWW – system of Internet servers supporting specially formatted documents • HTML – Hypertext Markup Language • Language web documents are formatted in www.assignmentpoint.com

5. Connecting to the Internet • Three components needed • Communications capability (modem, LAN connection) • Internet Account/ISP • Software www.assignmentpoint.com

6. 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 www.assignmentpoint.com

7. 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 • Internet Explorer • Mozilla FireFox • Safari • Opera www.assignmentpoint.com

8. 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 www.assignmentpoint.com

9. 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 System www.assignmentpoint.com

10. 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 www.assignmentpoint.com

11. 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 www.assignmentpoint.com

12. 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 • What does your server support? • FrontPage extensions (support for feedback pages, hit counts, etc.) www.assignmentpoint.com

13. 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 www.assignmentpoint.com

14. 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. www.assignmentpoint.com

15. 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).

16. 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) www.assignmentpoint.com

17. 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 www.assignmentpoint.com

18. 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 www.assignmentpoint.com

19. HypertextMarkupLanguage • HTML consists of tags that are placed around plain text. • The browser follows the instruction of the tags • < and > symbols are used to enclose the tags • Tags can be viewed in Code View www.assignmentpoint.com

20. HypertextMarkupLanguage (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., </b> www.assignmentpoint.com

21. HypertextMarkupLanguage • FrontPage allows a user in Code View to: • View code • Enter code • Modify code HTML Code is color coded Code View Button

22. Hypertext Markup Language (continued) • Examples of HTML Tags • <b>This is bold text</b> • <h1> This is a level one heading</h1> • <ul>This begins a list • <li>This is an item in the list </li> • <li>This is another item</li> • </ul>This ends the list • <p> The tag at the end of a line indicating the next line will begin a new paragraph www.assignmentpoint.com

23. FrontPage Toolbars Standard Toolbar • Similarities to other Office Application Toolbars • Subtle differences between FrontPage Toolbars and other Office Application Toolbars Formatting Toolbar www.assignmentpoint.com

24. 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. www.assignmentpoint.com

25. 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 www.assignmentpoint.com

26. 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 To Here From Here With one Mouse click www.assignmentpoint.com

27. 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 www.assignmentpoint.com

28. Hyperlinks (continued) • The code behind a hyperlink • Internal link - <a href = “faq.htm” >Click here to go the FAQ page</a> • External Link - <a href = “http://www.google.com” >Click here to go to Google</a> www.assignmentpoint.com

29. Themes • Create consistency in style • Speed up page design • Can be customized • Can be created from scratch www.assignmentpoint.com

30. 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 www.assignmentpoint.com

31. FrontPage Templates • To apply a template: • Choose the Layout Tables and Cells Task Pane • Choose the Table Layout desired www.assignmentpoint.com

32. 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 www.assignmentpoint.com

33. The Photo Gallery (continued) • To use the Photo Gallery • Click Insert • Click Web Component • Select Photo Gallery • Select Layout • Click Finish • Insert images www.assignmentpoint.com

34. 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. www.assignmentpoint.com

35. 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 www.assignmentpoint.com

36. 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. www.assignmentpoint.com

37. 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) www.assignmentpoint.com

38. Most Important Step… • Even if you’ve examined your local site carefully, you’re still not done… TEST YOUR SITE!!! www.assignmentpoint.com

39. 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 www.assignmentpoint.com

40. 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) www.assignmentpoint.com

41. 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. www.assignmentpoint.com

42. 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 www.assignmentpoint.com

43. 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 www.assignmentpoint.com