Netscape Composer Instructional Design Center
How to Use Netscape Composer-Table of Contents
FIRST THINGS FIRST ..............................................................................................................................2
FOLDERS .............................................................................................................................2
1. Create a New Folder ..................................................................................................................2
2. Rename a Folder or File............................................................................................................2
3. Make a Copy of a Folder ...........................................................................................................3
GETTING STARTED ...................................................................................................................................3
CREATING A NEW PAGE ........................................................................................................4
1. Create a Blank Page ...................................................................................................................4
2. Copy Someone Else’s Page and Use it as a Template ....................................................4
3. Copy Parts of Someone Else’s Page .....................................................................................5
4. Open an Existing Web Page File ............................................................................................6
CHANGING THE PAGE TITLE AND AUTHOR ................................................................................6
CHANGING THE COLORS OF YOUR PAGE...................................................................................7
SAVING YOUR PAGE ..............................................................................................................8
GRAPHICS ...................................................................................................................................................8
INSERTING A GRAPHIC ..........................................................................................................8
ALT TAGS ............................................................................................................................9
ADDING A HORIZONTAL LINE .................................................................................................9
TABLES........................................................................................................................................................ 10
FORMATTING TABLES FOR PICTURES ..................................................................................... 10
1. Inserting the Table .................................................................................................................. 10
2. Changing the Percentage of the Table Cells ................................................................... 11
LINKS .......................................................................................................................................................... 12
INSERTING LINKS ............................................................................................................... 12
1. Links to Your Pages ................................................................................................................. 12
2. Links to Existing Web Sites .................................................................................................. 13
3. Mail to Links ............................................................................................................................... 13
OPEN YOUR SAVED WEB PAGE .......................................................................................................... 14
SAVING A WORD DOCUMENT AS A WEB PAGE ............................................................................ 14
SAVING A WORD DOCUMENT IN HTML ................................................................................ 14
OPENING THE PAGE IN COMPOSER ........................................................................................ 16
Dec-11 1
Netscape Composer Instructional Design Center
First Things First
The most important step to building a web page happens before you even begin
to build your first page. Start with creating a folder, in which you’ll save your
web page. It’s imperative that this is done, and that all of the pages and images
in your site are saved in this same folder. This way when you link pages and
insert images, all the links will work wherever the folder is located.
IMPORTANT: To create a portfolio that will run on both Macs and PCs and a variety of
web servers:
1. ALL File names must be 8 characters or less, lower-case letters, and include no
spaces. Ex. “index” or “philos”
2. When Burning a copy of your portfolio to CD use a CD-R, NOT a CD-RW.
Macintosh user cannot access a CD-RW.
NOTE: CD-R= Compact Disc Recordable CD-RW= Compact Disc Re-Writable
Folders
1. Create a New Folder
1. Double click on My Computer.
2. Double click on the drive you plan to save your work in. (ex. A: Drive)
3. Click once on the right mouse button. A menu box will appear.
4. Move your cursor to highlight the word New. Another menu box will
appear.
5. Choose Folder.
6. Your new folder will then appear. Name it as you wish.
7. Push Enter on your keyboard.
2. Rename a Folder or File
1. Double click on My Computer.
2. Double click on the drive containing the file or folder.
3. Click once on the folder or file you wish to rename.
The folder or file selected should now be highlighted
Dec-11 2
Netscape Composer Instructional Design Center
4. Click on the File menu.
5. Select Rename.
6. Use the keyboard to type a new name for the folder or file.
7. Push Enter on your keyboard.
3. Make a Copy of a Folder
1. Double click on My Computer.
2. Double click on the drive containing the folder you wish to copy.
3. Click once on the folder you wish to copy.
The folder selected should now be highlighted.
4. Click on the Edit menu.
5. Select Copy.
6. Select the drive that you would like to paste the copied folder into. (if
different from the drive that the folder is currently in)
7. Click anywhere in the white area of the drive’s contents in My Computer
Nothing should be highlighted blue now.
8. Click on the Edit menu.
9. Select Paste.
Getting Started
Open Netscape Composer by clicking on the Start button in the lower left hand
corner of the screen. Move your cursor to Programs, followed by Netscape
Communicator. From there select Netscape Composer.
Dec-11 3
Netscape Composer Instructional Design Center
Creating A New Page
There are a number of different ways to begin creating a new page. Once
Netscape Composer is open a new blank page may automatically appear. If a
new blank page does not appear follow Step 1 below.
1. Create a Blank Page
a. Click on the New button in the upper left corner of the
composition toolbar.
A menu box will appear, select Blank Page.
OR
b. Click on the File menu, then New. Select Blank Page.
2. Copy Someone Else’s Page and Use it as a Template
a. Find the page you wish to copy in Netscape Navigator.
b. Click on the File menu.
c. Select Edit Page, this will open the page in Netscape
Composer.
d. Modify the page.
e. Click on the File menu.
f. Select Save As.
g. Enter a file name for the page and save your new page in the
folder that you created.
Dec-11 4
Netscape Composer Instructional Design Center
3. Copy Parts of Someone Else’s Page
a. Open the page in Netscape Navigator.
b. Right click on the background or image that you would like to
copy a menu box will appear, select Save Background As or
Save Image As.
c. Save the file in your folder.
d. To use the background on your page:
1. Open your page, and right click on it.
2. A menu box will appear select Page Properties.
3. Click on the Colors and Background tab.
4. Check the Use image box, and locate the file in your
folder.
e. To use the image on your page:
1. Open your page.
2. Click on the Insert menu.
3. Select Image.
4. The Image Properties dialogue box will appear.
5. Click on the Choose File button.
6. Locate and select the file that you would like to
insert, click Open.
7. The file name will appear in the Image Location
box, click OK.
Dec-11 5
Netscape Composer Instructional Design Center
4. Open an Existing Web Page File
a. Click on the open button on the composition toolbar.
b. Double Click on the file that you wish to open in the dialogue
box that appears.
Or
c. Click on the File menu.
d. Select Open Page.
e. Select the Choose File button from the Open Page dialogue
box.
f. Double Click on the file that you wish to open.
g. Make sure that the composer button is selected and select
Open on the Open Page dialogue box.
Changing the Page Title and Author
By changing the page title and author you are helping the viewer to locate
your page on the Web.
1. Click on the Format
menu, select Page
Colors and
Properties. A new
menu box will
appear.
Dec-11 6
Netscape Composer Instructional Design Center
2. Click on the
General tab.
3. Edit the information
in page title and
author.
4. Click OK.
Changing the Colors of Your Page
1. Click on the Format menu, select Page Colors and Properties. A new
menu box will appear.
2. Click on the tab named Colors and Background.
3. Click on the colored boxes to select the colors for the pages’ background
and text.
4. Click OK.
Dec-11 7
Netscape Composer Instructional Design Center
Saving Your Page
When saving your web page make sure that you save it in the folder that you
created specifically for your website. All pages, graphics, and files that will be
linked to your site, must be saved in the same folder.
1. Click on the File menu and select Save As.
2. Select the drive where you placed your folder for the web page by
selecting the down arrow located next to the Save in box.
3. Double click on the folder.
4. Enter the name of your web page in the File name box.
Graphics
Inserting a Graphic
1. Place the cursor where you want the picture.
2. Click on the Image button located on the composition toolbar.
3. Click on Choose File.
Dec-11 8
Netscape Composer Instructional Design Center
4. Find the file on your computer. In most cases it will be on your disk.
If the filename contains a space (i.e. my dog.jpg) you will have to
rename the file (i.e. mydog.jpg). Keep all of your filenames as short
as possible. Filenames should have NO SPACES.
5. Click Open.
6. Click OK.
Alt Tags
Some people who browse the web choose to browse it without pictures. A
courteous designer will put alternate text behind the image. The alternate text
is a description of what the person is missing by not seeing the picture. For
instance, the alt tag for the picture of the Instructional Design Center (IDC) logo
is “Logo for the IDC”. If the logo doesn’t appear because of slow download
times or other reasons, the text will tell the person that the image is just the IDC
logo (not important to the content of the page), and they will continue browsing.
Alt Tags should also be used for viewers who may have low-vision and use
readers that read the characters on a page but cannot interpret the graphics.
1. Click on the image to select it.
2. In the image properties dialogue box, click on Alt.Text/LowRes.
3. Type in the alternate text.
4. Click OK.
Adding a Horizontal Line
A horizontal line helps to set off sections of your page.
1. Place the cursor where you want the line to be.
Dec-11 9
Netscape Composer Instructional Design Center
2. Click on the Horizontal Line button on the composition toolbar.
Tables
Tables allow you to present information in a neat tabular format. You can also
use tables to create interesting page layouts and arrange text and graphics.
When your page is viewed in different web browsers tables can help prevent
your graphics and/or text from appearing differently.
Formatting Tables for Pictures
1. Inserting the Table
1. Place cursor where you want the table to start.
2. Click on the Table button on the composition toolbar.
3. Uncheck the box next to Border line width. We are
inserting a table without the border (we don't want a table to
show on the internet, we are just using the table for formatting
purposes.)
4. Click OK.
Dec-11 10
Netscape Composer Instructional Design Center
2. Changing the Percentage of the Table Cells
We want to format the table so that text can be placed next to the graphic. In
order to do this we have to make one side of the table smaller than the other.
Tables in Composer are measured in %. We have to make one cell 10% of the
entire table and the other side will compensate automatically, leaving one side
wider for our text.
1. Place the cursor in the
left cell of the table
2. Click on the Format
menu, select Table
Properties. The Table
Properties menu box
will then appear.
3. Click on the Cell Tab.
4. Change the cell width to 10%.
5. Click OK.
Dec-11 11
Netscape Composer Instructional Design Center
6. Select and drag your existing graphic or insert a new graphic
into the cell on the left. The cell will expand to the size of the
graphic.
7. Type the text in the right cell and align it.
Links
Inserting links
1. Links to Your Pages
1. Highlight the text that you want to be linked to another page or
file.
2. Click on the Link button located on the composition toolbar.
3. Click on Choose File.
4. Double Click on the file that you would like to link to.
5. Click OK.
Dec-11 12
Netscape Composer Instructional Design Center
2. Links to Existing Web Sites
1. Highlight the text that you want to be the link.
2. Click on the Link button .
3. In the link location bar type in the address of the link.
4. Click OK.
3. Mail to Links
A mailto link executes a mail program when the user clicks on a link. These
links usually show an email address or contact information.
1. Highlight the email address or text that you want to execute the email
program.
2. Click on the Link button located on the composition toolbar. .
3. In the link location bar, type in mailto:username@grove.iup.edu
(where username is use your own IUP user name) or other email
address.
4. Click OK.
Dec-11 13
Netscape Composer Instructional Design Center
Open Your Saved Web Page
Once you have finished designing and saving your web page it is a good idea to
open it in Netscape Navigator to see how it will look if it is posted on the
Internet.
1. In Netscape Composer, click on the open button on the composition
toolbar.
2. A dialogue box will appear, browse to find the folder that contains your
web page files. Double click on your web page.
Or
3. Click on the File menu.
4. Select Open Page.
5. Select the Choose File button from the Open Page dialogue box.
6. A dialogue box will appear, browse to find the folder that contains your
web page files. Double click on your web page. Make sure that the
navigator button is selected and select Open on the Open Page dialogue
box.
Saving a Word Document as a Web Page
Saving a Word Document in HTML
In Microsoft Word 2000 a default is set to save a word document not as a single
page, but as a page and a whole folder of files that the page points to. This is
awkward when you are working with an HTML editor that saves web pages as
single files. The following steps show you how to save a word document as a
web page and change the default options.
1. Open the Microsoft Word document.
2. Click on the File menu, select Save as Web Page. A menu box will
appear.
Dec-11 14
Netscape Composer Instructional Design Center
3. Click on the word Tools. From the menu that appears, select Web
Options. A new menu box will appear.
4. Under the General tab, disable any functions not supported by
Internet Explorer 4.0 or Netscape Navigator 4.0 by using the down
arrow to select them.
5. Uncheck the CSS box.
6. Under the File tab, uncheck the box before Organize supporting files
in a folder.
7. Click OK.
8. Click Save.
Dec-11 15
Netscape Composer Instructional Design Center
Once you have saved your word document in HTML it is a good idea to do the
final editing of the word document in Composer because it seems to be more
accurate in terms of “what you see is what you get”. In order to do this, follow
the steps under the section titled: Opening the Page in Composer.
Opening the Page in Composer
1. Switch back to Netscape Composer by clicking on the icon on the
taskbar.
2. Click on the File menu and select Open Page the Open Page dialogue
box will appear.
3. Click on Choose File.
Dec-11 16
Netscape Composer Instructional Design Center
4. Select the drive that your word document is in.
5. Double-Click on the word document to open it.
6. Click on Open on the Open Page dialogue box.
7. Make final changes to the document and save it.
Dec-11 17