NOTE: The following exercises are designed for Netscape Communicator 4.0, which you should install on your home computer. It is included on the AcIS Internet Software CD-ROM, which you can borrow from the instructor or purchase from AcIS in Philosophy Hall for $5.
CREATING AN INDEX.HTML FILE FOR YOUR WEB PAGE
1. Start Netscape Communicator and go to:
http://www.columbia.edu/itc/ealac/V3613 [note that the "V" must be upper-case]
This is the homepage for Buildings and Cities, and at this preliminary stage it contains only links to each of your individual home pages. Check your home page to see what comes up. If you get a simple index of the files on your home page, it means that you have not yet composed your own index.html file, which we will now proceed to do. If you already have an index.html file, then Save As to the floppy that you brought with you under the filename "index.html", and then open it by going File > New > Blank Page (or Communicator > Page Composer); then choose New and select Local File.
For those who do not yet have an index.html file, we will next use a ready-made Netscape template for you to start with. Go File > New > Blank Page (or Communicator > Page Composer); then choose New and select From Template. [There is another choice, From Page Wizard, that will lead you through the steps for setting up a basic homepage; we won't use it, but you may want to try it at home; as with the template option, you must have an active network connection, since it involves calling up a Web page.] Check on the "Netscape Templates" panel to the lower left, which will take you to a Web site run by Netscape. From the list of various templates, choose, "My Home Page." You must then save this to your floppy disk by going File > Save As. You can keep the original name ("Pers1") or rename it as you please. Then close this Netscape screen.
Now from Netscape Composer, click the Open button and find the file that you have just saved to your floppy. It is a good idea to save often; if you want to preserve the original template on your disk, then first choose the Save As option to give your working file a different name. Now you can alter the template to your heart's content. Hold the cursor over the various buttons on the Composition Toolbar (above) and Formatting Toolbar (below) to see what they do. You can change the font sizes, font styles (bold, italics, etc), and color; the changes will apply just to selected text if any exists. You can change the background color or add a background image (which will be tiled if it is smaller than the screen) by going Format > Page Colors and Properties, or right-clicking and choosing Page Properties.
Next, add to your page a heading "Buildings & Cities in Japanese History", followed by an indented line reading "Course Homepage". After entering the latter text, select it, click on the RIGHT mouse button, and choose "Create Link Using Selected". In the space for the link location, enter:
http://www.columbia.edu/itc/ealac/V3613
Next go to a new line and make a link in the same way to "My Homepage". Here the link should be:
http://www.columbia.edu/~[your Cunic ID]/bc-[your Cunix ID]
This will link to the sub-directory in which you should store any files that you create for your Buildings & Cities project.
To check exactly how your page will look in the browser, click on the "Preview" button (with the Netscape logo). You will be asked if you wish to save the file, to which you should answer YES, and then save the file as "index.html" to the floppy disk that you brought with you. Close the Composer page.
2) Minimize Netscape and open WS_FTP. (If you are doing this on your home computer, for the "Host name," use "cunix.cc.columbia.edu".) Enter your Cunix ID and password and click on "OK". Change the local directory to the floppy drive, and the Remote directory to your public_html subdirectory (by double-clicking on it). NOTE: in 503 Butler, you will need to "Refresh" the directory after each change; on your home computer version of WS_FTP, it should refresh automatically. Then click the index.html file in the local directory to select it, and transfer it to the remote directory by clicking on the right-pointing arrow between the two directories.
3) Minimize WS_FTP and open Telenet to access your Cunix account. (On your home computer, you would use Ewan.) At the $ prompt, change the directory:
cd public_html
Then change the attributes for the index.html file that you have sent to cunix by typing:
chmod a+rx index.html
Even better, you can make sure that the attributes of all the files in your directory (in cases you=ve also changed some other files as well) by using the wildcard asterisk:
chmod a+rx *
Finally, return to the root directory of your Cunix account, and click on AMkDir@ to create a new directory called /bc-[your Cunix ID]. As mentioned earlier, this directory is where you should store any of your files for your Buildings and Cities project. Be sure to include this subdirectory name in any links that you make within your project.
Logout from Cunix, close (or minimize) Telenet, open Netscape, and go
to your own homepage to see if everything has worked properly.
USING IMAGES ON YOUR WEB PAGE
1) Open Netscape Composer, and click on Open to open the text file on the floppy disk that you have brought with you. (If the file is not already in HTML, expand the "Files of Type" list and choose the proper format). You can now make an general changes you please, using the techniques learned above: add a heading, change font size or style, play with the background, etc.
2) Now we will insert an image into the text so that the text wraps itself around the image. First, place the cursor anywhere in the text where you would like it to begin wrapping around the image; then click on the "Image" button (or go Insert > Image). This will open the "Image" tab of the "Properties" box, where you can do all sort of things to manipulate your image. The first step is to choose the image you want to insert: click on "Choose File" (to the right of the "Image Location" window) to locate the image, and double-click to insert it. At this point you should delete all of the path (file:///a| . . .) except for the file name, since the editor will know the disk (in this case it's the floppy drive, but when working at home, it will be your hard disk) and sub-directory (if any) in which you are working; this will assure that it remains a "relative URL," and will remain consistent if the whole page is moved to another site.
Next, choose the text alignment that you want from the row of buttons; since you want the text to wrap, you should choose one of the two on the far right, which give you the option of having the image either on either the left or the right. We'll come back to other settings in a moment, but for now click "OK" to insert the image. The image should appear in the composer--but the text will not be wrapped. This is simply because the editor cannot (for some reason) show it the way that it will actually appear in the browser. To check this, you must now open the file in the Browser, by clicking on the "Preview" button. If you have not already saved the file, you will be asked if you wish to do so: answer YES, or the changes you have made will be lost. This will open a separate screen to show you how your file will actually appear on the Web. (Remember this whole procedure, since you will need to do it frequently.) The text should now appear wrapped. You might want to make a note of how much of the text is actually wrapped, so that any images you insert are below that point. Close the screen to return to the editor.
Now you can make some further adjustments to the size of the image and to the amount of space that appears around it. Click on the image once to select it, and then RIGHT-click and choose "Image Properties". The same box you saw before will open.
You can change the SIZE of your image by changing the figures under "Dimensions". To maintain the proportions of the original image, be sure that the "Constrain" box is checked. (If you leave this box unchecked, you can changes the Height and Width independently, enabling you to distort your image in all sorts of weird ways if you wish.) For wrapping text, the image should normally be in the range of about 150-300 pixels. This will fill up from one-fourth to one-half of a normal screen. WARNING: resizing the image by using the "Dimensions" will result in some degradation of the image, especially if you increase the size; it is better to create the image in the proper size to begin with.
You may have noticed that the text is very close to the image when wrapped. To provide some space, which makes it easier to read, change the variables in the "Space Around Image" section, which will be at the default of "0". Note that you must choose a variable for Left and Right, or for Top and Bottom: you can't choose just "Right" or just "Bottom". The best value is generally about 15-20 pixels for each (a bit less for top-bottom than left-right), but you can experiment to see what you like best. Note that there is also a third variable you can change, for a "Solid Border", which will place a black border around the image. This is a matter of taste; a value of less than 5 pixels generally looks best. After making the changes, click "OK", then Preview in browser (as above) to see what the changes look like. Go back and diddle with them some more if you wish.
If you have another image file on your floppy, you might want to try inserting it further down in the text--just be sure that it is after the point in the text where it has completely wrapped around the previous image, or weird things will happen. You might want to try wrapping it on the other side this time.
Now that you have perfected your page, it is time to upload it to your Cunix account. Simply follow the same procedures that you executed in creating an index.html file above (steps 2 and 3). But this time, save the files not to your public_html directory, but rather to the new "bc-[Cunix ID]" directory that you have created specifically for your Web page. Remember to save both the text file and any image files to which you created links.
If you wish, at this point you can rename your text file "index.html", which will make it the file that comes up when you click on the link to this directory that you previously created. In effect, it becomes the home page for your Buildings and Cities directory, which is something you will want sooner or later. If you do not rename it, then you will get a simple list of files in the directory, and can click on the text file to see what it looks like.
Finally, go back to Netscape and open your own home page, then click
on the link to your Buildings and Cities home page. Hopefully it will appear
as designed. Congratulations!