Creating a Web page or a Course Document for Blackboard with Netscape v. 7.2

on a PC running Windows

by Ursula Hoffmann, last revised December 2004 -- 6 pages if printed


Click Help to see which version you are using and what plug-ins are installed.

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 Anchors 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 may 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 Composer on the title bar at  the top of the screen) and Navigator=browser (this says Netscape on the title bar)--by clicking one or the other on the taskbar at the bottom of your screen.

    Netscape Navigator, the browser:

    Bar 1: the title bar, showing the document title, followed by the word Netscape -- this is the browser
    Bar 2: the menu bar  -- drop down each menu to see its options
    Bar 3: the personal bar, for bookmarks and favorite locations
    Bar 4: the name of the file.

    The taskbar is at the bottom of your screen.

    Click File, New, Blank Page for a new page -- or File, Open Page for an existing page to get into Netscape Composer, the editor:
    Or, if you have an existing page open in the Browser, click on File, Edit -- or on Composer at the bottom of your screen.
     

    Netscape Composer, the editor:

    Bar 1: the title bar
    Bar 2: the menu bar
    Bar 3: the tool bar. This can be minimized (click on the triangle at left) to gain more workspace. All the tools are also available on the menu bar.
    Bar 4: the formatting bar.  For details, see below.

    The taskbar is at the bottom of your screen.

    top


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

    You have three 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 Web page or HTML. No spaces in the filename, make it short; you can use underlines between words.  Remember the filename and the directory you saved it to, such as c:\my documents\xxxxsp05\syllabus.htm. Then close the application, clicking X in the upper right corner.
    Now open Netscape, click File (upper left corner), Open File, choose file, e.g., c:\my documents\xxxxxsp05\syllabus.htm, click File, Edit.

    OR copy and paste:
    2) Type your text in Word, spellcheck, then press Ctrl-a to select all, press Ctrl-c to copy all. Then open Netscape, click File, New, press Ctrl-v to paste your text into the empty file.

    OR
    3) Create a file directly in Netscape: Open Netscape, click File (upper left corner), click New.
    Now type your text, formatting later.  I prefer the second or third option: Netscape creates smaller files that download faster.

    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:\my documents\xxxxsp05\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 File. 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 triangle at the very left) to get more workspace on the screen.
    top

    Format your text, using the formatting bar:


    Select/highlight text or an object before formatting it, as usual, or rightclick it.
    Click on the downarrow next to Body Text (on the left of the bar) to see what preset options are available: Headings are numbered 1 to 6, with 1 being very large. I like 2 and 3.
    Clicking on the black rectangle and the icon to its right allows you to choose colors for your text.
    -a and +a are for decreasing or increasing the font size.
    B, I, U for Bold, Italics, Underline.
    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. (Tab does not work in HTML.)
    The last four  icons are for alignment: left, center, right, justfied..
    Save your document.
     

    Format your page:
    Click Format, Page Title and Properties on the menu bar.
    Type the title which will appear on the title bar. Type your name in the field Author. The field Description is important only when you create a business web page, for search engines.

    Click Format, Page Colors and Background. If  you use  custom colors, 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.


    Toggling between editor and browser:
    While in the editor, your title bar says Composer. To look at your saved document with the browser, click File, Browse page -- or click the Browse button on the toolbar. Now, your title bar will say Netscape.
    If you do not like the look, click File, Edit page and make adjustments, save. Then return to the browser.
    Click File, Edit page or File, Browse page to go back and forth.
    Better yet, click on the file on your taskbar (at the bottom of your screen) so you do not open several copies of the same file and lose your last revisions.
    To the right of the Start button on the taskbar, you can see that the C for Netscape Composer is superimposed on a lined piece of paper. The N for the Netscape browser is by itself. You can toggle between the two provided you save any changes you make in the Composer. You can see on the following image, that a single copy of this file is open: next to the Start button is the Composer, currently selected. To its right is the same file in the browser.
    (In case you are curious, Jasc Paint Shop Pro is open for making screen captures to produce the images used in this document.)

    top


    Adding a table of contents and Targets and Anchors 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 would need to scroll down to the selected topic.
    The items in the table of contents in this document are formatted as a bulleted list -- see the format bar.

    Note that the words target and anchor are used interchangeably or that they vary in different versions of the same software package. In Netscape v. 7.2 which we are using here, the name Named Anchor is used. In any case, you have to create that before you can link to it. In this document, we can jump from an item in the table of contents to the section that deals with it. We can also jump from the word top back to the table of contents.

    Example:
    Table of Contents: (at the start of your document)
    Introduction
    Targets/Anchors (jump to the desired section)
    etc.
    1. Create a target/anchor: Select text  in your document (here I selected the word Targets above), click Insert, Named Anchor on your menu bar  -- accept the suggested name for this -- click OK. Save to make anchor name show.

    2. Create a link to it: in the table of contents, select the text you want to want to link to an existing anchor lower down in your document, click Insert, Link, doubleclick a named anchor in the dialog Select a named anchor (each name is preceded by #). 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, e.g., Bulleted list.. Then, on the same bar, click the icon for Indent text (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 an anchor. Click Insert, Named anchor, 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 anchor), 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).

    5. Test your anchors. You must be in the browser to do this.

    top


    Add a table: a kind of grid -- useful for a syllabus to preserve columnar format:
    Click Insert, Table -- or click Table on the toolbar.
    Select number of rows (horizontal), columns (vertical), table alignment, caption. You can change these later, see below.
    Border line width can range from 0 for no border 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. 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 Cell Properties, select Row or Column or Table tab to make changes.
    Click Table menu, Delete, Cell, Row, Column, Table to delete something you clicked to select it.
    Click Table menu, Insert, Row or Column to add a new row or column.

    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 on  photography, scanning, graphics, tables 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 which may be good enough for occasional work.

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

    To put 2 or 3 images side by side, insert a table and insert the images into the cell tables.

    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 the image file(s) to your server or Blackboard.

    Save the image file in your working directory, i.e., c:\my documents\xxxxsp05\.

    Open your document. Position the pointer. Click Insert,  Image, Choose File: select your image. Type some tooltip text that will show when the mouse pointer is on the image. Type in some alternate text such as the name of the image or photographer with a copyright notice, or click Don't use alternate text.
    Click tab Dimensions if you want to change the image size (not recommended as this causes some loss of quality).  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.
    Click tab Appearance to choose the amount of space between image and text, or between two images. Select Space around image: 10 or 15 pixels provides a good margin.
    Click tab Link if you want to link the shown image to a second image or sound or whatever. Museums (e.g., metmuseum.org) may do that, showing a small fast-loading image; when you click on that, you expect to have to wait for a large version of the same image to load.
    Click OK. 
    top

    Adding links to other websites or documents or media files:

    Click Insert, Link.
    1. Type the name of a website, or copy it from an open website title bar or copy it from your bookmarks (in the browser, click Bookmarks, Manage Bookmarks, find the site, rightclick it to see its properties, select the title, press Ctrl-c to copy it. Now position your cursor  into the upper space and paste (Ctrl-v). One can format this and add comments.
     
    2. Now add the link location: In the lower space, type or paste the location, including the http://. Click OK. Example:

    Lehman College -- http://www.lehman.cuny.edu/
    Tip: You may want to create a document for your Blackboard course that is a list of web site links related to your course (called, e.g., urls.html).
    When you type after an existing link, the display text may get extended. If that happens, doubleclick the link and remove it by deleting the url, then start over.
    I always add a space after the display text but do not select it when inserting a link. Then I can type more after the space without messing up the 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):
    First, click Insert, Horizontal Line. Click Enter to go to a new line, then sign and date your page on a new line below the divider.
    To add your e-mail address, select/highlight your name, click Insert, Link, type mailto:e-mail address (no spaces, please). Put your mouse cursor over Ursula Hoffmann below to see how it should look.

    Test your page: You cannot test links in the editor; you must use the browser. Also test your document 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 will look different on computers with different monitors, graphics cards, installed fonts, keyboard settings. Therefore, keep things simple and find compromises -- or add the comment: Optimized for ...
    top

    ||  Teaching with Technology pages || see related material, e.g., copyright, tables, graphics, Blackboard mini-manual ||
    last revised December 2004 by Ursula Hoffmann