Lesson 1: Basic Features of Web Authoring Software


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:

Feature #1: Views

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

Typically you can switch between views by selecting a relevant item from the program's main menu (usually within the View menu) or by selecting a relevant tab or button.


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 or panels are available with buttons for adding common features such as headings, subheadings, links, ordered or unordered lists, etc., or for formatting text. The following examples show what this looks like in two of the most popular programs.

Selecting Headings in Adobe Dreamweaver

A panel from Dreamweaver CS5 that includes a set of buttons with text labels Heading 1, Heading 2, Unordered List, List Item, etc.

Selecting Headings in Microsoft Expression

A text formatting toolbar that includes a dropdown list of heading styles


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. If you do this after you have selected existing text in the document, a dialog box will appear prompting you for the destination of the link (and possibly other information) then the text you selected will be converted into a link. Most web authoring software tools additionally provide a button or icon that allows you to quickly insert a link.


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, and (if your software is accessibility-aware) for alternate text. After you have inserted the image into your webpage, you can go back later and edit its attributes in a Properties dialog box or panel. Image Properties are typically accessed by right clicking on the image and selecting Properties from the popup menu. The following is an example Picture Properties dialog.

Snapshot of Picture Propreties dialog in Microsoft Expression


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. Keep your document organized using subheadings. If you add new sections to your document, add corresponding links to these sections from your home page.

All done?

Proceed to the next lesson, in which you will be changing the presentation of the page using CSS.