UNIT 6 > MODULE 1

Lesson 1: Basic Features of Web Authoring Software

Overview

This lesson summarizes the basic features common to most popular web authoring software programs. It describes the overall working environment, and provides a summary of the HTML techniques you learned earlier in this course, and how to implement them using most web authoring tools. Use this handout as a starting point for exploring the web authoring software used in your class.

Learner Outcomes

At the completion of this exercise, you will:

• have a basic understanding of your software's web authoring environment
• have a basic understanding of the features that are common to most web authoring software programs.
• know how to create common HTML or XHTML elements using web authoring software rather than writing code

Feature #1: Views

Most web authoring software provides multiple views of the web page you're working on.

• Standard, normal, or design view - This is typically the default view, which is a blank screen on which you type, paste, or insert content. This is very similar to a word processor screen.
• Code view - Allows you to view and work directly with the HTML code.
• Split - Both of the above views are displayed simultenously in separate windows.

Examples from common applications

• In Macromedia Dreamweaver, you can switch between views using the View menu.
• In Microsoft FrontPage, you can switch between views using tabs that appear in the lower left corner of the application window.
• In Netscape Composer, you can switch between views using either of the above methods.

Activity

Find how to switch between views in your web authoring software. Does the software provide more than one way to do this? Try typing something on the screen in Normal or Design View, then switch to Code View to see the HTML that was generated by the web authoring tool.

Feature #2: Creating Headings and SubHeadings

In Normal or Design View, Web authoring software is very similar to word processing software. One or more toolbars appear across the top of the application window. A text formatting toolbar typically includes buttons for bolding and italicizing text, and probably additionally includes some means of identifying a heading or subheading.

Examples from common applications

Example #1

The following is a sample toolbar from Macromedia Dreamweaver. To create an <h1> heading in Dreamweaver, simply select the button labeled h1, type your heading text, then press Enter.

 

Example #2

The following is a sample toolbar from Microsoft FrontPage. To create an <h1> heading in FrontPage, use the dropdown menu to select Heading 1, type your heading text, then press Enter.

Activity

Try creating a practice document that includes multiple levels of headings and subheadings, with one or more paragraphs under each heading. After you've added this content to your web page, switch to Code View to see the HTML that was generated by the web authoring tool. Does it differ at all from the HTML you would have used if you were coding this page manually?

Feature #3: Inserting Links

In many web authoring software products, you add a link to a document by selecting Insert from the menu, then Link or Hyperlink. A dialog box will appear, prompting you for the link text that you want to display, the destination of the link, and possibly other information. Most web authoring software tools additionally provide a button or icon that allows you to quickly insert a link.

Activity

Explore your software, and find out how many ways there are to add a link to your web page. Try adding a link, then switch to Code View to see the HTML that was generated by the web authoring tool.

Feature #4: Inserting Images

In many web authoring software products, you add an image to a document by selecting Insert from the menu, then Image or Picture. A dialog box will appear, prompting you for the location of the image. After you have inserted the image into your webpage, you can edit its attributes in a Properties dialog box or panel. For example, you can change the image's height and width, put a border around it, make it into a link, and add alternate text for users who can't see the image. Image Properties are typically accessed by right clicking on the image and selecting Properties from the popup menu (if you are a Mac user, you can achieve the same result by pressing CTRL and clicking on the image to see the popup menu).

Examples from common applications

The following is the Picture Properties dialog from Microsoft FrontPage:

Activity

Explore your software, and find out how to insert a picture. Do so, then try changing some of its attributes. Be sure to add alternate text to the image for the benefit of those who can't see it.

More Activities

The best way to learn a new software application is to explore it. Try adding additional components to your web page, including ordered and unordered lists, tables, form fields, and anything else that you're curious about. After you have added each component, switch to Code View to see the HTML that was generated by the web authoring tool.

All done?

Save your web page. In the next module, you will be changing the presentation of the page using style sheets.

Copyright © 2006 by University of Washington. Permission is granted to copy these materials for educational, noncommercial purposes provided the source is acknowledged. This product was funded by the National Institute on Disability and Rehabilitation Research of the U.S. Department of Education (grant #H133D010306). However, the contents do not necessarily represent the policy of the Department of Education, and you should not assume their endorsement.