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.
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
- 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.
- Find how to switch between views in your web authoring software. Does
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.
- Ask your instructor for instructions on how to open and save files
with your web authoring software in your school's computing
- Now open your portfolio file unit6.htm in your web authoring
software. At this point the page should have a banner, a
navigation menu, and a pair of W3C icons. Practice switching between views
and exploring your page using your 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
Examples from common applications
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.
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.
- Add a main heading "Unit 6: Web Authoring Software" to your
web page, just beneath the menu. Since you already know how to do this
with source code, try doing it using the graphic view, then check your
source code to see what code was inserted by the software.
- Now add a subheading "My Web Authoring Software" beneath
- As in previous lessons, add a named anchor to this heading with
name="software". In some
web authoring tools, this feature may be called a bookmark. See if you can
figure out how to add it using your software's menu system or graphic
- Beneath this subheading, write a short paragraph identifying what web
authoring software you're using, including the version number.
- 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.
- Explore your software, and find out how many ways there are to add a
to your web page.
- Create a new section in your web page with subheading "List of
Links", and a named anchor "links"
- In this new section, use your software's graphic interface to add an
unordered list of links to a few of your favorite websites.
- Now switch to Code View to see the HTML
that was generated by the web authoring tool.
- Open your portfolio home page (index.htm) in your web
authoring software. See if you can figure out how to link to a specific
named anchor within a document. In the appropriate places on your home
page, convert items to links to the new sections in your Unit 6
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:
- Explore your software, and find out how to insert a picture.
- Create a new section in your web page with heading "Inserting an
Image" and named anchor "image".
- In the new section, insert the 3D Box image that you created in the
lesson on Basic Image
- Explore the various options that are available for image
properties. Try chang some of these properties to see what happens.
Be sure to add alternate text to the image
for the benefit of those who can't see it.
- After changing image properties, switch to Code View to see the HTML
that was generated by your changes.
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.
Save your web page. In the next module, you will be changing the presentation
of the page using style sheets.
Copyright © 2005-2008 by University of Washington.
Permission is granted to use these materials in whole or in part for
educational, noncommercial purposes provided the source is acknowledged.
This product was created with support from the National
Institute on Disability and
Rehabilitation Research of the U.S. Department of Education (grant
#H133D010306), and is maintained with support from
the National Science Foundation (grant #CNS-0540615). The contents do not
necessarily represent the policies of the U.S. federal government, and you
should not assume their endorsement.