HINTS ON HOW TO DO THE

MAKE-A-WEBPAGE ASSIGNMENT

USING MOZILLA COMPOSER AND FUGU ON A MAC

 

Can I use Mozilla Composer on my own computer?

Yes.  There is a new version of this software available for free. It is now called SeaMonkey.  Visit www.mozilla.org/projects/seamonkey/ to get a copy to install on your own computer. Note, if you do your work on your own computer you will have to figure out many things on your own and much of the advice below will not apply. Some people chose to use SeaMonkey to design their webpage and save their work on their flashdrive. Then they bring that to the lab and transfer their files to their Eden public_html space using Fugu in the labs.

How do I get to Mozilla Composer on the computers in the lab?

Open (double-click) the Macintosh HD icon on the upper right of the screen. In the window that comes up, open up Applications. All software on the Mac is here. Find Mozilla in the list and open it up to use it by double-clicking it. (See below if it asks about a Profile.) It will open as a browser. Its is best to close the browser window because we want to make a webpage, not look at them. So click the close button (red button) in the upper left of the window. (Also, feel free to close the original Macintosh HD window so you have less clutter on the screen.) Now to start designing a webpage you want to load up the Composer software. So go to the Window menu and use the Composer command there.

When I try to open Mozilla it is asking about something called a Profile. Why?

A Profile is used to save some personalized default settings for you. That would be fine if this is your own Mac, but since the ones in the lab are not, your settings will not really be kept. Nevertheless it may want you to set a profile. When you try to open it, it may ask you to pick a "Profile." If so, click the Create Profile button. When it walks you through the steps, click the next (->) button, then click Finish. This will create a profile called Default User. Finally, select this choice in the list and click the Start Mozilla blue button.

As I am working on my webpage, where should I save my work - both webpages and images?

The best thing to do is to create a folder on your USB flash drive (i.e. thumb drive) for just your web files. A name like MyWebWork for the folder would be good.  When you save your webpage, you should save into this folder.  You should also save any images you want to insert in your webpage in this folder FIRST before trying to insert them in your webpage. (They will not work if you try to save the images in the folder AFTER you have placed them in the page.)

Alternatively, you can save the images and webpage(s) on the desktop (main level of the screen) or in your personal folder (folder with your username) in the USER folder section of the Mac's harddrive. If you do this, you will not be able to get to those files later on other Macs. Also, they will eventually be removed from the original Mac. If doing this, you definitely better transfer them up to Eden before ending your work on the Mac each day, otherwise you will lose your work.

Note, this is your LOCAL copy of the webpage(s) and images.  You later also have to transfer this to your Eden public_html in order for them to be visible on the web.

As with all work you do on the computer, you want to have at least two copies (ie a "backup").  It is recommended that each time you finish work for the day have a local copy (on your USB flash drive) and also a copy on Eden.

I am not sure where to save - what should I do?

First of all, do not have FUGU open while working on your webpage. This will only confuse you since you will also see the copy  in the public_html folder on the Eden server. By closing FUGU that copy will no longer be around to confuse you.  You only use FUGU when you are ready to transfer the latest page and images up to Eden.

Secondly it is strongly recommended that you use a USB flash drive for everything you do in this class.  If you are not using one, you are almost certainly going to get very confused as to where your work is. Assuming you have one, the key to this assignment is to start out by using the New Folder command to make a folder on your disk. Do this by opening (double-clicking) your drive and then using the New Folder command off the menu. Then type in a name for the folder. (We recommend a name like MyWebWork.) Then as you are working with your webpage and images you make sure you place them in this folder.  This is your local copy.  Following this advice (and that below about images) will ensure that you do not run into problems (and mean you will probably have the assignment done in 30 to 60 minutes.)  When you want to SAVE, the way to place items on your USB flash drive is to do the following steps. Use the SAVE AS command off the menu. Select the name of your flash drive off the Where menu list in the middle of the dialog box. After this, expand the dialog box by clicking the downarrow icon located next to the SAVE AS text area. The dialog box will get bigger and show you all the folders on the disk. Now select the folder you want to save into.(Hopefully you made one as explained above.) Now you can use the SAVE button.

One of the reasons people get disoriented when trying to save on the Mac is that it is designed to be multi-user. Although this is a great feature to have, if you are not used to it, you may get all confused. When you identify yourself on that Mac by logging in, a folder is created with your username on it.  Only you can get into this folder. Let us say you are jsmith.  Your folder "jsmith" will be within the User folder on the Macs harddrive. Usually when you first go to save or open a file, the Mac assumes you want to go to your personal folder. So immediately Ms. Smith would see the dialog box saying "jsmith". This would be a great thing if this was a Mac you always used and shared with other people, like in an office some place. However, in the lab, it is not something you want to use.  If you save in this folder, you are saving on the harddrive of that Mac only.  You are not saving on your flash drive. Later when you sit on another Mac, you will no longer see files you placed on the harddrive of the first Mac. Neither will you have the files saved on your flash drive. So effectively you have lost your work.  Meanwhile, on the new Mac, you again see a folder named "jsmith" which is a new folder on the harddrive of a new Mac. Not understanding this you might think to yourself, "but I placed my work in that folder yesterday."  You did, BUT ON ANOTHER MAC!  Thus, make sure you are not saving your work into the folder with your name on the harddrive of the Macs in the labs and you will not run into this problem. Instead, save on your USB flash drive as explained above. One last thing, some people see their username on this folder, and assume that is their Eden space. It is not.  The only way you will see your Eden space and its public_html is by using FUGU and looking on the side of the screen that says "eden" under it.  

By the way, this advice is not limited to just your webpage assignment, but in fact it applies to all work you do in this class.

If I didn't finish my work in one day, how do I continue working on it?  

If you saved the most up-to-date version on your USB flash drive you can continue to work on it there the next time you do work.  

However, if you did not save there the last time you worked, hopefully you at least placed it in your Eden public_html. If not, then you have lost the work.  If it is on Eden, then use FUGU to transfer from the Eden public_html back to the local harddrive of the machine you are working on BEFORE you continue work on another day. Make a folder for this, such as MyWebWork on your flash drive, desktop or within your personal folder in the User folder.

Whatever place you pick, make sure you look for your work in that folder and carefully save updates and new work in the same folder.  Again at the end of this session you have to transfer all the updated files (work) back to your Eden public_html space using Fugu.

I am having trouble reopening my webpage in order to edit it with Mozilla.  What can I do?

Note, you can not double-click the document.  This will open it with a browser, not with an editor.

Instead, open up Mozilla directly. Now, assuming you have indeed transferred the last version of your webpage up to Eden, an easy way to continue working on it, is to visit the page by entering the URL while in Mozilla. If your last version is not on Eden yet, you can select it off your USB flash drive by using the command Open File off the File menu and finding it on your USB flash drive. (See above on how to navigate to your USB flash drive.)

Once you see it, use the command Edit Page on the File menu.  This will open a new window where you can continue working on the page - the title bar of that window will have "Composer" added to it.  Do two things before you continue. Close the original window (where you were browsing the page), so it does not confuse you.  Then do a SAVE AS immediately and make sure you indicate you want to save your work into your local folder - such as MyWebWork on your flash drive. (See question above on how to navigate to find your USB flash drive.)  Make your changes, continuing saving and you will be fine. (Of course, you do have to use FUGU to get the new revised page back to Eden eventually.)

When I use Fugu to try to transfer my local work up to Eden I can not find a public_html and so I can not place my work there. What should I do?

This is because you apparently never made a public_html.  You need to follow the directions in the main assignment under the section "I. Creating your public_html space on Eden". There are two sets of instructions. Follow the set dealing with menus if your account is set up to use menus.  Otherwise follow the second set of instructions.

Also, there is a possibility that once you connected to Eden you accidentally went into another folder. Back up within Fugu until you are at the main level of your directory.  That is where you will find your public_html.

Once you find your public_html, make sure you open up that folder because that is where you will be placing your work..

How do I transfer files using Fugu?  

To transfer them up to Eden, open up Fugu and connect in with your Netid (username). When prompted, supply your password and click Authenticate. After this, FUGU will make the connection and the right side of the dialog box will show your Eden files and will be labeled as such. The other side is your local files on the machine you are sitting at.  Look at the Eden side and make sure you open up (double click) the public_html folder.  Once this is done, one easy way to transfer the files is to find them on the desktop of the machine you are on (find icons in their folder) and drag them from this folder to the Eden side of the FUGU window.   For example, directly open up your MyWebWork folder from the USB flash drive by double-clicking its icon (not using anything inside of FUGU) and position this window such that you can see the icons (your webpage and your pictures) and at the same time some place else on the screen you can see the Eden side of the FUGU screen (which should be set to the inside of public_html). If so, simply use the mouse to drag the icons, ONE AT A TIME, from their original local position to the Eden side of FUGU and let go. (Note, do not drag your complete local folder into the public_html. Nor should you create a folder within public_html and drag into that. Your webpage and each of your images must end up directly within the public_html folder. Not outside of it, nor inside of a subfolder there.)

All files related to your webpage must be moved to your Eden public_html in this way.  This includes the main webpage file and also each and every image.

To transfer from Eden back down to your local machine, as you might have to do to continue to work on another day (see above), do the reverse.

What else do I have to do in FUGU? Isn't there something about setting protections properly on all my Eden public_html files in order that they then become visible to the rest of the world?

Correct. You must issue a command on every file so that other people on the web actually can see them. FUGU is one place you can do this. Once the file (webpage, image, etc.) is on the Eden side of the FUGU screen (in the public_html folder), click on the filename so it is selected (becomes black). Now click on the INFO icon which is located on the toolbar. A dialog box will come up. Under the Permissions section of the dialog box you need to make sure you click OWNER to READ and also WRITE; set GROUP to READ; and also set OTHERS to READ. (Or just type in 0644 in the Octal Mode Representation box.) Make sure you hit apply. You have to make sure you set the permissions for all your files - your webpage, the files with the images in them and so on. When done remember to close the permissions dialog box.

I want to make sure I insert images correctly the first time and not struggle to get them to work right. I heard the steps are very easy. Can you just recap them for me?

There are several keys to doing images correctly. If you don't follow them, you will think your images work but they actually don't. You may not find this out until you lose the points on the assignment.  So make sure you read and understand the following. You need to carefully do these things.

I am having trouble saving images into my folder.  How can I do it?

You can get images from whereever you want.  But many people will borrow images off the web. (Remember, you should only do this for academic purposes. Since many images are copywrited, in most circumstances they should not be used without permisison of the owner.)  Thus you will want to know how to save them while you are in a browser.  Note, you will want to save the image in your local webpage folder (MyWebWork or whatever you called it) next to where you webpage itself is saved. Do not save the image on the desktop directly.

In Mozilla, if you see an image you want to use on your own page, hold down the mouse on the image and a menu will show up. Use the Save Image As command. At this point a Save As dialog box will appear and you should navigate it in the appropriate way to make sure you save the image in your local webpage folder. If you still are not clear on how to navigate the file system in order to save or open things, read info on that above.

In Safari, as you are navigating, if you see an image you want to use, you may be able to just drag it to your folder (MyWebWork) and let go.

If that doesn't work, hold down the control-key while clicking the mouse button on top of the picture.  From the menu that appears, select the command "SAVE IMAGE TO DESKTOP".  An icon represeting that image will appear on the desktop of the computer. You now can drag that image to the correct location where you want to place your image. (MyWebWork folder? See items above on why you should have such a folder.)

Note: in Safari, you may want to do a preliminary step to tell where you want to save images. You do this by going to the Safari menu and using the Preferences command.  Click the general tab and when the sheet comes up, next to where it says "Save Downloaded Files to" switch to OTHER.  This gives you a dialog box where you should navigate to your own local web folder. (Again, if you don't know how to do this, read above.) By doing this, you are indicating that all future images you save should be placed in this folder.


I am not allowed to click "URL is relative to page location", why?????

Because you did not use Save As to place your webpage in the same folder where the images are FIRST before trying to insert the images.  We told you that you had to do that.

Remember, there are three major steps you must do to get your images into your page:

  1. Use Save As to save your webpage (in MyWebWork folder) before it has any images in it.
  2. Place any images you want to use in your folder (MyWebWork)
  3. Use Mozilla's Insert Image command properly, including using the "URL is relative to page location" option  
Later, you also need to use Fugu to transfer the images up to your public_html folder and set their protections correctly.

My image was not inserted correctly, how do I fix it?

Don't bother to try. Instead click on it and delete it. Then read the directions above, make sure you understand them. Then try to insert the image again from scratch.

When I look at my page in a browser I see the images but when other people look at my page they don't see the images. What is wrong?

As you can probably guess, this means you inserted the image(s) wrong. Did you just drag the image(s) to your webpage? We told you not to do that.  Or did you miss part of the directions above? The problem is, the html code is referring to the harddrive of a particular machine, or a USB flash drive and is not referring to your Eden public_html space.  Other people can't see your flash drive, but you can, so it looks right to you but not them.  Edit your webpage, delete the image and try again. This time make sure you understand the directions above about images and then do those steps precisely. Also, make sure you have set the protections correctly (see above.)

I transferred my webpage and/or images in my Eden public_html, but when anyone tries to look at them in a browser, they get an access error or otherwise can not see the page (and/or images).

It could be the page and/or images are not in public_html, but rather some place else.  Some times people put their pages and images on their main Eden space. This is not accessible to the web. Only things in public_html are visible on the web. Check carefully to make sure you actually placed them in Eden public_html. You can see this by opening up Fugu, going to Eden and looking around to check where they are. Again, as mentioned earlier, your webpage and all the images must be directly in the public_html, not outside it, nor inside of some subfolder of public_html.  Instead, when you are looking at the inside of public_html in FUGU, you should see the icon for your webpage (like 110.html) and icons for all the images. (Some people seem to have made folders within public_html and placed things there, this will mean the URL listed in the assignment is no longer correct and you will have difficulty locating your page.)

Most likely however, you did not set the protections as explained in the assignment.  Until you have made items in your public_html readable to the Group and Others, no one can see them.  You set these privs within FUGU once the files have been transferred. Make sure you are setting the privs of the Eden public_html copy and not the copy in your local folder.  The directions on setting the privs are above.

What is the best way to double-check that what the TA sees is correct and to maximize my chances of getting all the assignment points?

When done with everything, log into to a DIFFERENT machine.  Do not insert your USB flash drive.

Open up a browser and visit your page by supplying its complete URL on Eden.  How does it look? Make sure everything listed in the table of the assignment directions is visible on the page. If so, this almost certainly means your TA will see the same thing.

Good luck,
-Jt 9/29/03 (updated 10/3/03, 10/6/03, 6/15/04, 5/25/05 and 6/7/07)