This tutorial will show you the basic tools for building a World
Wide Web site using Netscape Composer. The tutorial itself was made
in Composer. The tutorial uses Netscape Composer because it is free
as part of the Netscape Communicator package, and it is cross-platform.
The same principles would apply to any html (web page) editor, such as
DreamWeaver, GoLive, BBEdit, FrontPage, or others, but different editiors
may implement things in somewhat different ways. For Windows uses,
there is a free web editor, Arachnophilia, that you can download
from http://www.arachnoid.com/arachnophilia/.
I have not seen or used this editor, so I cannot comment on it. I
personally use Adobe GoLive, but I do not recommend it for first time creators
of web pages. Like most Adobe products, it is great if you know what
you are doing, but it is so complex that you lose the forest for the trees.
In this tutorial you will recreate a sample web site on the Bole language of Nigeria, using text and files from a resource file.
GETTING STARTED: Launch Netscape (you have already done this if you are viewing this tutorial online using the Netscape web browser). On the hard disk of your computer, create a folder called "Tutorial".
Go to the Resource file for this tutorial and select the text under the heading Text 1 (it starts "The Bole Language of Nigeria" and ends "... and French"). Past this text into your new file.
HINT: Put two or three return spaces both before and after the text. This gives you some "work room" in case you want to insert thing before or after the text. Composer has the annoying habit of continuing formatting, like bold, italics, etc. until you turn it off. Having some space above and below the text lets you to place the cursor above or below the text and start new lines without them including undesired formatting.
Pull down the "Format" menu and select Heading --> 1. Note that
the smaller the number, the larger the heading.
IMPORTANT: Save this file with the name index.html. The e-campus site where you will be uploading your web site requires that the home page of the site have this name in order that the e-campus link to the site find it.
You will see a box like the one below. Type in banner.gif in the box indicated by the arrow.
IMPORTANT RECOMMENDATION: Do NOT use the "Choose file" button next to the box in order to find the image that you want to insert. Carefully type the name of the image in by hand. If you use the "Choose file" method for findin an image, Composer has a very annoying default of naming the image by specifying exactly where the image is on YOUR computer, working all the way from the hard disk to the sub-sub-sub-folder where the image is found. Obviously this will NOT be the location of the image when you upload your site to a server on the web, with the result that your images will not display on your web page.
Put the cursor underneath the text and go through the same procedure to insert the map image by typing the name map.gif into the box. You can center the map by putting the cursor in the line where the map image is and clicking on "center" alignment from the tool bar (see Making a heading above).
Create a heading from the line "The Bole homeland", following the procedure under Creating a heading.
Save the new page in your "Tutorial" folder as homeland.html.
Insert the banner at the top of the page following the procedure for Downloading and inserting images.
Go to the resource file for this tutorial and download the third and fourth images (a picture of a town and a picture of the Emir of Fika) into your "Tutorial" folder, following the procedures under Downloading and inserting images.
Following the procedures under Downloading and inserting images place the cursor after the first long paragraph and insert the picture of the town, giving it the name fika.jpg. Do the same for the picture of the Emir, naming the file emir.jpg.
The Bole homeland
Some Bole sounds
Pull down the format menu (see Making a heading
for the appearance of this menu) and select List --> Bulleted. The
two lines you selected will turn into a bulleted list.
Do the same thing on your homeland.html page for the lines that
read
Bole home page
Some Bole sounds
On your index.html page, select the first line of your newly created bulleted list ("The Bole homeland"). Pull down the "Insert" menu.
Select "Link", as shown in the diagram above. A dialog box will appear:
Type in homeland.html and click OK. The line "The Bole homeland" is now highlighted as a link that will take you to your homeland.html page.
Go to your homeland.html page, select the line of your bulleted list "Bole home page", follow the procedure above for inserting a link, this time typing in index.html as the page you want to link to.
You use this same technique to link to files elsewhere in the World Wide Web by typing in the entire web address instead of just the file name. For example, if you wanted to link to the Linguistics 1 home page, you would type http://www.linguistics.ucla.edu/people/schuh/lx001/ as the "Page Location" box.
Go to the "File" menu and select Open --> Page in Navigator:
When the box showing files on you computer comes up, find your file index.html and open it. Then click the link to "The Bole homeland". You file homeland.html should open. Click the link "Bole home page", and your file index.html should open.
To continue, close the pages in Navigator and go back to this tutorial page.
Create a heading from the line "Some Bole sounds", following the procedure under Creating a heading.
Save the new page in your "Tutorial" folder as sounds.html.
Insert the banner at the top of the page following the procedure for Downloading and inserting images.
Insert links to your index.html and homeland.html pages by creating a bulleted list from the lines "Bole home page" and "The Bole homeland" following the procedure in Making a bulleted list and Making links. In this case, type in index.html as the link for "Bole home page" and homeland.html as the link for "The Bole homeland".
Go back to your index.html and homeland.html pages and link the line "Some Bole sounds" in your bulleted lists to your new page, using the file name sounds.html.
These links will make it possible to easilty go back and forth between the various pages of your site.
In your sounds.html there are a number of words in the Bole
language. You would probably like to set them off from the rest of
the text. Go through the sounds.html page, select a Bole word,
then either click the bold A on the tool bar or pull down the Format
menu and select Style --> Bold. You can use the same techniques for
the other types of text formatting.
Put the cursor before the first line of the greeting dialog and put in a blank line. Put the cursor on the blank line. The go to the Insert menu and select "Table". You will see a dialog box like the one on the left.
- In the "Number of Rows" box, type 10 (there are ten lines in the dialog).
- In the "Number of Columns" box, type 3 (there are three things per
row).
- To automatically make some spacing between columns, you can type,
say, "5" into the "Pixel Spacing Between Cells" box.
- In the "Table Width" row, hold down the button and change "% of window"
to "pixels". (This will make sure that your table is at least 100
pixels wide. If you leave "100% of window", the table will alway
go clear across the screen, which will be way too wide.)
- Click "Insert" and the table will appear.
To put the greetings dialog into the table, either copy each item and paste into the appropriate cell, or recreate the dialog within the appropriate cell.
The text in the table probably breaks in places you don't want, does not line up across rows, etc. Place the cursor in the upper left hand cell of the table, pull down the format menu, and select "Table Info". You will see the dialog box on the right. Select the "Cell" tab at the top of the box if it is not already selected.
- Check "Cell Width" 10 pixels (this will assure that the cell is no
less that 10 pixels).
- In the "Vertical" alignment box, choose "Top" (this will make you
take go to the top of the cell).
- In the "Text" box, check "Nonbreaking" (this will assure that the
text all stays on one line).
- Click "OK".
In principle you need to do this for every cell, but the simplest thing
would be to put the cursor in the long item in each column and make these
selections. The longest lines are
"Greeting" for the first columnBy making sure these items do not break they will create column widths that will also accommodate the items in all the lines without their breaking.
"Puzo, alhamdu lillahi!" for the second column
"'The rainy season, thanks be to Allah.'" for the third column
If you place the cursor over the little downward arrow, as shown, and
hold it down, you will see the dialog box at the right. Chose "Save
as QuickTime Movie...". You should get a "Save" box. Save the
file entitled greetings.aiff into your "Tutorial" folder.
If this doesn't work, you will have to experiment on how to download the sound file.
In the "Edit" menu, select "HTML Source" and you will see the actual HTML code of your page. (You may be prompted at some point to "choose a default editor for your html code". Choose whatever word processor you usually used, such as MicroSoft Word.)
Scroll down the code until you locate the piece of text above, starting "<p>Here is a sound file ...". Type in the boldfaced line EXACTLY as shown in exactly the location shown. This "embed" tag causes the sound file greetings.aiff to appear in the page, and you can play it from the page.
Close the source code page. You will be prompted to save it, which
you should do, and you will also be prompted to "Reload" your Composer
page, which you should do. A controller for the sound file should
now appear in your page.