1 / 46

Introduction to Web Development and Exploring FrontPage 2003

Introduction to Web Development and Exploring FrontPage 2003. Robert Grauer and Maryann Barber Modified by A. Clark (USA). Committed to Shaping the Next Generation of IT Experts. Objectives. Use FrontPage to: Create a web page Open a web page Rename a web page

olin
Download Presentation

Introduction to Web Development and Exploring FrontPage 2003

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Introduction to Web Development and Exploring FrontPage 2003 Robert Grauer and Maryann Barber Modified by A. Clark (USA) Committed to Shaping the Next Generation of IT Experts. 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 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 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! Exploring FrontPage 2003 - Grauer and Barber

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

  6. Connecting to the Internet • Three components needed • Communications capability (modem, LAN connection) • Internet Account/ISP • Software 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 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 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 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 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 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 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 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.) 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 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. 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). 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) 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 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 Exploring FrontPage 2003 - Grauer and Barber

  21. 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 Exploring FrontPage 2003 - Grauer and Barber

  22. 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> Exploring FrontPage 2003 - Grauer and Barber

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

  24. 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 Exploring FrontPage 2003 - Grauer and Barber

  25. FrontPage Toolbars Standard Toolbar • Similarities to other Office Application Toolbars • Subtle differences between FrontPage Toolbars and other Office Application Toolbars Formatting Toolbar 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. 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 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 To Here From Here With one Mouse click 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 Exploring FrontPage 2003 - Grauer and Barber

  30. 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> Exploring FrontPage 2003 - Grauer and Barber

  31. Themes • Create consistency in style • Speed up page design • Can be customized • Can be created from scratch 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 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 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 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 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. 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 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. 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) Exploring FrontPage 2003 - Grauer and Barber

  40. Most Important Step… • Even if you’ve examined your local site carefully, you’re still not done… TEST YOUR SITE!!! 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 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) 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. 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 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 Exploring FrontPage 2003 - Grauer and Barber

  46. Questions? Exploring FrontPage 2003 - Grauer and Barber

More Related