Table of Contents
Web Authoring Programs speed up the process of Web page creation. They allow the user to create Web pages just as you would create a word processing document. Type your text, format fonts and paragraphs, insert pictures and tables and save. When the program saves your file, it translates the document into HTML commands and saves those commands in a .html text file. Because the file is saved in plain text formatting, it can be read by any Web browser or other authoring software.
We have two Web authoring programs on our system, Word 97 on NT machines, and Netscape Composer on NT and Linux machines. This tutorial uses Netscape Composer in order to be compliant with both operating systems; however, I think that you'll find Word 97 to be a more powerful program.
I suggest this approach: Work through this tutorial using Netscape
Composer. Upon completion of this tutorial, you should have a pretty good feel for how
Authoring software works. Word 97 is very similar in approach to Netscape Composer. After
you finish this tutorial, open Word 97 and experiment with the authoring tools in that
program. Experiment on your own and come to your own conclusions as to which program you
|To start Netscape Composer from Windows NT:
||To start Netscape Composer from Linux:
|To create a Web page with Word 97 from Windows NT
||To create a Web page with Word 97 from Linux:
Creating Web Pages With Netscape's Composer
Lets begin by testing font sizes using the Font Size Drop-down List on the tool bar.
This is 12 point size and the default.
This is 14 point size.
This is 18 point size.
This is 24 point size.
This is 36 point size.
Lets investigate the items in the Font Style Drop-down list on the tool bar.
This is a variable width font. Each character takes up only the width it needs.
This is a fixed width font. All characters use the same width.
Try out a few font styles along with the color drop down palette, bold, itals, and underline buttons on the toolbar. Allow the mouse pointer to rest on a button in order to see the label for the button.
Here's orange, bold Comic Sans
MS (18 point).
Here's blue, underlined Lucida Handwriting (18 point).
Here's red italicized Arial (18 point).
Now lets check out the HTML code that Composer creates to represent what we've created.
You should inspect the source code every step or two to appreciate the benefit of using a Web page authoring program. It's also a great way to learn more HTML commands and techniques.
Let's try out the remaining buttons on the formatting tool bar.
To create a bullet list, highlight the list and click the bullet list button.To increase the indentation of list items and create sub-bullets, highlight the items and click the Increase Indent button.
Let's try the same technique with the Numbered List button.
Interesting. Composer shows the list item numbers with pound signs, but when you view the page with a Web browser, the pound signs are replaced by numbers. Go figure!
Experiment with Alignment. This is left justified. This is centered.
This is right justified.
Viewing the Page With a Browser.
As noted in the last section, what you see in Composer's editing window is not necessarily what you will see from the Web browser. Always check your work with a browser. Browsers offer you two methods to view your creation in progress.
1. View the page via URL by saving the file in your public_html directory, making it readable by the world, and typing the URL in the location box. For example if comp1.html is in your public_html directory, you can access it with http://www.cs.fsu.edu/~loginname/comp1.html.
2. View the page with the View File option. All browsers allow you to view HTML files that reside on your local hard drive. In Netscape, simply open the File menu, choose Open page..., click the Choose file button and browse for your file on disk.
Composer offers a shortcut to viewing your page by clicking the Preview button on the
tool bar. Your page will be viewable in Netscape's Navigator window.
It's always wise to check your page with Netscape and Internet Explorer.
Leave your browser open so that you can return to it after you've made additions to
your page, click Reload, and view the changes.
Links are easy to add to a page.
CIS3066 Home PageAny object that can be selected on your Web page can act as a link.
Linking to Targets
You can create links to text within the same Web page with this two step method:
This technique is demonstrated in the table of contents at the top of this page.
Follow these steps to add an image:
Note that some formatting will not be shown in the editor window. View the page with
your browser to check the formatting.
Add horizontal lines to your page by clicking the H. Line button on the tool bar.
Follow these steps to add a table:
Editing table properties can be accomplished by clicking on the table and choosing Table Properties from the Format menu. Here's a table with a variety of different properties.
|Use background colors or images.||Place an image here.|
Word 97 handles tables in a much more intuitive manner.
Other Menu Options
All of the features that we've implemented through tool bar buttons can also be accomplished through menu items. Explore the menus and see what else can be found there. Items of interest:
File/Publish: Lets you FTP your Web page and supporting pages and image files to your
Edit/HTML Source: Opens a text editor of your choosing for direct HTML source editing.
View/Page Info: Opens a separate window displaying info links and files called by your page.
Insert/HTML Tag: Lets you manually enter an html command that might not be supported by Composer.
Format/Page Colors and Properties: Allows you to specify background color or image and text colors for links etc.
Tools: Has some funky more advanced tricks you can try out.