Creating a Web page or a Course Document for Blackboard with Netscape

on a PC running Windows

by Ursula Hoffmann, last revised January 2001 -- 9 pages if printed


Table of Contents

  • Browsers and editors for webpages
  • Create a new folder for your course
  • Create a course document
  • Edit a course document
  • Format your text and your page
  • Toggling between Composer and Browser
  • Adding a table of contents and Targets to a long document -- as we do here
  • Add a table: a kind of grid
  • Edit an existing table
  • A table created with Excel
  • Add an image
  • Adding links to other web pages
  • Sign, date your page and add your e-mail address
  • Test your page with another browser, such as Microsoft Internet Explorer
    • Browsers and editors:
    There are two major browsers for the Internet, Microsoft Internet Explorer (IE), installed on all Windows machines, and Netscape Communicator which you can download and install on your machine.
    Both allow you to view pages on the Web or locally on your own PC. But pages created in one will look different in the other.
    Both browsers have associated editors, for creating and editing pages in HTML (HyperTextMarkupLanguage) without requiring a knowledge of that language.
    We like Netscape Communicator because it is the underdog, it is free, and it includes an editor while IE requires us to buy an editor, Front Page, expensive.
    If you do not have Netscape Communicator on your machine, download and install it: http://www.netscape.com.

    Using Netscape, we toggle back and forth between editor (this says Netscape Composer on the title bar at  the top of the screen) and Navigator=browser (this says Netscape on the title bar).

    Netscape Navigator, the browser:

    Bar 1: the title bar
    Bar 2: the menu bar
    Bar 3: the tool bar
    Bar 4 for Bookmarks and Location.

    Netscape Composer, the editor:

    Bar 1: the title bar
    Bar 2: the menu bar
    Bar 3: the format bar
    Bar 4: the tool bar. This can be minimized (click on the dots at left) to gain more workspace. All the tools are also available on the menu bar.

    Click File, Edit page or File, Browse page to go back and forth.
    Or click on the file on your taskbar (at the bottom of your screen). The editable version has a yellow pencil. Or on the Netscape taskbar (just above it) -- at the right. Try not to open several copies of the same file lest you lose your last revision. Here, as you can see, I have this document open just once, in the browser, and in the editor.

    top


    First, use Windows Explorer to create a new folder for your course, such as xxxxsp01 for a course to be offered in the Spring of 2001, with xxxx a four-letter abbreviation for the course name. You want to keep all course materials in the same folder.

    You have two options to start with, for a course document:
    1) You can use an existing file, or create a new one, using WordPerfect or Word or Excel, such as a syllabus or a chart. Proofread it carefully for content, do not bother with formatting as formatting does not translate very well and therefore is a waste of time. Save. Now click File (upper left corner), click Save as HTML. No spaces in the filename, abbreviate it. Remember the filename and the directory you saved it to, such as c:\xxxxsp01\syllabus.htm. Then close the application, clicking X in the upper right corner.
    Now open Netscape, click File (upper left corner), Open Page, Choose File, e.g., c:\xxxxxsp01\syllabus.htm, click Composer, click Open.

    2) Create a file directly in Netscape: Open Netscape, click File (upper left corner), click New, drag pointer to blank page, release.
    Now type your text, formatting later.

    At the start of a new line, click Insert, Horizontal Line to insert a line between sections which is clever enough to adjust itself to the width of any screen. For your first save, click File, Save as. No spaces in the filename, abbreviate it. Remember the filename and the directory you saved it to, such as c:\xxxxsp01\syllabus.htm. A dialog appears, asking for a course title: here, you can use several words, with spaces between them but keep the title short, or it will get truncated. Experiment. (See below, Formatting your page.)

    Edit an existing file:
    Open Netscape: click File (upper left corner), Open Page. You get the same dialog window. Click Choose File, select your file name and doubleclick it.

    Note: Most commands available in the Menu bar (top bar on your screen) have duplicate icons in the third icon bar. I usually minimize that bar (click on the dotted area at the very left) to get more workspace on the screen.
    top


    Format your text, using the format bar:

    Select/highlight text or an object before formatting it, as usual, or rightclick it.
    Click on the downarrow next to Normal ( preset types), next to Variable Width (fonts), next to 12 (font sizes), next to the black rectangle (colors) to see what options are available: Headings are numbered 1 to 6, with 1 very large. I like 3.
    The A's are for bold, italic, underline -- the fourth one is for removing all styles.
    The next two icons are for bulleted and numbered lists.
    The next two icons are for arranging text: the HTML equivalent of  Tab, to indent or not.
    The last icon is for alignment: left, center, right.
    Save.

    Format your page:
    Click Format, Page colors and properties on the top menu bar.
    Click the tab General. Type the title which will appear on the title bar. Type your name in the field Author. The rest of the fields are important only when you create a business web page, for search engines.

    Click the tab General. Type the title which will appear on the title bar. Type your name in the field Author. The rest of the fields are important only when you create a business web page, for search engines. Click the tab Colors and Background. Click the white rectangle=Background. Choose a color from the color chart.
    You may also click the other rectangles to choose colors from the color chart, but be careful: you do not select, e.g., black text on a black background unless you want invisible text. In any case, you are selecting settings for your entire document.
    Ignore the tab META Tags unless you are an advanced user. Click OK. Save.

    Toggling between editor and browser:
    Look at your saved document with the browser. Click Preview on the third menu bar at the top of your page, or click File, Browse page. Either choice changes to the browser, no longer the pencil icon saying Netscape Composer, but rather the golden wheel/star icon followed by the title you chose and Netscape.
    If you do not like the look, click File, Edit page and make adjustments, save. Then return to the browser. You may need to click Reload on the big button bar to see your most recent changes.
    Click File, Edit page or File, Browse page to go back and forth.
    Or click on the file on your taskbar (at the bottom of your screen). The editable version has a yellow pencil. Or on the Netscape taskbar (just above it) -- at the right. Try not to open several copies of the same file lest you lose your last revision.

    top or Back to the editor....


    Adding a table of contents and Targets to a long document, as this one is:
    This allows the user to jump from the table of contents to a selected topic such as Targets; else, the user needs to scroll down to the selected topic.
    Example:
    Table of Contents: (at the start of your document)
    Introduction
    Targets (jump to the desired section)
    etc.
    1. Create a target: Select text  in your document (here I selected the word Targets), click Insert, Target on your menu bar (or the Target item on your third bar) -- accept the suggested name for this target -- click OK. Save to make target name show.

    2. Create a link to it: in the table of contents, select the text you want to want to link to a target, click Insert, Link, doubleclick a named target in the dialog Select a named target (lower left of the windows). Save.
    Test: Click on File, Browse. Then click each line in your table of contents and make sure you jump to the corresponding section in your document.

    3. Format the table of contents: select/highlight all items under the header Table of Contents, on the format bar click Normal, click, e.g., List Item. Then, on the same bar, click the next to last icon, Increase Indent (arrow points right).
    4. Now put links at the end of every section of your document to allow the user to jump back to the top of your document.
    Select the title of your document to make it a target. Click Insert, Target, OK. Save.
    Now put a link at the end of every section to let the user jump back to the start of your document.
    Scroll down to the end of your first section, click Enter to create a new line, type top (or whatever), select what you just typed, click Insert, Link, select the title of your document in the lower left portion of the window (Select a named target), click OK.
    Now select top (or whatever), copy it to memory (Ctrl-c), then scroll down to the end of every section and paste it (Ctrl-v).
    top


    Add a table: a kind of grid:
    Click Insert, Table.
    Select number of rows, columns, table alignment, caption. You can change these later, see below.
    Border line width can range from 0 to, say, 5 for a thick border.
    Try 2 or 3 for cell spacing and padding.
    100% for table width is good for very wide tables. For a narrower table, use less.
    The next few items need no explanation. But NEVER check the box Leave image at original location. Ignore Extra HTML. Click OK.

    Now type text into each cell using mouse or Tab or arrow keys to navigate from cell to cell.
    Or click into a cell and click Insert, Image to insert an image.
     

    Sample table
    2 columns 3 rows Border line width 2
    cell spacing & padding 3 Table width 50%
    equal column width Caption above table

    Edit an existing table: first click on the table or on a specific location in it to select it.
    Click Format menu, Table Properties, select Row or Column or Table tab to make changes.
    Click Edit menu, Delete, Cell, Row, Column, Table to delete something you clicked to select it.
    Click Insert menu, Table, Row or Column to add a new row or column.
    Alternately, rightclick the table and select from the menu.
    top

    A table created using Excel:
    Open Excel and create or open a worksheet. Save it to your working directory, e.g. as test.xls. Open \your working directory\test.xcl and click File, Save as HTML. Close Excel. Open Netscape. Click File, Open Page, Choose test.html.

    Excel Worksheet

    A worksheet created in Excel and saved
    as HTML    
    click File save as HTML  

    Last Updated on 1/23/01
    By Ursula Hoffmann

    Edit as directed above.


    Add an image file (or several):
    All images for the web should be in a compressed format, gif or jpg, and at a low resolution, 72 dpi (dots per inch).
    You may download an image from the Web (on a PC, rightclick it; on a Mac, click it and drag it to the Desktop or your working directory) but make sure you have permission to use it, and add credits.
    You may want to scan an image: again, make sure you have permission to use it, and add credits.
    See my helpfiles,  scanning, graphics etc.
    You may want to create your own: I recommend PaintShop Pro, very powerful and only about $100 (look online). You probably have a graphics package already on your computer, such as Image Editor or Photo Editor.

    NOTE: Make sure your image is not very big (640x480 is a full screen) and does not have a very big file size or it will be slow to download to the user's screen.

    NOTE: When you add an image to a file, the file has just a pointer to the image file. Therefore, you must upload the file as well as well as the image file to Blackboard.

    Save the image file in your working directory, i.e., c:\xxxxsp01\.

    Open your document. Click Insert,  Image, Choose File: select your image.Click OK.

    As you can see, this screen has many options.
    NEVER check the box Leave image at original location. Too slow.
    Select text alignment and wrapping around images as you want your text aligned next to your image.
    Select Space around image: 10 or 15 pixels provides a good margin.
    Alt. Text / LowRes lets you put in text, such as the name of the photographer: this will show up when the user positions the mouse on the image.
    Dimensions: To resize the image, you need to click on it to select it, then click on Insert, Image. Make sure Constrain has a checkmark, to keep the proportions. Then you can change the Height; and the Width will change automatically. Do not make big changes, no more than10% or the image will look ugly.
    top


    Adding links to other websites:
    1. Type the name of a website, or from an open website title bar or copy it from your bookmarks (in the browser, click Bookmarks, Edit Bookmarks, find the site, rightclick it to see its properties, select the title, press Ctrl-c to copy it). Now select your open file,  position your cursor and paste (Ctrl-v). One can format this and add comments.
    2. Now add the link: select the name you just typed or pasted, e.g., Lehman College. Click Insert, Link. The following dialog opens, with the cursor positioned in the space after Link to a page.... Here, type or paste the location, including the http://. Click OK.
    Lehman College

    Tip: You may want to create a document for your Blackboard course that is a list of links related to your course (urls.html). I suggest that you type or paste all of the names (step 1 above) before adding the links (step 2 above). Reason: Whenever you press the Enter key at the end of a link, the text on the following line repeats the previous link.  If this happens to you, select the text on the new line, click Insert, Link, Remove Link.
    Note: Do not interlink your documents intended for Blackboard. Assuming you have file 1 called syllabus, file 2 assignments, file 3 urls: you can interlink them on your computer or for a website other than Blackboard. But on Blackboard, the links will not work, as Blackboard assigns a new filename whenever you upload a file.
    top


    Sign and date your page, and add your e-mail address:
    See below. To add your e-mail address, select/highlight your name, click Insert, Link, type mailto:e-mail address. Put your mouse cursor over Ursula Hoffmann below to see how it should look.

    Test your page with a different browser, such as Microsoft Internet Explorer, and on machines with different graphics cards. Your page may look different. Also, colors and fonts may look different on computers with different monitors, graphics cards, installed fonts. Therefore, keep things simple and find compromises -- or add the comment: Optimized for ...
    top

    Consult my Mini-manual for Blackboard  ||  Teaching with Technology page
    last revised January 2001 by Ursula Hoffmann