Netscape 7's Composer a WYSIWYG HTML Editor  & Using Table Tags

Creating Web Pages -- A personal web resource page as an example

Table of Contents

   Pre Lab: Using Netscape's Composer to Create a Web Resource Page
      Goals of the Lab:
    Creating the Resource Page
      Introduction: Why Create a Resource Page?
   Using The HTML Editor Composer
      Writing Web Pages using Netscape 4.7's Web Editor, Composer
      A Tutorial on Netscape's Composer -- The student should read this before lab and print out a copy for reference!
      Alternative approaches to web editors:
        Microsoft's Office 2000 and Word 2000:
        Microsoft's Front Page and Front Page Lite:

   Creating tables for more interesting layouts using table tags:
      Why we need tables:
         The original option for 2-D layout the <Pre></Pre> tag:
      What are the tags used to create a table:
         The Table tag <Table></Table>:
         The Caption tag <Caption></Caption>:
         The Table Row tag <Tr></Tr>:
         The  Table Data Cell Tag <TD></TD>:
         The Table Header tag <TH></TH>:
      The Rowspan and Colspan attributes:
         Examples of Tables:
         Using Composer for Table Design and Editing:
   Self Test of Lab Concepts:


   Example:
   A Web Resource Page
   Lab 4 Instructions:
      Exercise 1: Create the Table of Contents (TOC)
      Exercise 2:  Next Create the Four sections:
         Step 1:  Create the First Section Heading
         Step 2:  Create the Table of resources for this Section
         Step 3:  Create a Link to the Table of Contents and Set a Horizontal Line
         Step 4:  Copy and Paste 3 copies of section one and make the correction edits
      Exercise 3:  Find the Archives for each Category and Fill in the Tables
         Step 1:  Find three archives for the category of the section
         Step 2:  For each archive fill in the row of the section's table
         Link in the Resource (archive) site
         Create the Comment about the archive's contents.
         Link in a sample of the Archive's materials for this category
      Exercise 4:  Create a Link to Your Home Page, a Back Button, and Email
         Step 1: Create a Link to Your Home Page
         Step 2: Create a Back Button in Javascript to go back to the last page the viewer visited
         Step 3: Create an Email Link
      Exercise 5:  Modify index.html to link to your resource.html
      Exercise 6:  Test and move all files to the web site
   References:
      Glossary of New Terms
      Related Tutorials:
      FAQ's:
   Other References:
      Netscape's Manuals Library
Email

Pre Lab: Using Netscape's Composer to Create a Web Resource Page

Goals of the Lab:

The goals of this are centered around creating interesting, attractive, and compelling web documents in an efficient and productive manner. Web sites are no longer simple billboards that can be created by inexperienced designers. A modern E-commerce web site is an investment of tens of thousands of dollars. Increasingly complex web sites are now approaching initial investments of a few hundred thousand dollars. The market is such that the first companies to establish a presence are the only that survive. Thus, those who want a career in this lucrative marketplace must use tools and design processes that are highly productive and timely. Thus the goals for this week are:
  1. To learn the Netscape web editor, Composer, an editor that makes creating web pages only slightly more difficult than creating word processing documents.
  2. To learn how to design tables and to use the table tags to create attractive two dimensional layouts.
  3. To learn how to find and create a web resource page to keep track of sites that contain free and shareware resources to make creating more attractive web pages easier.

Creating the Resource Page

Introduction: Why Create a Resource Page?

 The Student will locate 3 archive sites and  a sample from each site for the following 4 categories:
  1. Animated gifs
  2. Backgrounds
  3. Audio and Sound
  4. Video and Movies
The Student will use the web search tools to find the Resource (archives) sites. Creation of the web resource page has two purposes: 1.) to increase the student's ability to find useful resources, tutorials, and shareware, 2.) to have a readily available source of material for the student to use in creating multi-media web pages. In later assignments the student will need to design and create their own multi-media samples. The resources found are also part of the creator's intellectual property and the student should follow all posted notices regarding their use. Generally copying web material for noncommercial purposes is allowed if there is no copyright notice or other restrictions (so called fair use). Intellectual property rights are rapidly evolving. The student should, as a matter of course, cite the source of web based material. If there is any doubt , request permission before using any intellectual property particularly for commercial applications.

Netscape's Composer -- a WYSIWYG HTML Editor:

Composer Toolbars

Writing Web Pages using Netscape 7's Web Editor, Composer

In general, we will use the Netscape HTML editor, Composer, because it works like a What You See Is What You Get (WYSIWYG) word processor, e.g. MS Word.. In the previous lab we actually used some of the HTML tags and created HTML documents. Since the student knows the function of the HTML tags; to use Composer one only needs to:
  1. select the appropriate button in the composition toolbar,
  2. answer the questions in the resulting dialog box and fill in the appropriate text boxes, and
  3. click the [Apply] button to see what the change looks like and the [Close].

Interduction to Composer's User Guide:

The User Guide will walk throught the major features needed to do the exercises on creating tables.
 
Netscape Composer's User's Guide
Netscape 7's Composer -- the current version ComposerIntroduction/Net7UserGuide.html 
Netscape 4.7's Composer ComposerIntroduction/UserGuide.html

The Tutorial and Reference Manual is designed for a more comprehensive and though discussion of Netscape 7.0 and 4.7's Composer  -- The student should read the one that applies before attempting the lab exercises and print out a copy of it for reference! Note Net 7 is significantly different than Net 4.7 Composer.

Netscape Composer's Tutorial and Reference Manual 
Netscape 7's Composer -- the current version

Tutorial and Reference Manual on Netscape's 7.0 Composer


Netscape 4.7's Composer

Tutorial and Reference Manual on Netscape's 4.7 Composer




Alternative approaches to web editors:

Microsoft's Office 2000 and Word 2000:

The current version of MS Word 2000 will allow a user to create a web page by using the Save_As option and choosing the file type --Web Page. Other Office 2000 products such as Excel and Power Point similarly allow the creation of HTML documents as output.

Microsoft's Front Page and Front Page Lite:

Front Page is Microsoft's WYSIWYG HTML editor. It is similar to Composer and has some addition features that make designing the first web easy.

For tutorials on Front Page see:

Macromedia's Dream Weaver:

Dream Weaver is a sophisticated  WYSIWYG editor that is used to develop professional web sites.
For tutorials on Dream Weaver:

Using Table Tags -- Creating tables for more interesting layouts :

Why we need tables:

Before table tags were added to the HTML standard there were few mechanisms in HTML to control the place of text and images if the designer had a concept of how the materials related to each other in two dimensional space. This was the result of the fact that the original HTML was designed as data flow language. The browser read and displayed the HTML as it read in the tags and content. Thus the material flowed across the page from left to right without concern for what appeared above or below it. A modern web site is a complex layout arrangement of white space, images, and text designed to let the viewer sort out: This complex arrangement must be attractive and easy for the viewer to understand. It can not appeared to be cluttered or confusing as most surfers will simply move on. The arrangement of the layout must preserve the desired spatial relationships under an almost infinite possible window sizes and display devices. Finally in the new phase of Internet development, i.e. the Business and Government phase, the issues of inclusion and diversity require the awareness of those who are still using text-only browsers and the visual impaired. The designer must make allowances for these when using the table tags.

The original option for 2-D layout the <Pre></Pre> tag:

The <Pre></Pre> container tag, which stood for preformated text, instructed the browser to layout the container's text exactly as it was typed into the HTML source document. Thus the text editor that created the HTML source file laid out the text exactly as it hoped the browser would. This included the white space used to create the precise rows and columns. For this concept to work out the author was required to use a fixed width type font. This allowed for tables of rows and columns of numbers and text to be laid out. However, it could not be adjusted for size of window etc. The resulting appearance  looked and appeared like an old fashion typewriter or teletype. Image placement of the type needed for modern e-commerce sites was impossible.
 

What are the tags used to create a table:

The Table tag <Table></Table>:

Note the hierarchy of attribute settings. The controlling attribute is the one closest to the data cell. Thus the <Table></Table> 's attributes are overridden by those of the <TR></TR>'s and the <TD></TD> or <TH><?TH> override those of the <TR></TR> that contains it.
 
 
 
 
 

Table Tag Attribute
Attribute/Values
The | is either .. or..
Attribute Property
Border=" | 0 | 1 | N" Create: 
  • no border default 
  • "0" width. i.e. no border
  • "1" width a thin line
  • "N" width where N is some integer greater that 1 will create a 3-d looking border. See, for example, the title box at the top of page.
Cellspacing="N" Creates the border around the cells. Here N is an integer. N=0 is no interior framing.
Cellpadding="N" Creates the space around the cell's text and its border. Set this to some positive value >1.
Width="N | N%" Create table N Pixels in width or N per cent of the available width
BGcolor="#RGB | Color_Name" The table's Background color can be specified as either a RGB color triple or as one of the HTML color words.
Background="URL" Allows an  image to used as tile for a background.


The Caption tag <Caption></Caption>:

A caption used to title a table.
 
 
 

Table Tag Attribute
Attribute/Values
The | is either .. or..
Attribute Property
 align="top|bottom"
  • Align=top -- put caption at the top of table
  • Align=bottom -- put caption at the bottom of table

The Table Row tag <Tr></Tr>:

The <TR></TR> container holds all the cells in a given row, i.e. the <TD></TD> or <TH></TH> containers. The <TR> container creates the rows of the table and the cells define the elements of the row.
 
 
 

Table Row Tag Attribute
Attribute/Values
The | is either .. or..
Specify only one choice
Attribute Property
ALIGN ="LEFT | CENTER | RIGHT"  a horizonral align text using  either Left or Center or Right Justified
VALIGN ="TOP | MIDDLE | BOTTOM" vertical alignment of the text either top or center or bottom
BGcolor="#RGB | Color_Name" The row's Background color can be specified as either a RGB color triple or as one of the HTML color words.
Background="URL" Allows an  image to used as tile for a background.
NOWRAP  Stop word wrapping in the cell. This forces the cell to put all the text on one line.




The  Table Data Cell Tag <TD></TD>:

The table data cell is the basic atomic unit of the table. It contains the text and image information that will be display at this row and column. Note that the <TD></TD> container must be in a <TR><TR> container. The TD container may contain a <Table></Table> container. Hence the Table container can hold not only almost all text and image related tags even a table within a table.
 
 
 

Table Data Cell Tag Attribute
Attribute/Values
The | is either .. or..
Attribute Property
ALIGN ="LEFT | CENTER | RIGHT" a horizontal align text using  either Left or Center or Right Justified
VALIGN ="TOP| MIDDLE| BOTTOM"  vertical alignment of the text either top or center or bottom
COLSPAN="N" The Cell spans N columns where N is an integer
ROWSPAN="N" The Cell spans N rows where N is an integer
NOWRAP  Stop word wrapping in the cell. This forces the cell to put all the text on one line.
Width="N | N%" The width of the cell can be specified as N Pixels or as N% of the table's width.
BGcolor="#RGB | Color_Name" The cell's Background color can be specified as either a RGB color triple or as one of the HTML color words.
Background="URL" Allows an  image to used as tile for a background.

The Table Header tag <TH></TH>:

The <TH></TH> container is special case of the <TD></TD> and when used creates a cell whose text is in bold and centered as the default. As the name implies it is used as the tops of the Columns to specify their purpose. The attributes are the same as the <TD></TD>.
 

The Rowspan and Colspan attributes:

The rowspan and colspan allow a cell to occupy the location of more than one cell. For instance suppose you want a cell that spans all the columns to provide a heading. To achieve this set colspan equal to the number of columns.
 

A Simple Example of a Colspan Table 
(2 Rows 3 columns)
HTML Source Resulting Display 
Simple ColSpan Table 
<Table border="2" cellspacing="2" > 
<!-- First Row --> 
<TR> 
<TD colspan="3"> Title Spanning the Colums</TD></TR> 
<!-- Second Row --> 
<TR> 
<TD>R2 C1</TD><TD>R2 C2</TD><TD>R2 C3</TD></TR> 
</Table>
Simple ColSpan Table 
 
Title Spanning the Colums
R2 C1 R2 C2 R2 C3

 

Warning about Cells that contain no text
When creating a table with a cell that is without content, i.e. no text or images, the cell will appear without the background color. This will cause a transparent hole in the table. One way to fix it so that the table correctly colors the cell is to simply type one or more spaces in the cell container. This will cause the browser to do the right thing.

Examples of Tables:

 

 Simple Table Examples 
(2 Rows 3 columns)
HTML Source Resulting Display 
Simple 2x3 Table 
<Table border="2" cellspacing="2" >
<!-- First Row -->
<TR>
<TD> R1 C1</TD><TD>R1 C2</TD><TD>R1 C3</TD></TR>
<!-- Second Row -->
<TR>
<TD>R2 C1</TD><TD>R2 C2</TD><TD>R2 C3</TD></TR>
</Table>
Simple 2x3 Table 
 
R1 C1 R1 C2 R1 C3
R2 C1 R2 C2 R2 C3
Simple 2x3 Table with 3-d border (5) 
<Table border="5" cellspacing="2" >
<!-- First Row -->
<TR>
<TD> R1 C1</TD><TD>R1 C2</TD><TD>R1 C3</TD></TR>
<!-- Second Row -->
<TR>
<TD>R2 C1</TD><TD>R2 C2</TD><TD>R2 C3</TD></TR>
</Table>
Simple 2x3 Table with 3-d border (5) 



 
R1 C1
R1 C2
R1 C3
R2 C1
R2 C2
R2 C3

Using Composer for Table Design and Editing:

The reader should review the  Composer Tutorial on how to create Tables. This is a good example of how  a web editor makes light work out of creating complex HTML tag containers such as <Table></Table>. The [Table] button displays a dialog box that first allows the author to create the basic table. The author can then insert new, delete, or modify table properties by using the [Right Mouse] button and select the appropriate choice.

Self Test of Lab Concepts:

 


Website Abstraction's Pop Quiz JS
CS 113 Quiz -- Using Netscape's Composer and Creating Tables
by P.D. & M.S. Krolak
Solution:
Your response: 
Start Over Cheat Mode

Example:

Before proceeding the student should examine the example very carefully. Use the links in the Table of Contents. Try all the links in the resource table in each section. If the multi-media does not work then your computer may need a program called a plugin to play the sound or the video.

A Web Resource Page

Gallery:

The following are examples of student work:

Lab Instructions Creating Tables with Composer:

The student will need to use a set of headphones or be at a computer with attached speakers to hear the audio and the video. Without the headphones the student can not tell if the resource page is working! Further, it is a good idea to see that the Navigator has plugins for the multi media files. To verify that the Navigator has the correct plugins click Help and select About Plug-ins. If MIME extensions are not there for such files as  .wav, .aiff, au, mp3, mid, rpm, etc. then go to the Netscape home page and download the necessary plugins.
 
 

Exercise 1: Create the Table of Contents (TOC)

Review FAQ's about Composer and how to open it.

Step 1: Set up the Head tags
Open the Composer to a New blank page.
Click [Format]

  1. Select [Format]/Page Colors and Background ..
    1. Chose a set of colors for text and background color or background image.
  2. Select [Format]/Tile and Properties ...
    1. Set the Title and page description -- this is important for the spiders to correctly classify or categorize your page.
[File]/SaveAs .. -- save the new document as   resource.html on the A:/ drive.

Step 2:
Create the Table of Contents Section

  1. Use the Alignment button to select Centered and the Style selector -- H1 heading. Entitle the page YOUR_Name's Resource page.
  2. Table Of Content is a H2 heading, After it is created highlight it and use the Target Operator to Name it TOC.
  3. Create an Unordered List with four items:
    1. Animated gifs
    2. Backgrounds
    3. Audio and Sound
    4. Video and Movies
  4. Next use the  [Insert]/Horizontal line to set off the Table of Contents from the four other sections

Exercise 2:  Next Create the Four sections:

Each section should have a Heading Level 2, i.e. a description of the section, a table, a return to the Table of Contents (link), and a horizontal line

Step 1:  Create the First Section Heading

Create the heading first, i.e. Animated Gifs. Use the Style Operator chose -- heading 2.
Create a Named Anchor by highlighting the section heading. Click [Insert]/Named Anchor. Use the name -- Animated.

Step 2:  Create the Table of resources for this Section

Next the Table use the following:
  1. 4 rows 3 columns
  2. Check caption and select top
  3. Border 0 or use 10 for a 3-d picture frame
  4. set both cell parameters to 2
  5. use 80% width and Center alignment
  6. Select color and click button chose a light pastel
  7. Click apply and close
  8. Move mouse to the top row label the cells (Link to Source, Comments, Sample)
  9. While still in top row, Click Format/ table properties/ Row/ select color and choose a compatible color for the headings row

Step 3:  Create a Link to the Table of Contents and Set a Horizontal Line

Create a link to the Table Of Contents. Click Link button and select the named link created by the Target operator for the Table Of Contents named anchor.

Create a horizontal line, i.e. [Insert]/Horizontal Line ..  to end the section.

Step 4:  Copy and Paste 3 copies of section one and make the correction edits

Exercise 3:  Find the Archives for each Category and Fill in the Tables

Fill in the Tables with links to the Resource site, a comment about the site, and a sample of the site's materials.

Step 1:  Find three archives for the category of the section

Use the same approach as Exercise 2  Step 1 of Lab 3 use the: category + archive to search.

Step 2:  For each archive fill in the row of the section's table

Link in the Resource (archive) site
To Link to the Web site of the Resource the student needs the site's URL found in the Locator bar of the browser. If the student is editing and searching at the same time the student can copy this URL using the familiar copy and paste approach. Here we must have two windows open:  the browser and the editor.

After we have copied the URL in the browser we move to the Table cell in the Editor, click on the link button Link Button in the Composition bar and type the text that will tell the viewer  about the site and then paste in the URL captured in the browser. Click Apply and Close. The text we created should appear in the first of the row as a link.

Create the Comment about the archive's contents.
The comment cell is to give more information about the site and the resources that are there. Normally, this will be text although at times it maybe linked to other pages within the site.
 
Link in a sample of the Archive's materials for this category
Placing an Image, an animated gif, or background

If the browser is open, the image or background may be clicked on using the right button and the Selection of the Save Image Location used. (This is like pasting the image's URL in the Clipboard). The student goes to the editor selects the table cell associated with sample and clicks the Image button  .Image Button
The image's URL is then pasted in the dialog box (Ctrl-V); click Apply and Close.

Linking  an audio or video file into the cell (more accurately into the web page)

If the browser is open, the student has two choices:

Select the Table cell in editor then click on the Link Button Link Button.
Fill in the text field with the appropriate description of the file.
To fill in the URL:

Exercise 4:  Create a Link to Your Home Page, a Back Button, and Email

Step 1: Create a Link to Your Home Page

Link the current page, resource.html, to the student's home page, i.e. index.html. Here the URL chosen is the absolute URL of the home page.
Click on the Link button.
 


Day Students
  • The URL is: http://www.cs.uml.edu/~Your_USERID
  • The text is: Visit My Home Page
Online Students
The URL is:  http://ceweb.uml.edu/StudentID
  • The StudentID is the User ID issued at registration


The text is: Visit My Home Page

Step 2: Create a Back Button in Javascript to go back to the last page the viewer visited

Using a JavaScript to act in a manner as the browser's Back button (see Composer tutorial).
Click on the Link button.

Step 3: Create an Email Link

Create an email link using the Mailto: method (see Mailto: in Composer tutorial).
Clink on the Link button.
 


Day Students
  • The URL is: Mailto:Your_user_id@cs.uml.edu    Or
    • Mailto:Your_Email_Address_that_you_check
  • The text is: Please send me comments and suggestions
Online Students
  • The URL is:  Mailto:Your_Email_Address_here
  • The text is: Please send me comments and suggestions

Exercise 5:  Modify index.html to link to your resource.html

Link the student's home page, i.e. index.html to the resource.html.
Click on the Link button.
 


Day Students
The URL is http://www.cs.uml.edu/~Your_USERID/resource.html
    The text is: Visit My Resource Page
Online Students
The URL is :
http://ceweb.uml.edu/Your_User_ID/resource.html
    The text is: Visit My Resource Page

 
 
 

Exercise 6:  Test and move all files to the web site

Test the new resource.html page and the modified index.html. Make sure all links work as advertised. Check all spelling and grammar. Examine all the table cells to make sure everything links. Follow the directions of Exercise 6 and 7 of Lab 3. Use the Dr. HTML program to help you find any errors and bugs.
The student has two mechanisms to transfer files from the working directory on the student's computer:
 
  1. Use Ws_ftp, or some similar ftp tool, to transfer your files to your web site:

  2. Ws_ftp is by now somewhat familiar and relatively simple to use. Further it can be used to correct many of the mistakes that can happen in creating a web page. Not all of these mistakes are due to the author's errors. For instance, Window's systems are not case sensitive, while Unix systems are. This can lead to Composer locating files and linking them on WIndow's machines only to find that the links don't work when uploaded to the Unix platform because the linked file's names don't match due to case. Ws_ftp has tools for modifying the file name. FTP also allows the author to see the complete directory structure and the creation dates and the content sizes, etc.
     
  3. Use the Composer Publish [Publish] button:

  4. The [Publish] button is a very effective way to transfer a file or a directory of files to the web site. If one is making changes and edits and then verifying them on the web site the [Publish] button can be very efficient and supplies all sorts of warning and error messages to tell you about potential mistakes. However, it does not allow you to create different versions of the file in the web site and overlays the current system so be very sure that you are ready to replace the current version in the web site.
In the above discussion the reader should not assume that it is necessary to use only one of these choices. In fact the authors recommend that the web designer use both methods based on what types of problems are being encountered. [Publish] is useful to make rapid changes while Ws_ftp is useful to deal with annoying missing files and similar problems.
 

Important Note on how to avoid errors
and how to fix them when they occur.
The student is reminded that each and every file used to create the resource.html page must be transferred from the student's computer. (what you saved to your A:/ drive). 
This list includes: 
  • resource.html
  • index.html ( you added a link to resource so you need to transfer the new file)
  • all animated gifs (3 plus the email one)
  • all background images (3)
  • all sound files (3)
Finding and fixing errors:

The failure to transfer a file will cause a variety of errors. 

Missing or Misspelled Link Errors:
The most common is that the page does not link (403 error). Did the file transfer to the web site, if yes then look at the file name. To fix make it make sure the name of the file matches the one in the error message including case. 

  • Use the [Rename] button in the Ws_ftp to change the name if there is a spelling or case error. 
  • If you forgot to move the file from your working directory to the web site, then use Ws_ftp to move the file from one machine to the other.


Missing or Misspelled Images File Errors:

If a little broken mirror appears instead of the image then  place the mouse over the mirror icon and press Right Mouse Button. The option [view image] will display the name of the image that the browser is looking for. Repeat the steps as in the broken link. 

Missing or Misspelled Audio files:

Audio files will act like missing links and are repaired in the same fashion. The browser may not have the correct plugin to play the file. If you need a plugin the browser normally will assist you in finding one. Follow the directions for download and installation of the necessary plugin 
 


References:

Glossary of New Terms

button -- An image that when clicked acts like a link

Dynamic HTML -- Latest revision of HTML standard that uses dynamic text, layers, and other features to improve the interaction with the viewer.

inline image -- an image that appears in the web document.

image map -- an image with defined areas that act like links.

JAVA -- a programming language designed by Sun Computer Corp. and adopted by many web browser to increase the graphic animation and interaction with the user.

Javascript -- A scripting language that was developed by Netscape to increase the interaction between the user and the HTML.

Plugins -- programs designed to extend the capability of the browser or Composer.

WYSIWYG --What You See Is What You Get (WYSIWYG) editors are as the acronym states what the user sees on the screen of the editor for instance, MS Word, is what you get as the final output from the display or printer.

Related Tutorials:

Tables -- a tutorial by, Desk Top Publishing, of Australia: http://www.dtp-aus.com/tables.htm During the next several labs we will frequently recommend tutorials for the reader to compare approaches. Those by Desk Top Publishing (DTP) provide insight into web design, many helpful examples, tips, and useful tools.

FAQ's:

Other References:

Netscape's Manuals Library

Dynamic HTML in Netscape's Communicator


 
 


©P.D. Krolak & M.S. Krolak 2000-3 All Rights Reserved

Email