If you do not have Netscape Communicator on your system you may download it from the Netscape web site listed below. NOTE: If you download the software be sure that you download Communicator and not just Navigator (which is available as a stand alone application).

http://www.netscape.com/download

To edit your portfolio files using Composer, you must open them directly into Composer. To do this:

On a PC

1. Open Netscape.
2. Go to the File menu and choose Open Page....
3. An Open Page dialog box will appear on your screen.
4. Click on Choose File... to browse your local machine.
5. Once you find the file that you want to open, click on it with your mouse so that it becomes highlighted. Now press the Open button in the box. It will now return you to the Open Page dialogue box. Your selected file should be listed in the location line.
6. Before clicking Open in the Open Page dialog box, make sure that the button next to Composer is selected. If it is not selected your file will only be opened in Navigator and it can only be viewed NOT edited from the Navigator program.

On a Macintosh

1. Open Netscape.
2. From the File menu, choose Open, and then choose Page in Composer.
   
3. Select the file you want to edit and Click Open.

Once your portfolio is open in Composer, you have many of the same option as you do in Dreamweaver.

Formating text with the Formating Toolbar

r

1. Paragraph Style - Place the insertion point in the paragraph you want to set the style for. Select an item from the drop down menu, such as Normal, Heading 1, 2, 3, 4, 5 or 6, Address, Formatted, List item, Desc. Title and Text. Heading 1 is the largest heading.
1a. Font - Drop down menu provides a list of fonts to apply to selected text. Due to the
variety of fonts installed on computers, stay with the basic Variable Width and Fixed
Width
2. Font Size - Drop down menu provides font sizes to apply to selected text.
3. Font Color - Drop down menu provides color to apply to selected text. Be careful when you choose colors because colors differ from monitor to monitor. Also, some people with disabilities cannot see certain colors. Since links change color when you visit them, you need to be careful what color you choose for text.
4. Bold - Applies boldface to selected text or toggle on, type and then toggle off (Ctrl+B).
5. Italic - Italicizes selected text or toggle on, type text and then toggle off (Ctrl+I).
6. Underline - Underlines the selected text. Be careful using underlining, because underlining signals a link on a web page. You could confuse your reader.
7. Remove All Styles - Clears bold, italics or underlining from selected text.
8. Bullet List - Apply a bullet to the beginning of a paragraph. Place the insertion point in the paragraph. Click the Bullet List icon to toggle bullets on/off for the paragraph.
9. Numbered List - Apply a number at the beginning of a paragraph. Place the insertion point in the paragraph. Click the Numbered List icon to toggle numbers on/off for the paragraph.
10. Decrease Indent - Reduces the indentation of a paragraph. For Bulleted Lists: The
level of the bullets increases.
11. Increase Indent - Indent a paragraph. For Bulleted List: The level of the bullets decreases.
12. Alignment - Apply left, center or right alignment to a paragraph.

Adding and Modifying Text

There are two options for adding text to your web page:

1. You may enter the text directly into Composer as you would in a word processor OR
2. The text may be imported from other files such as word processor documents, other web pages, text files, etc. Many word processing and other programs now allow you to directly save their files as HTML. Doing so will allow you to retain more formatting (this will be discussed below).

Importing Text

Importing text works the same as if you were copying text from one word processing file and pasting it into another file.

1. Open the document containing the text in the program you would normally use (such as Word Perfect, Microsoft Word, or another word processing programs).
2. Use your mouse to highlight the text you want to use on the web page.
3. Use the Copy command under the Edit menu or Control-C to copy the text to the clipboard (in Windows)
4. Now go back to your document in Composer and paste the text by using Control-V or the Paste command under the Edit menu.
   NOTE: Not all formatting gets copied (such as paragraph breaks, block quotes, bold, underline, etc.)!
   

Creating Links

Links are highlighted text in a web page that "jump" users to another location when they click on it.
There are 4 types of links:

1. Links to web pages within your site (you would use this type of link to add a page to your portfolio.)
2. Links to other web sites
3. Links to e-mail addresses
4. Links to points within a page (targets)

All 4 types of links are created the same way. Go to the Insert menu and choose to Link. You should now see the following link properties box:

1. Link Source - This is the blue, underlined text that will appear on your web page. When someone clicks on this phrase, they will be taken to the site or open the file that is designated in the Link To section. Type the text that you want to be a link in this field.
2. Link To - This is the actual file, web page, or web site that will load when the user
   clicks on the phrase entered in the Link Source section.
   

   Linking to a page within your website
   All you need to do is enter the page name. For example, if you want to link to a page that you create with your resume, type resume.html.

   Linking to an external page
   External refers to anything not in the directory or any sub directory that your web page is in. For example, to link back to the UNK homepage you will need to enter the entire URL (address) such as http://www.unk.edu. Note: That you are required to enter http://.

   Linking to an email address
   This works the same as entering a link to a page in the same directory. The Link Source can be anything including your e-mail address or any word or phrase such as "e-mail" or "Click here to contact me". However, it is best to actually type out your entire address. For security reasons, many public computer labs are set up so that links to e-mails will not work. In these situations, unless your address is typed out someone may not be able to contact you.

   • The Link To box should contain the phrase mailto: followed by your e-mail address.

   • The Link To entry for a link to e-mail me would look like this: mailto:wagonerbj@unk.edu.

   • It is important to remember that there are no spaces between mailto: and the address.

3. Targets - Targets allow you to link to various sections within one web page. To use them they must first be created. A listing of targets that you have made in your page will be shown in the indicated box. You may select the target you wish to link to and it will appear in the Link To box. You may also manually enter these by typing the pound sign ( # ) and the target name after the web page address.

Go to the Insert menu and choose Image....The following image properties box will appear:

This is similar to the Link To command used when creating links. If the graphics are in the same directory as the web page simply enter the graphic name (such as picture.gif). For a site with many graphics a sub directory called graphics or images is often used. In that case you will only need to specify the directory and the file name (such as images/picture.gif). While you may use an image by inserting its address IMPORTANT!!! Make sure the box next to "Leave image at the original location" is checked. If this is not selected Netscape will probably adjust the address in this line resulting in the image not loading once the page is on the server.

NOTE: If you use Choose File... to select an image, the file name it puts in the image location box will probably not work once the page is moved onto the server. For example, when I inserted the graphics on theses pages using Choose File, the image location was: file:///C|/My Documents/My Pictures/boston.jpg
That would not work since my computer's hard drive is not connected to the server. Because the graphics are stored in the one sub directory I created in the web directory, I have changed the image location to the following: images/boston.jpg
Using relative links as described above is recommended because it allows the page to load properly both on the server and on your computer when you are working with it. Always double check these image locations to ensure that the proper file location is entered!

Image Alignment with Text
This adjusts the behavior of text around the image. For any of the five buttons on the left, only one line of text may appear next to an image (there is no text wrap). This is used mostly for creating one line titles next to an image.

Text Wrap Around an Image
Selecting one of these two options allows text to flow around an image. This is used primarily when an image is inserted into the body of a page.

NOTE: You cannot see the text wrap in Composer ! When working in composer it may appear as though the text wrap command did not work since it is not visible. Save your file and view it in the regular browser and the text wrap should now be visible.

Image Dimensions
You do not need to use this option unless you want to make an image appear a different size than it actually is. By leaving the values set at 0 Netscape will automatically adjust them to the correct image size after you press the Okay button. However, it is never recommended to let Composer resize your image. It dos not reduce the file size but only rescales the image on the screen. A person viewing your site will still have to load the entire larger image but will see it in a reduced size. Use a graphics software program to reduce the image to the appropriate size before placing it in your web page.

Space Around Images
These options are primarily used when text wrap has been selected. It allows you to define how much space will exist between images and text or other objects on the web page.

Image Border
You may specify the width of a solid line box that will be drawn around the image. The line color will be the same color as your text color unless the image has been set up as a link (see below for details on how to do this).

Using an Image as a Link
Select the Link tab at the top of the image properties box to make the image into a link. The options for creating a link are exactly the same as described in the Link section above.

NOTE: If you do not define an image border the image will not have the traditional blue or purple outline that defines most links. To make the image stand out as a link add a 1 pixel or greater image border.

Modifying Existing Images

Once an image has been inserted in a web page its properties can still be modified.
To modify the properties of an existing image click on the image to select it and then go to the Format menu and down to Image Properties.

You may also get to the same properties box by selecting the image and then clicking on the same image icon button in the tool bar used to insert a new image. The properties box that appears will not be blank as with a new image, but will contain all of the formatting details for the image selected.

Publishing the Changes to Your Portfolio on the Web

It is recommended that you bring the changes that you have made to your portfolio files in Netscape Composer to the COE lab and follow the instructions in Step 6 to put them on the web. However, if you are interested, it is possible to use a program called WS_FTP to do this step using your PC. Instructions for doing this are available in the following pdf file: