If you follow the instructions below, your website should come up by typing http://www.duke.edu/~yourloginname/ into a browser. See the Journal page for some guidelines about content acceptability. We will be using Seamonkey’s Composer to create our pages because it offers a WYSIWYG environment that will make creation and updating much easier. So, the first thing to do is install Seamonkey.

Installing Seamonkey

  1. Download Seamonkey and save it to your Desktop.
  2. Right-click on the package and select Extract->Extract Here. This may take a moment, you will see a progress bar pop up.
  3. You will now have a seamonkey folder on your desktop.
  4. Right-click anywhere on your desktop, though not on the seamonkey folder or any other icons.
  5. In the menu, select Create New->Link to Application.
  6. A dialog will pop up with the name of the link highlighted, right now it is "Link to Application". Edit this to say Seamonkey.
  7. Next go to the Application tab.
  8. Next to the Command input box there is a "Browse..." button, click on it.
  9. In the dialog that comes up, click the link to Desktop in the left-hand navigation bar (it should be at the top of the list and has a weird icon). Now, in the right-hand side pane, go into the seamonkey directory, find the file called seamonkey, and then double-click on it (or single-click and hit open). This should fill in the Command input box.
  10. Click OK at the bottom and the new shortcut will appear on your desktop.

Using Composer

Composer can be opened by first opening Seamonkey and then clicking on the middle icon (pen & paper) in the bottom left hand corner of the window or Ctrl+4 may work also. Composer has the usual menus, a couple toolbars, a main content pane where you will do your editing, and some tabs at the bottom. The best way to learn how to use Composer is to try to make a page and then just play around with the buttons and menus to see what they do. Below are some necessities to get our pages to work and then some tips on common features you will use.

Necessities

  • You must save all of your files in the public_html folder in your home directory or you will not be able to see your site on the web. In the save dialog, the left hand side should have a link to your home folder (it will say Home or your user name). Click then then navigate into your public_html folder then supply a name for the page (something.html) and save. If there is no home button for some reason, your home directory depends on your user name. Let's use js421 as an example; for this name the home directory would be /afs/acpub.duke.edu/users/j/s/js421. If you cannot find yours ask the instructor or TA for help.
  • When using graphics on a page these must also be saved to the public_html folder. So, whether you make them yourself or download images from the internet, make sure to save them to the proper place before telling Seamonkey to put them on your page!
  • Everyone will have at least one page on their site, though splitting your site up into multiple pages is preferred. The page that people see when they type your address into their browser must be called index.html (this is a forced convention by the internet itself, you cannot fight it). Most or all of your other pages will be whatever you want to call them followed by .html (e.g. links.html or games.html). I would recommend having your index page have a brief introduction to yourself and then having several separate pages; ones for your journal, games, etc. Most importantly, this is *your* site so make sure you make it your own through the design and look!
  • The filename you choose does not have to match the name you give for your page (see bullet 2 in the below section to learn about page names). If you name your page and then go to save, Seamonkey will probably fill in the filename the same as what you named the page. I would recommend changing this. For example, you may want your starting page to be named "Alex’s Video Games Homepage", but you need the filename to be index.html. Filenames are easiest to work with if they are short and simple and do not have spaces or special characters like single quotes, exclamation points, question marks, etc.. I suggest sticking to filenames like games.html, journal.html, links.html, and so on.

Common Uses

  • Most people do not want a simple white page with black text. These settings can be adjusted through the Format menu. The "Page Colors and Background" option will let you change text, link, and either a color or image for the background. These are page-wide options and will effect everything for the particular file you are working on. To change only a portion of text you can use the Font, Size, Text Style, and Text Color options in the Format menu; it is very similar to how a word processor (like MS Word) works.
  • Also in the Format menu is "Page Title and Properties." The name of your page is what appears at the top of the browser window. The author and description options should be self-explanatory and you should provide information for both.
  • Links are some of the most important things a web page has because they are what allow users to click through to other pages on your site or other sites altogether. For example, this is a link back to the home page and this is a link to Python's site. When your mouse hovers over a link the icon typically turns to a hand and the bottom of the browser displays where the link points. To add these to your page with Composer you click the Link button with the chain graphic, go to Insert->Link in the menu, or use the Ctrl+l shortcut. A dialog pops up that asks for the text and location. The text is what shows up on the web page, up above it is 'this' in both cases. The location is where you want the link to go. For your own pages just type the name in (e.g. index.php) or for other sites type the whole URL for an outside site (e.g. http://www.python.org). The "link is relative" checkbox will probably be automatically checked, but does not really matter for our purposes.
  • When inserting graphics, setting your background, or inserting links Seamonkey has the tendency to use incorrect paths for the web that will result in your images/background/link not working whenever you use the Browse function of the file dialog. This can be fixed in two ways. Either avoid using the browse button by simply typing the name of the file (background.jpg) or edit the path Seamonkey puts there to only have the file’s name. Note that this only works if your files are all stored in public_html, but if you are using subfolders you probably know enough to adjust the above suggestions. If not, ask the instructor for help!
  • There are many other things in the Insert menu that you may want to put on your page such as Horizontal Rules and Tables. Try these out to see what they do... remember you can always use the undo functionality if something gets messed up.
  • There are several tabs on the bottom of the window, as mentioned earlier. The view you will most use is Normal, which is they WYSIWYG, word processor-like functionality. Preview may or may not work, I would recommend having your site open in Firefox or Konqueror to see what it looks like on the web. HTML Tags and HTML Source can be insightful if you would like to learn more about how pages and HTML work. The Tags merely shows you your page with yellow tags around the content associated with various tags. Source shows what the actual HTML the browser processes to display (and what is stored in your saved files).