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:
To learn the Netscape web editor, Composer, an editor that makes
creating web pages only slightly more difficult than creating word processing
documents.
To learn how to design tables and to use the table tags to create
attractive two dimensional layouts.
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:
Animated gifs
Backgrounds
Audio and Sound
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:
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:
select the appropriate button in the composition toolbar,
answer the questions in the resulting dialog box and fill in the
appropriate text boxes, and
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.
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.
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.
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:
the ads,
the navigational aids for moving through the web site,
the forms and other interactive devices to assist the viewer in
getting information, entertaining the eye (so called eye candy), and getting
more information about who the viewer is and what are the concept and products
of interest, and finally
the text and images that form the information that the viewer originally
went to the site for.
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.
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:
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.
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.
Step 1: Set up the Head tags
Open the Composer to a New blank page.
Click [Format]
Select [Format]/Page Colors and Background ..
Chose a set of colors for text and background color or background image.
Select [Format]/Tile and Properties ...
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
Use the Alignment button to select Centered and the Style
selector -- H1 heading. Entitle the page YOUR_Name's
Resource page.
Table Of Content is a H2 heading, After it is created highlight
it and use the Target Operator to Name it TOC.
Create an Unordered List with four items:
Animated gifs
Backgrounds
Audio and Sound
Video and Movies
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:
4 rows 3 columns
Check caption and select top
Border 0 or use 10 for a 3-d picture frame
set both cell parameters to 2
use 80% width and Center alignment
Select color and click button chose a light pastel
Click apply and close
Move mouse to the top row label the cells (Link to Source, Comments,
Sample)
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
Highlight the first content section. Start at the Header and
go past the horizontal line and Copy It (Ctrl C). Now Paste (Ctrl-V) 3 copies
of the section.
Correctly name the section headings. After it is created highlight
it and use the Target operator to name it similar to the section's heading.
Link the List items in the Table Of Contents (TOC) to the appropriate
heading (section).
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
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 .
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:
The First Choice -- Pl the Right Mouse
Button over the Link chose SaveAs to the A:/ drive. Generally this course
of action is not recommended as the files may be HUGE.
The Second Choice -- Again using the
Right Mouse Button over the link select Copy Link. This copies the URL to
the Clipboard.
Select the Table cell in editor then click on the
Link Button.
Fill in the text field with the appropriate description
of the file.
To fill in the URL:
If the file is saved on the A:/ drive use the
Choose File button to find the file on the disk, open it , Apply and Close.
If the second choice was taken then paste
the URL into the link field.
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.
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:
Use Ws_ftp, or some similar ftp tool, to
transfer your files to your web site:
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.
Use the Composer
[Publish] button:
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.