1 / 20

Part Five – Creating Web Pages

Part Five – Creating Web Pages. Chapter 15 - Web Page Creation Strategies Chapter 16 - Web Page Design Chapter 17 - How HTML Works Chapter 18 - Creating Your Web Page R é sum é Chapter 19 - Putting Images on Web Pages Chapter 20 - Using Tables and CSS for Web Page Layout

aquila-merrill
Download Presentation

Part Five – Creating Web Pages

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. Part Five – Creating Web Pages Chapter 15 - Web Page Creation Strategies Chapter 16 - Web Page Design Chapter 17 - How HTML Works Chapter 18 - Creating Your Web Page Résumé Chapter 19 - Putting Images on Web Pages Chapter 20 - Using Tables and CSS for Web Page Layout Chapter 21 - Making a Local Web Site and a Home Page Chapter 22 - Publishing Files on the World Wide Web

  2. Part Five – Creating Web Pages Creating a Web site is one of the most empowering skills that you will learn. You can print your resume or leave it on the Web for quick and easy access. Creating your home page establishes your name anywhere on the Web. Linking your term papers to your Web site will contribute to overall scholarship.

  3. Chapter 15 Web Page Creation Strategies

  4. Chapter 15 Objectives • Explain the three basic approaches to creating Web pages • Know when and how to use an HTML editor and an HTML translator • Learn the meaning of WYSIWYG and the concept of WYSIWYG editing

  5. Three Ways to Create Web Pages (1) Use an HTML editor Use hypertext markup language to directly encode Web pages (2) Use “Save as Web Page” editor Convert word-processed documents into Web pages (3) Use WYSIWYG editor Use what-you-see-is-what-you-get editor to automatically generate HTML code from text and graphics that you enter in a GUI

  6. HTML Editors • All Web pages are encoded in the hypertext markup language (HTML) • HTML consists of text and codes called tags • The tags determine the Web page structure • The HTML editor creates the Web pages • An advantage of HTML code is that the user has greater control of Web page development • A disadvantage of HTML coding is the “technical” aspects and tedium for less technically-inclined users

  7. HTML Editors • HomeSite • A popular HTML editor for Windows O/S • Macromedia provides a stand-alone version or bundles with Dreamweaver software • For 30-day free trial version, go to www.macromedia.com/homesite

  8. HTML Editors • Bare Bones Edit (BBEdit) • Popular HTML editor on Macintosh O/S • BBEdit uses menus and buttons to easily enter HTML tags, colors, etc. • Get a free demo version at www.barebones.com

  9. Figure 15-2 BBEdit uses menus and buttons to input HTML tags, choose colors, and enter special symbols

  10. HTML Translators • An HTML translator converts an existing document into a Web format • Microsoft Word, Excel, Access, and PowerPoint have built-in HTML translators • From the File menu, choose “Save as Web Page” or “Save as HTML”

  11. HTML Translators • Microsoft Word • From File menu, “Save as Web page” creates HTML version with .htm extension • Microsoft Excel • From File Menu, “Save as Web page” creates HTML version with .htm extension • Microsoft Access • Select a table; in the Export section set the “Save as Type” field to “HTML Documents”

  12. HTML Translators • Microsoft PowerPoint • PowerPoint is a powerful Web page creation tool • “Save a Web page” creates a separate HTML file for each PPT slide • You can view the presentation in your browser by either clicking items on the screen or using a side menu

  13. Figure 15-3 PowerPoint creates Web pages that have a menu that lets the user jump to a slide at any time.

  14. WYSIWYG Editors • WYSIWYG is an acronym that means What You See Is What You Get • Pronounced (wiz-ee-wig) • WYSIWYG editors let you type your text directly onscreen • To change text, colors, font sizes, or other text attributes, you select the text and click a button or icon to create HTML

  15. WYSIWYG Editors • Dreamweaver • Macromedia’s Dreamweaver uses graphical tools to do the work and also lets you edit the HTML tags • Microsoft FrontPage • Designed for use with Microsoft Office • FrontPage combines a WYSIWYG tool with an HTML editor that create both “view” and “edit” windows

  16. WYSIWYG Editors • Nvu • Nvu is an open-source replacement for Netscape Composer • For a free Windows, Macintosh or Linux version of Nvu, go to www.nvu.com

  17. Figure 15-4Dreamweaverlets you view the WYSIWYG Design view, the Code view, or both views simultaneously. Illustrated here is the split view, which displays both views onscreen.

  18. Figure 15-5 Microsoft FrontPage is editing my home page. At any time, I can click the HTML button to view the code, or I can click the View button to see how the page will appear on the Web.

  19. Figure 15-6 Nvuis editing my home page. For true WYSISYG editing, you can make editorial changes in the Preview window shown here. You can also edit the HTML code in the HTML Source window.

  20. Choosing a Web Page Editor • You should decide whether you will use Dreamweaver, FrontPage, or Nvu • Your choice may depend on what tool your workplace or school has available • Remember, Nvu is open-source (free) • Compare the tutorials in this book to help decide which software suits you

More Related