Using Netscape
Composer for Web Development
Congratulations! Now you have decided to take the lead
and develop your own web page. Netscape Composer is a quick and
easy way to learn and master the basics in "What You See Is What You
Get" (or WYSIWIG) software for web design!
This tutorial makes certain assumptions: 1) that you can use
and are fairly comfortable with a word processor, 2) that you can
create new folders, 3) that you are comfortable with drag and drop to
move files on your computer, and 4) that you can use save and save as
functions
|
|
Netscape Composer is a component of the Netscape
Communicator program, version 4.x and higher. Composer is
easy to use and allows new users to create simple web pages
without learning any HTML codes. If you do not have
Netscape Communicator, version 4.x or higher, you can
download it from the Netscape
home page. Most computers will work best with Communicator 4.77. If you
have a very new and fast computer, consider Communicator 6.x for some
additional features
|
Getting Started
When you develop web pages, you will want to stay well
organized. It is very easy for your page to grow well beyond
your expectations. Listed below are hints on how to stay
organized and protect yourself from future headaches!
Getting Started and Staying Organized:
Keep all your files in one folder! Create a directory
or folder called "www" on your disk. This is where you will
place your HTML files (web pages). Images:
Inside that "www" folder, create another folder called
"images". Put all image files in this folder before you insert
them into your page (see Images). You
must keep your files organized so you can easily upload them to you
internet host site.
Starting a web page with Netscape Composer
1.) Easiest way is to start Composer by opening Netscape
Communicator. From the menu bar click on Communicator, slide
down and select Composer. This will start the program and open
to a blank page.
Create New Pages:
Option A: Goto File/New menu. Select Blank
Page. A new blank page will open up and you are ready to
roll!
Option B and C: Other options under File/New
menu
- Page from Template opens any text
document to use as the basis of the page. Click the
Netscape Templates button to look at samples at the Netscape
site.
- Page from Wizard connects to the
Netscape home page and provides a fill in form that walks
through creating a page.
OR
Open Pages in Progress:
1. Start the Composer Program (see #1 above).
2. Use File/Open Page in Composer to re-open a page you wish
to continue working on it from your disk.
3. Choose File/Save As to locate where you are saving the
work. (disk) Continue to Save.
back to
top
Saving Files and Images
At first the directions for saving files and images will sound
very complex. You will really get the hang of it after only 2
or 3 times. There are not as many steps as it feels like. Remember, save all files and pages into the www folder and images
into the images folder within the www folder.
Saving into the "www" folder on your disk
Choose Save As from the File menu. Your lead document, the page
that will link to all the other web pages, should be named
index.html Web page names should be lower case, no
symbols or spaces and 8 characters or less.
Any linked documents, or other pages you create later can be named
anything with a .html extension. For example, lesson.html
index.html is customary for the lead page.
* Remember: file names should by lower case, no symbols or
spaces and 8 characters or less!
Save often and frequently to avoid losing work. Look at
where you are saving your work.
Is it always on your disk in your www directory? If not you will have
multiple copies
of your page and lose work you do. Images should be saved in
the "images" folder that is within your www folder.
back to
top
Page Titles and Properties
When you visit a site on the Internet, you can see the title of
that site on the top bar of your browser. For example, look at
this page. The title should appear as Using Netscape
Composer. You will need to add information to change the title
on your page to what you want it to read. You can also add your
name as author and a brief description.
Setting up Titles and Page Properties (color, link and text
color)
Select Format > Page Properties
Type in a Title of your page in the general setting.
In the color settings, select and image file to tile as a
background or click on the boxes next to background color, text
color, link colors to select colors for each.
back to
top
Adding and Formatting Text
Text Formatting Toolbar
Adding Text to the Page
Option A: Just Type...: Click your cursor in the Netscape
composer window and begin typing the text of your page. Adding text
is very similar to using a word processor. VERY IMPORTANT: HTML
code hates blank spaces. You can add one or two spaces between
words, but no more. Use alignment and
tables to arrange pictures and text across your
web pages.
OR
Option B: Copy and Paste:
- Open an existing text or word processing document.
- Highlight the text you would like to put in your web
page.
- Select Edit/Copy in the word processing or text editor.
- Click the Netscape Composer window to make it active
- Click the cursor where you want to place the text.
- Select Edit/Paste in the Netscape composer menu. Begin
Formatting text as described below.
Quit the word processing or text editor program.
Headings, Fonts, Font Size and Color
1.) Roll your cursor over each item in the format tool bar that
appears at the top of the Netscape composer window. Pause a
moment until the description appears of what it does.
2.) Selecting text and clicking these buttons will apply each
characteristic.
|
Colored
Text and Font Size Example
|
Paragraph styles allow you to choose heading sizes as you
can see in the example.
Heading 1 or Heading 2 are used as the opening
heading.
Heading 3 or 4 is usually used for
sub-headings.
Normal will appear as whatever Font and Size you
choose.
Font color can be changed by selecting text and picking a
color from the palette that appears. The current selection
is black.
List Items appear
as bulletted items.
|
Text Formatting, Lists, Indenting and Alignment
Highlight text on your web page and select the following buttons
for the given effect.
|
|
Bold text
|
|
|
Italic text
|
|
|
Underlined text
|
|
|
No style: Use to remove an unwanted style or link.
|
|
|
- Bulletted list Item 1
- Bulletted list Item 2
|
|
|
- Numbered list Item 1
- Numbered list Item 2
|
Indent examples
Decrease Indent of a line
or paragraph
- Increase Indent of a line
or paragraph
Alignment Examples
Choose
any of the three: left, center or right for the following effect.
Left aligned text
Center Aligned text
Right aligned text
Composition Toolbar
Moving Text Around the Page: Cut, Copy, Paste
If you wish to move text on your Composer page to another area of
your page, you can select the text and click the Copy or
Cut button. Click your cursor to the spot you wish to relocate
the item and you can click the Paste button
Spell Checking and Find
Spelling can be checked through Composer. Click Spelling and the
open page will be checked for spelling. Ignore or Replace based on
your knowledge. The dictionary will not know proper names. However,
it does recognize many Internet terms that word processors do not
recognize.
Find will allow you to find text on the open page.
back to
top
Links and Mailto Commands
External links: To add connections to other web pages,
Type the text that you want to be clickable (hot button), such as
Yahoo . Then highlight the word. Click on the "Link"
button 
from the Composition tool bar and type the URL (web address) to
connect to: such as http://www.yahoo.com in the link dialog
box (where it says link to:).
Local Documents: For example, if you want to add a separate
web page that list the objectives for your lesson. In
the link dialog box: type the text you want to be clickable (hot
button), such as the word objective, if you are linking to
your objective.html document. Then highlight the word.
click on the "Link" button from
the composition tool bar and type the file name you want to link
to, in this case objective.html, in the link dialog
box.
Hint: For hot buttons, DO NOT Type: Click here to go to my
lessons objectives (too long)
Be sure to put your local documents such as objective.html in your
www folder before you add them to your web page.
Mailto:
At the bottom of your page you can add a clickable mailto address to
allow
people on the web to write to you.
Click the Link button: and put your name and email address in the
text to click
In the location type: mailto:youremailaddress
For example: My email link, Philip Held, would look like this in the "link to" portion of the link
dialogue box:
mailto:pheld@pgcps.org
back to
top
Images
At first adding images is a little complex, but it gets a lot
easier. Copy the images into your images
folder before inserting them into your web page.
Adding Image Links to the page.
Images that appear in a web page are links to an image
file. If you move the image to a different directory or folder it
will no longer appear in the web page. You have broken the link.
Avoid future Image problems!!!
Place all images into your images folder before you insert them into
your web page!!
You can copy and paste images onto the screen or click the image
button and browse to the image
folder in and select your image in .GIF or .JPG image format.
Remember to check the "Leave Image in Original Location" box. The
original location being your images folder!
Click OK to place the image. Remember even if you cut and paste
and image onto
the screen, in reality it is still a separate file in your images
folder that is linked to the page.
To begin keep it simple. Insert one or two
images. Practice. Then you can move into some advanced
features such as changing the image size.
Image size problems can become a problem when you begin inserting and
editing. Composer may resize your images incorrectly. To fix
this, double click on the image to bring up the Image Dialog. Click
the Original Size button in the Dimension section to fix this.
Change Page
Removing an Image
To remove an image, simply select the image by clicking once on it,
then press delete. You may or may not want to delete the image
from your images folder depending on if you might use it again.
back to
top
Horizontal Lines
Horizontal lines are quick and easy ways to break up a relatively
long web page. For example, look how it is used in this page to
identify different sections.
To insert: place the curser where you want the horizontal line, and
click on the horizontal line button 
on the composition toolbar. Double click on the line to change
it's dimensions and features.
back to
top
Tables
Tables can be very useful in designing a web page. In each cell
you can type text, place links or images, or both.
Click the table button to create a table. You will get the
table properties dialogue box.
|
|
Here is where you can direct the number of rows and
columns.
The Border line width determines how wide the lines will
be. If you don't want to see the lines, de-select this
option.
You can pre-select the alignment of the table, or you can
change it later as you would change text alignment.
Equal column widths will automatically make all the
columns equal. If you want to change the size for the
columns, de-select this option.
Table background will add color or an image to the
table. Click on the color box to select the solid
color background you want or check the image box and choose
a background file from your images folder.
Apply will insert the table into your page without
closing the properties box. This is an easy way to
determine if the table looks the way you intended without additional steps to change the table.
|
You will want to practice these commands to see exactaly what
each will do. Don't worry, if you make a mistake you can easily
change it!
Changes to tables
You may need to make changes to your table, such as adding or
deleting rows and columns.
Steps:
1. Select the table by clicking once on it.
2. On the menu bar, click on Edit slide down to
- Select the Table: if you wish to cut, copy, or paste
- Delete Table: if you wish to delete a cell, row, column or
the entire table
* If you go to Edit and the choices for Select the Table and
Delete Table are grayed out, the table was not selected. go
back to step 1. above.
back to
top
Previewing and Publishing
Preview
Preview will open a view of what your page will look like if it
where on the Internet. It will look very similar to the composer
window. Save your work. Click on the preview
button 
from the toolbar.
Publish Options
To publish your page, you can use the publish
button 
and try to move files through Netscape. This will work for
publishing. You will need the URL of the host site, your user name,
and password. However, Composer does not let you see a list of
files that you have already put in your account. For this reason, to
manage your account over time, you may want to switch editors or use a FTP program for PC or Fetch for Macintosh, to get a better idea of
what is in your account.
back to
top
Questions contact Philip Held.
Updated from a page created by Marion French.
Last Updated 7/14/01
