1 / 43

Introduction to Web Development and Exploring FrontPage

Introduction to Web Development and Exploring FrontPage. 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

dabrowski
Télécharger la présentation

Introduction to Web Development and Exploring FrontPage

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 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

More Related