Web Page Construction
Using Netscape's Composer 7.x

• We begin with the basics necessary to create a page with text and a few simple features, such as text formatting, hyperlinks, and horizontal lines.
• We then go on to slightly more complex features, such as images, bulleted lists, and tables.
• We then show you how to publish your page to your web account so the world can see it.

Preliminaries: Getting the Software

If you have the WNCC Training CD, you already have a copy of Netscape and can install the program directly from it. This saves you buku time compared to downloading the complete package,

1. Put it into your CD-ROM, and when it starts, click the"Netscape 7.2" graphic.
2. Follow the instructions to install the program. Accept all defaults (click "Yes" when asked).

Step One: Opening the Program

Open Netscape. Your set-up program probably put a short-cut icon on your Windows desktop. Double-click it and Netscape will open. (If you can't find a short-cut icon, look for Netscape on your Start/Programs menu.) You can use Composer off-line. If you are working on your own computer, you do not need to log in to your Internet Service Provider (ISP) while you are authoring a page, however it won't hurt if you're online.

Netscape will want to set up a user profile the first time you use it. You will see a dialogue box in the first screen.

• Set up the profile following the questions it asks.
• In the future, click on that profile when you start the program. If there is only one profile defined, Netscape will automatically use that profile and won't bug you again.
• Click "Start Netscape."

To open Composer:

• Go to the "Windows" pull-down menu at the top.
• Click "Composer."

Alternatively, you can also open Composer this way:

• Look for a group of small symbols in the lower-left corner of the regular window.
• It should list the programs available to you with a symbol for each (Navigator/browser, Composer, Mail and Newsgroups, Instant Messenger, Address bookl). When you hold your mouse over the symbol for a moment, you should see words telling you what each symbol stands for.
• Click on the button that says Composer.

Step Two: Starting your web page

First, you need to start a new page, just as you would in word-processing.

• Click "New" on the button bar on the top OR go to the "file" pull-down menu and choose "new."

Step Three: Giving your page a title and description

Give your page certain identifying characteristics.

• Go the "format" pull-down menu and choose "page title and properties."
• Title: In the space called "title," give a short name to your page. This is what people will see across the very top of the Web browser when they look at your page, so keep it short and simple. The title for this page is: "Web Page Construction Using Composer" -- it's what you see at the top of your screen or the top of your print-out of this site. The title of your page will be different. (It is not the filename you'll use later to save your page.)
• Author: In the space called "author," type in your name.
• Description: In the space called "description," you can put a brief description. This will show up in some search engines if they find your page in a web search someday. You can leave it blank if you prefer.

To close this Dialogue box, click "OK."

Step Four: Choosing colors for the background and text

Choose a basic set of colors for background and text. You can go back and change these later if you change your mind.

• Go to the "format" pull-down menu and choose "page colors and properties."
• If you do nothing, your page will be set with "default" colors you see on the right: probably a gray or white background, with black lettering, blue active links, and red visited links.
• To change any of the colors, click "custom colors." Then click on the color rectangle to the left of the item you wish to change. You will get a color palette. Click on the color you want. You will then see it displayed on the right.
• When you are happy with your color scheme, click "OK" and the dialogue box will close.

CAUTION: Another color problem is using white type on a dark background. It looks great on the screen. But if somebody wants to print out your page for reference, it won't print. Why? Because backgrounds don't print out and all that's left is white type -- which won't show when printed.

CAUTION: If you believe the news reports, a least a trillion new people starting using the Web every six minutes. It is safe to say, though, that many people looking at your page will be novices. It is recommended that you stick with familiar color schemes, especially blue for active links and red for visited links, which have become standard, to make your page user-friendly.

Step Five: Entering and formatting text

You are now ready to enter text, just as you would on a word-processing page. Type a few lines. See how it's just like using a word processor? Who said you had to learn a bucket of new skills to create a Web page?

Use your mouse to highlight text you want to format. Then:

• Text size: To change the size of the highlighted text, lick -a or +a on the lower button bar to increase or decrease the size of the text.
• Bold type: To put the highlighted text in bold, click the bold B on the lower row of the button bar.
• Italics: To put the highlighted text in italics, click the italicized I on the lower row of the button bar.
• Underlining: To underline the highlighted text, click the U on the lower row of the button bar.
• Alignment: To move the text to flush left or centered, go to the four buttons on the far right of the lower row of the button bar, where you can select the alignment (left, center, right, right-aligned. (If you do nothing, flush left is the default alignment.)
• Fonts: If you go to the format drop-down menu and click "fond", you will see a list of fonts available. You can choose any of the fonts there to change your font style.
• CAUTION: The person looking at your page on the Internet will be able to see those fonts ONLY if they are loaded onto that person's own computer. If you don't have the specified font installed, your browser reverts to the "default font", usually Times New Roman or Courier.
• Macs and PCs often give different names to their fonts, the odds are that other people won't see your page in the fonts you choose. You're always safe if you just stay with the default font ("Times Roman"). One way to get around that is to specify both a Mac font and a PC font for the page. If the browser is on a PC, it will ignore the call for the Mac font and display the PC font. A very common choice is to use "Helvetica, Arial ". The font you're currently viewing is Ariel. Helvetica is the Macintosh equivilent of Arial.
• If you design clever visual effects that depend on an unusual font, they might come out rather strangely on somebody else's screen if they don't happen to have that font installed. One way to get around that is to create an image using the decorative font and display the image on the page instead of text using the decorative font. Since you're displaying an image, not text, you don't care if the user has the decorative font installed or not.

Step Six: Saving Your Page

As you have now entered quite a bit of text and formatting, it would be a good idea to save your page. You are saving a file, just as you would save a word-processing file.

• Click the "save" button on the button bar OR use the File pull-down menu and click "save."
• If you're on your own computer, you might want to set up a special web-documents subdirectory for storing your Web files. You might create a folder named "Faculty Web Site", "My Web Class", etc., and keep the files for each of them in the proper folder.
• Give your file a name. The name should be indicative of what's in it. I'll guarantee you that if you name it something generic like, "file2.html", you won't remember what's in it when you go back to edit it in six months.
• Your filename should be in all lower-case, with no spaces and no punctuation. Why? Because eventually this filename will be loaded onto the Web server -- and some servers do not recognize upper-case, spaces or punctuation in file names. Some older FTP programs (the program you will be using to "load" your file") convert upper-case to lower case during the transfer process. By staying with lower-case right from the beginning, you'll avoid problems down the road in inconsistent file names on the server and in your HTML-coding.
• This filename will eventually be part of your URL (Uniform  Resource Locator: "web-address") that people will use to find  your page, so select it carefully. For your basic "home" page, use index.html (for reasons we'll get to later). As you plan ahead to the types of pages you will want on your site, think of file names that will make sense to you and be easy to organize.

Step Seven: Previewing your page

The page you are working on is similar to the way it will appear when somebody looks at it on the Web, but not exactly. Periodically, you should "preview" your page to see what it will look like when somebody sees it with a web-browser.
 

• Click "browse" on the button bar.
• You will be popped into a browser window and you will see what the page will look like on-line.
• You may be surprised -- features you have entered don't turn out exactly the way you expected, so you will need to go back to the authoring page and try some changes. Line spacing, e.g., is often different.
• To exit the browser/preview window, click the "X" in the upper right and it will put you back into the authoring page.
• If you can't see the "X", click the "maximize" button (two boxes layered on each other). Then click the "X."

Step Eight: Adding horizontal lines

One of the simplest features you can put on your page to add interest is a horizontal line. The width and thickness of these can be varied and they look especially nice on colored backgrounds.

• Go to the "insert" pull-down menu and click "horizontal line."
• Here is what you'll get:

You can change the vertical width, horizontal width, or alignment across the page:

• Hold your mouse button over the line and click the right button.
• You will get a pop-up menu. Click "horizontal line properties."
• You will get a dialogue box. One choice is the width of the line. The default is 100%, but you can shorten it to anything less.
• You can also use this dialogue box to change the height or the thickness of the line, as well as its alignment on the page (left, center, right).

Step Nine: Adding hyperlinks

One of the main features of the World Wide Web is a "hyperlink" which you click to go to another web page. To set this up, you will need the complete URL ("web-address") of the page where you want to send people looking at your page.
 

• First, type the words you will want to have highlighted on your page. For example:

WNCC Home Page
• Highlight those words with your mouse.
• Click "Link" on the button bar OR go to the "insert" pull-down menu and click "link."
• You will get a dialogue box with the highlighted words near the top of the box.
• The cursor will be flashing in the blank line in the middle where you should type in the URL where you want to send people. For our example, type the URL for the WNCC Home Page:

 
http://www.wncc.edu/

CAUTION: Do not type in the underlining yourself with the underline-format button. The "link" dialogue page will put in the blue underlining.

CAUTION: If you keep typing after setting up a link, the new typing might continue to show up in underlined blue, even though you do not want to make this another link. This appears to be a bug in Composer. To get around it, type a few words, then highlight the new text, click "link," make sure everything is blank in the http address space in the middle, click "OK" and the blue should turn off.

Step Ten: Setting up a link to your e-mail address

As a convenience to people who visit your page, you will want to include your e-mail address so people can get in touch with you. It will be even more convenient if you set up a "hyperlink" on your e-mail address: when someone clicks it, they will be popped immediately into a pre-addressed mail screen. Here's how to set that up:

• Type your e-mail address, e.g.: name@wncc.edu
• Highlight the typed e-mail address with your mouse
• Click "link" just as you would for a regular hyperlink
• In the blank where you would type in a URL, type:
mailto:name@wncc.edu
Substitute your own account name for "name."
 
Note that there are no spaces in this.  This is a really common mistake, so here goes again: there are no spaces in this.
 
• Click "OK"

Your e-mail address will now appear as an active link.

Step Eleven: Setting up a named anchor (formerly called bookmark or target)

A named anchor is just like a hyperlink -- but instead of sending people to another Web page, you are sending them to another location on your page. It's a fast way to move people around, e.g., to return to the top or to send them quickly to another location on your page.

First, you need to set up the named anchor -- the place you want to send people to.

• Put your cursor in the location where you want the named anchor -- the place you want to send people to (e.g., the top of the page).
• Go to the pull-down "insert" menu and click "named anchor."
• You will get a small dialogue box asking you to name the anchor. Type in something simple, limited to one word only (e.g.: top).
• Click "OK" and the dialogue box will close.
• You should now see a colored symbol with a picture of an anchor at the place where you put the named anchor. This will appear only on your authoring page, not on the page when seen in a browser.

• Type the text that will be the active link (e.g.: return to the top). (Be sure to type your text in the appropriate place -- e.g., at the bottom of the page.)
• With your mouse, highlight the text you just typed.
• Click the "link" button.
• You will get the same dialogue box you got for a regular link.
• Click the down arrow on the right. The named anchor you created in step one will be listed. Click once on it so it is highlighted.
• Click "OK."
• The text (e.g., return to the top) is now highlighted as a link to this named anchor (e.g., top).

Step Twelve: Viewing Page Source

You are authoring a page on a screen that looks a lot like a word-processing screen. "Underneath" this screen, your web-authoring software program Composer has been generating the "HTML" code that will let other people see the effects you are creating. HTML stands for: Hyper-Text Markup Language

You do not need to know HTML yourself. But it's a good idea to start to get some sense of which HTML codes are producing the effects you author. Eventually, you might want to manually manipulate this code yourself to produce special effects or to look for glitches.

To see the HTML code for the page you are working on:

• Go to the "View" pull-down menu.
• Click Source.
• You will see various HTML codes in arrow brackets: <CENTER>Jane Bader</CENTER>
• You will see the text you have put in.
• To close this code page, click "normal edit mode" on the "View" pull-down menu.

Step Thirteen: Editing Page Source

Some day you might want to manually change the HTML code page to add special effects or trouble shoot if things aren't turning out the way you expected. To edit the HTML code page, use the same feature as "Step twelve: viewing page source."

• Go to the "View" pull-down menu.
• Click Source.
• You will see various HTML codes in arrow brackets: <CENTER>Jane Bader</CENTER>
• You will see the text you have put in.
• You can type in changes, either to the text or the codes themselves, but be careful not to disrupt the precise codes you'll need for the page to work.
• To close this code page, click "normal edit mode" on the "View" pull-down menu.

If nothing in steps 12 or 13 made any sense to you, don't worry. These steps are optional.

Step Fourteen: Bulleted or numbered lists

Another simple way to add visual interest and clarity to your page is to put some text into a list with bullets or numbers.

Bulleted lists:

• On the lower button bar, click "bulleted list."
• Start typing and your type will appear in a list that looks like this.
• To turn it off and go back to regular typing, hit "enter" to start a new line, click the button again and the feature will be turned off.

• Right-click your mouse anywhere in the list.
• You will get a pop-up menu.
• Click "list properties."
• Select the type of bullet you want for your list from "bullet style."

1. On the lower button bar, click "numbered list."
2. Start typing and your type will appear in a list that looks like this.
3. To turn it off and go back to regular typing, hit "enter" to start a new line, click the button again, and the feature will be turned off.

1. Right-click your mouse anywhere in the list.
2. You will get a pop-up menu.
3. Click "list properties."
4. Select the numbering style you want for your list.

You will probably want to add some images (drawings or photographs) to your page. These images are actually separate image files that you will insert into your page.

NOTE: In many word-processing programs, images you insert on a page are "folded into" that WP file and you still have only one file to worry about. In contrast, in HTML, your images always remain separate files. Your Web page will include directions for retrieving your image file, but will not "fold in" your image as your WP program does. This means that your image files MUST be loaded separately onto your computer account at wncc for the world to see them. (More later on loading these files.)

Before you can insert an image, you must have an image to insert. You can obtain clip art images and photos from many word-processing programs or special collections of images that you can purchase and insert.

There are many different graphics file formats. If you find an image in a word-processing or other program, you might need to save it in a format that Web browsers around the world will recognize -- .gif or .jpg -- so follow the directions on your program for saving and converting.

Paint programs: You can also create your own graphics "from scratch" with a paint progam. These are used to create visual images, special text designs, and so forth. The Windows "paint" program is a simple program that is good enough for creating simple images. Look in your Windows directory and look for a file called "paint.exe". Alternatively, look in the "start" menu under "windows" or "accessories." Wordperfect 7.0 and 8.0  now come with a more sophisticated paint program called "PhotoHouse." You can use those to create your own images for your web pages -- just be sure to create and save them in  .gif or .jpg format.

The easiest and cheapest way to get images is to take them from other people's Web pages. Be careful to avoid taking images that are copyrighted. The Web is filled with public domain images that anyone can use without copyright problems.

• Set up a place where you can save all your images for future use. Whenever you see a public domain image on someone else's page that you like, save it here. On your own computer, you might create a separate subdirectory called "images" to store things. Or you might just save them in the same subdirectory where you save all your Web documents. In the campus labs, save things to a floppy disk that you keep for images.
• When you see an image you like, put your mouse arrow over the image and click the right button.
• You will get a pop-up dialogue box with several options.
• One of the options is "save image." Click that.
• It will ask you where you want to save the image. Tell it the location you are using to save images (your image subdirectory or floppy).
• Give the file a name. The dialogue box will include the name that was assigned to the image by that page's author. You might want to change the name at this point to something you'll remember. Keep the same file extension though, as this indicates what type of image file it is (probably .gif or .jpg). To be safe, stick with an 8-letter, lower-case name.

• The globe at the top: wwwglobe.gif
• The  "updated" image at the top: updated.gif
• The lines dividing each section: net_bar.gif
• The animated envelope at the beginning and end for e-mail: emaila.gif

Note: Unix DOES recognize underlining: _ so it's safe to include that in your file names for graphics and data files.

To find more images to save while you're surfing the Web: Many sites exist on the Web with scads of public domain images that you can save for your own use. These include sites for Netscape, Microsoft, and other software companies, as well as graphic designers who offer free graphics as a way of encouraging you to buy their other products. To find these sites, do a search with a Web search engine for "images" or "public domain images." Here are a few worth exploring while you're on-line:
 
 

To put an image of yourself on your page:

• Take a photograph to the campus computer lab in the North Library.
• Take a floppy disk with you to the lab to save the file you create.
• Ask to sign-in to a terminal with a scanner.
• Ask an attendant to show you how to scan your photo.
• The scanner will create an image file that you can enter, just like any other image file, into your Web page.

Step Sixteen: Images: Inserting Them on Your Page

Once you have some images to insert, you can insert them into your page with Composer.

• Put the cursor in the place where you want to insert your image. To keep it simple for now, start on a new line with no text.
• Click the "image" button on the button bar OR go to the "insert" pull-down menu and click "image."
• You will get a dialogue box. At the top, type in the filename for your image. Or you can use the "choose file" button to look around in your hard disk or floppy to find the image file you want to insert.
• Click the tab "appearance" at the top to choose the alignment of the picture relative to text with the buttons in the middle. (If you do nothing, the default alignment is flush left.)
• You don't have to, but you can also fiddle with spacing and borders with the other features on this dialogue box..
• Click "OK" and the dialogue box will close.
• If you later want to edit alignment, put your mouse over the image, click once to highlight the image, then click the "image" button again. You will get the same dialogue box, which you can now alter.

How to avoid this: Put yourself in the chair of a web-browser in Montana. When they open your page on-line, the HTML coding on your file will tell the browser software what the page should look like and produce the text and formatting for that  page on the screen. The HTML code also will tell the browser software to get the images needed to make the page look complete. You will need to "load" those images onto your wncc web-server account so that person's browser can get your images. And your HTML file will need to have the correct directions so the web-browser software can go into your account, find that image file, and bring it up on the screen.

In sum:

• Your images need to be in a place where a browser in Montana can retrieve them and bring them up on the screen in Montana -- that place will be your account on the wncc web-server. If your images only exist on your hard disk or your floppy drive, the browser in Montana can't reach into your hard disk or floppy drive and get them.
• Your Web page file needs to have the right HTML directions to send the browser in Montana to your account on the wncc web-server. If the directions send Montana to your hard disk or your floppy drive, the browser can't do that and won't be able to bring up the image file.

•  It should not look like this: A://filename gif. -- that will put in an HTML code that sends Montana to your floppy drive, which it won't be able to reach.
• It should not look like this: C://documents/filename.gif -- that will put in an HTML code that sends Montana to your hard disk, which it won't be able to reach
• The image file name should look like this: filename.gif -- if it doesn't, take out all the surplus.

<IMG SRC="filename.gif">

<IMG SRC="filename.gif" ALT="text">

Make sure all of your file names are in lower case, no punctuation, no spaces. Why? Because that's all that some Unix servers will recognize down the road when you have loaded your pages and images onto the wncc web-server. The filenames in your WNCC server-account must all be recognizable by Unix. And, in turn, that means that the filenames in your Web file (that tells somebody's browser what to bring up) must match what's on the server-account. In sum: everything in lower case.

CAUTION: After your page is loaded (see below), you should go on-line to see what your page looks like. You might be able to see the images even if you have mistaken code that includes A:// or C:// in the HTML coding. Why? Because you -- and you only -- are working on a computer that can reach into your floppy drive or hard disk, namely, your own computer. BUT NOBODY ELSE IN THE WORLD WILL BE ABLE TO SEE THOSE IMAGES, because they are not working on your computer.  If you're not sure, try calling up your pages on-line on somebody else's computer or in a campus lab.

BACKGROUND IMAGES: You have no doubt seen many pages that have a background graphic, instead of a color background. These can be added to your page with Composer. A background image is a very small graphic which is "tiled" to fill the page.

To acquire background images:

• Go to one of the sites with free graphics (see above) and save some you like for future use.
• Alternatively, if you see a background image on a page that you like, hold your arrow over an empty space on the page (a spot with no text or other images), and right-click your mouse. You will get a pop-up dialogue menu. One of the choices is  "save background as." Click that and it will ask where you want to save the background image. You can save it in your hard disk or  "A" diskette for future use.
NOTE: You might want to adopt a naming system for these files that will make it easier to find them in the future. E.g., you might start each with "bk" so you will recognize them later in your images subdirectory: bkblue.gif or bkred.jpg
NOTE: Stay with small background images (1-2 KB), so your page loads quickly.

• In your web-authoring page in Composer, click the "format" pull-down menu, then click "page colors and properties."
• Click the tab on the top that says "colors and background."
• At the bottom of the dialogue box that appears, you will see "background image."
• Click the button on the right, "choose file."
• Click through your directories to find the image file you want to use as the background image.
• Click "OK."
CAUTION: Be sure to use a text color that stands out against your background image. We have all seen lots of pages where the text is almost unreadable because it can't be seen against the background. If you're not sure, put all your text into "bold" so it stands out.

You can take text from a word-processing file that you have already prepared (perhaps your course syllabus) and turn it into an HTML web page with Composer. Unfortunately, Composer does not have "filters" that will take your Word file and translate it into HTML. However, there are two other methods for taking an existing WP file and putting it onto an HTML page for further editing in Composer.

Method One:

This method works best if you want to convert an entire WP file into an HTML page:

• Open your wordprocessing program.
• Open the file you want to convert to HTML.
• Use the "save-as" or "Save as Web page" command to save it in the new HTML format.
You are creating a new file in the HTML format. When you click "save as" (either a button on  your button-bar or an item on one of your pull-down menus), you will get a dialogue box asking you for the name of the file and where you want to save it. One of the choices in "file-type" should be "HTM" or "HTML". Choose that and the word processing program will save your file in HTML format and add the extension HTM or HTML.
• Close the new file and your word processing program.
• Open Composer.
• Click "Open" on the button bar OR use the File pull-down menu and click "open page."
• In the dialogue box, "choose file," and click to the file you just saved and click once to highlight your file.
• Click "open."
• The dialogue box will close and your WP file will open in Composer.
• You can now add the other HTML formatting available in Composer.

This method works best if you only want to insert part of an existing file, not the entire file, into an HTML page you are working on in Composer:

• Open your Composer program and the HTML web page you are creating with Composer. "Minimize" the page with the _ button in the upper right-hand corner.
• Open your word-processing program.
• Open the file you want to insert.
• Use the "copy" command to highlight with your mouse what you want to move into the HTML web page you are creating with  Composer, and click "copy" (either a button or pull-down "edit" menu).
• Minimize your word-processing program with the _button in the upper right-hand corner.
• Maximize your Composer page by clicking on it on the task-bar at the botton.
• Put your cursor where you want to insert the text from your WP page.
• Use the "paste" command on Composer to insert the text you want to transfer. (Either click the "paste" button at the top OR use the edit pull-down menu and click "paste.")
• The text without any formatting will now be pasted into your Composer page.
• You now need to add the formatting, but it should still be faster than retyping.

Step Eighteen: Adding tables

The "table" command is a good way to organize masses of information in a clear, legible format on your page. You might use a table with the borders visible. Or you might use a table with borders invisible on the screen to organize columns and develop special effects.
 

• Click the "table" button on the button bar (upper right) OR use the pull-down "insert" menu and click "table."
• You will get a dialogue box that asks you how many rows and columns you want, setting a border, and what % of the window the table should fill.
• When you click "OK" you will get a table on your screen as you specified.
• Now, type in the text for each block in your table. Put the cursor in the block you want and start typing.
• Once the table is on your screen, hold your mouse arrow over the table, click the right button, and you will get a dialogue box for adjusting the properties of the table. You can also get the dialogue box again by putting the arrow anywhere inside the table and clicking the "table" button.
• To set colors in the table (either the entire table or individual cells): right-click in the table. Click "background color" for table or cell and pick from the pallette.

• Tables can be used to create "columns" as you would in word-processing.
• Highlight some text on your page by putting it in a box, created with a table with one row and one column.
•  To place images or text in certain locations on your page (other than the default left-margin), set up a table with "0" borders and place the items within the cells that give you the lay-out you prefer.
• If you use a background image with a left-hand border, set up a table with two columns. The left-hand colum should be set at the % of the page that matches the border design and left blank. Type in a few spaces to fool Composer into thinking there is content in this table cell. The right-hand column is where you put your  text. With this technique, your text won't appear over the border design.
• Composer allows you to create a table-within-a-table. Put your cursor into the cell where you want another table, then use the pull-down "inser" menu and click "table." Then set up the table-within-the-table just as you did for the original.

Step Nineteen: Publishing your page to the World Wide Web

Once you have your web page as done as it's going to get for now, you are ready to load it onto your account on the wncc Web-server so the world can see it. Before you proceed, make sure you have saved the final version to disk. You will be loading this saved file, not whatever version happens to be on your screen at the moment.

These instructions assume that you're publishing to your WNCC account. If you're publishing somewhere else, the details (server name, initial folder, etc.) will be different.

First, you need a computer account. If you have a WNCC E-mail address, you've got one. There is no such thing as a separate "Web account."

Your WNCC computer account is a space on the hard disk of the WNCC computers where your incoming e-mail messages go and also where you put your Web files. Once you load your Web files onto the proper directory in your WNCC computer account, anyone in the world with access to the World Wide Web can go to your account, pull up your pages and images, and take a look at them.

The directions here tell you how to take the Web file you've just authored on your own computer and copy that file onto your WNCC computer account space so the world can look at them. This is called "publishing" to the Web.

Composer Publish: Once your file is completed (for now):

• You must be on-line so you have access to your WNCC computer account, so log into your ISP if you are at home. If you have DSL or cable modem service, you're already logged on. If you're at school, you're already logged on.
• Bring up the Composer program and your page.
• Click the "publish" button on the button bar OR go to the "file" pull-down menu and click "publish." If this is the first time that the program has been used, a window will open. There are two tabs at the top of the window. The "Settings" tab will probably be selected.
• Under the "Settings" tab: (You only have to fill this out once for each account. Composer will remember it.)
• for site name: put in the name you'll use to recognize the account, i.e.: "My WNCC Site" Note: This is the site name, not the account name! The account name is the first part of your WNCC email address.
• for the publish address: put in: ftp://fallon.wncc.edu/
• for the http address: put in: http://www.wncc.edu/~accountname/   [substitute your own account name for accountname here]
• Right below this on the dialogue screen, type in your account name. This is the account name you use for e-mail.
• If you are working at home and you are the only person with access to your computer, click the "save password" box. But if you are in a campus lab or if you share a computer with others, do not click this box, so only you will have access in the future. If you're working on a laptop, even if it's your machine, my recommendation is that you do not enter your password. Laptops are now the #1 most stolen item among theives and smash-and-grab artists.
• You are now in a dialogue screen. It needs some information about where you want to send your file.
• Under the "Publish" tab
• put in your file name
• for site name: put in your account name. That's the name before the @ sign in your e-mail address. For example: my e-mail address is lmackey@wncc.edu. My account name is lmackey. In reality, you could call it anything your want. The only place this appears is in the Composer publish window when you publish to the site.
• for site subdirectory: put in public_html.  This is vital! If you don't put the file into your public_html directory, people from the outside world can't access it. Don't ask me how I know that!
• Click "OK" and the program will transfer copies of your text file and images onto your wncc account. The originals will remain where they are (on your hard disk or floppy). The program is just sending copies of those files.

NOTE: If you are loading a revised version of a file, the Publish command will overwrite the old file with the same name on your htdocs directory. You do not need to first delete the old file.

---

Note: The problem with Composer's FTP program is that you can't see both your computer and the remote computer at the same time. As a result, you're not sure where you're putting your files or even if they make it safely. See below.


Even though Composer Publisher will load your files, you will find that an FTP (File-Transfer-Protocol) program will give you much more flexibility in managing your account, and I strongly recommend that.

First you need to get an FTP program:

Where to get an FTP program:

There are many good FTP programs out there. Some you have to pay for, others are free. Three recommendations are:

WS_FTP

The grand-daddy of all PC based FTP programs. This one's been around almost since the beginning of time, or at least since Windows 3.0, whichever came first. Fully featured, highly secure. The only problem is that it costs $40 per unit for the Home version, and that's without tech support or software upgrades. They come out with upgrades every couple of years or so. For the average user, other programs may be available that will do the job. WS_FTP is available from Ipswitch at: Ipswitch WS_FTP.

FTP Navigator

This is a really neat, easy to use FTP program for the PC. Easy to install, easy to configure, and even easier to operate. Small and reliable. As secure as most of us need to be. It's shareware, so it's relatively cheap ($20). FTP Navigator is available at: FTP Navigator v7.50. If you have the WNCC training disk, the install/trial copy of FTP Navigator is on the disk.

JFTP

"Java FTP" is a program that's free to educators. It is on your Training CD in three versions: A) Standard for PC, B) PC plus Java, and C) JFTP for the Mac. If you elect to use this, and don't know what you're doing, it's probably best to install the "PC w/Java" version. This program isn't quite as easy to use as FTP Navigator, but on the other hand it isn't rocket science, either. Click and drag operation between source machine and destination machine, easy configuration, etc. If you don't have a Training CD, it's available from jMethods at: http://www.jmethods.com/downloads/.

If none of these turn your crank, just go to the Web and search for "free FTP programs". You'll be inundated with possibilities.

Installing and Configuring Your FTP Program

1. Obtain the program, either from a download or another source.
2. Double-click the source file to begin the install process. If asked, accept all defaults. You may wish to be on the lookout for offers to automatically receive notices from the company or it's partners. They sometimes result in Email spam.
3. Follow the directions. When the install program has run its course, start the FTP application.
4. Just like when you use the FTP program in Composer, a stand-alone FTP program has to know where to send the files. Each of the three programs have a little different setup, but all of them require the following information:
   1. The name you want to see on your machine. Sometimes known as the "Site Name". It is not the name of your account on the WNCC server (i.e.: lmackey, etc.). It's what you want to call it on your machine (i.e.: "My Faculty Site", etc.)
   2. The name of your server. In our case, enter: fallon.wncc.edu. All lower case, no spaces!
   3. Login name: This will be the part of your Email address that's in front of the "@" sign.
   4. Password: This is your Email password
   5. Note: Most programs will also ask you for the "initial directory" or "remote directory". If you're asked, enter "public_htlm" (no quotes). This can be a life saver because it means that the FTP program will automatically place your files in the public folder and you don't have to remember to do that. If you're only transferring files up a couple of times a year, say at the beginning of each semester, that can be a real help!
5. To actually use the program, start the FTP application and look for something like, "File > New Site", or "Manage Sites", or even simpley a "New" button. Fill in the above information as required, and you've established your new account.

Using an FTP program:  

1. Start the FTP Application if it isn't already open.
2. Select the site you wish to connect with and click "Connect" or something similar
3. When prompted, enter your password for the site

Once the FTP  program is open:

• You will now see a new screen.
• On one side is the "source" computer -- that shows your hard disk directory and floppy disk and the various subdirectories and files on there.
• On the other side is your WNCC computer-server account--aka: the remote site-- where you're going to send your web and image files. If this is the first time you've used the account and you were able to enter public_html as the initial folder, the remote screen may be blank. After all, you haven't moved any files into it yet.
• Now use this program to load your files and not bother going back to Composer publish:
• On the local machine click once on the file you want to load  -- your Web file -- to highlight it.
• In the middle, between the two screens, click on the arrow pointing to the remote site -- you are copying your file from the "source" into the "target." You may also simply click and drag from the local site to the remote site.
• If you're working with multiple files, you may select them as a group using "Shift" or "Ctrl" (depending if they're next to each other or not), then transfer the entire group in a single transfer.
• You may transfer complete folders as well as individual files.
• You're done. Click "OK" or "close" to exit the FTP program.

Common mistakes in loading, using the methods above:

• Be sure to load into the public_html subdirectory
• For WNCC students, faculty, and staff: be sure to use the account name and password that you use for your wncc.edu e-mail account. Do NOT use your WebCT account name/password.
• Be sure the file you are loading is properly named, as discussed earlier: no punctuation, no spaces. I recommend keeping everything in lower case, to avoid confusion later, as this part of your URL is case-sensitive.
• Open a browser and check the page once it's on-line to test it -- preferably on another computer, to be sure everything is coming up from the Web server, not from your hard disk.
  

Step Twenty: Your URL ("web-address ")

You can now tell friends to take a look at your page on the Web. Here is your URL (Uniform Resource Locator):
 

http://www.wncc.edu/~account/filename.html

 
• http:// tells the Web-browser to use the hyper-text-transfer-protocol.
• www.wncc.edu tells the browser to go to the wncc web-server computer.
• ~account tells the browser to go to your account on the wncc web-server computer.
• Your account name is the part before the @ sign in your e-mail address. For example: my e-mail address is lmackey@wncc.edu -- my account name is lmackey
• filename.html tells the browser to go to that file on your account.

Step Twenty-one: Creating more pages

You have just created your home page and named it "index.html". You will probably want to create many more pages --  perhaps a separate page for each of your courses, a biography page for you, etc. It's possible, of course, to put everything on one gigantic page/file, but that will take a long time for web-browsers to load and require a lot of scrolling by users. It's more user-friendly to create many separate pages and connect them with hyperlinks.

Think through a reasonable naming scheme, as each file needs its own name and you need something convenient and easy to remember as you are creating and updating pages down the road. Remember that this file name will be part of your URL. It's always safest to stick to old-fashioned 8-digit filenames. All will have the extension of .html

For example, if you have files with the following names, their URLs will be as follows:
 
 

Once you have named files and placed them on-line on your web site, try to avoid renaming them in the future. Other web sites might have set up hyperlinks to your pages without your knowledge and they won't know you've changed the name.

Step Twenty-two: Making your pages user-friendly

In addition to suggestions above for making your pages user-friendly, here are a few more:
 

• Frames: You cannot create frames with Composer, although you can update target pages for an existing frames site with Composer. Before switching to frames for your site, spend an hour or so with beginners in the campus computer labs. You will discover that they get endlessly confused over how to use the "back" and "print" buttons with frames. You can get much the same effect of frames using "tables" -- e.g., set up a directory of the main elements of your site in the left-hand column of the table.
• Last updated: At the end of every page you have on-line, put the date "last updated," so users who visit again will know whether or not there is new information and how recently you updated the page.
• Webmaster: On every page, probably at the end, put information about who created the page (the "Webmaster") and your e-mail address, so browsers can get in touch with you.
• Site index: Browsers discover your Web pages in any possible order, especiallly since a search engine might send a browser to a page other than your home page. As you cannot control which page a browser sees first, it's a good idea to have a complete list of the pages in your site, somewhere in every single page/file. You might put a complete list at the end of your page, down the left-hand side in a table, or across the top.

This page adapted from material created by Julie Van Camp, Professor of Philosophy, California State University, Long Beach.

This page currently maintained by: Leonard MacKey, WNCC

Copyright Julie C. Van Camp 1997-2005: Permission is granted to print, download, and reproduce this page for educational, nonprofit, scholarly, and personal purposes, so long as this complete copyright and permissions notice is included with all such copies.