Creating Web Pages with SimpleSite


What it Does
SimpleSite allows you to create and publish a Web site by typing course information into a template. SimpleSite translates the template into a page that you can publish to the Web with the click of a button. You must use Internet Explorer 5+ or Netscape 6+ to be able to work with the templates. Also, since you create and save your webpages online, you do not need to worry about transferring your files using the SSH FTP program mentioned above (“Managing Web Publishing Folders with SSH Secure Shell FTP”).
Begin Creating Web Pages with SimpleSite
  1. Go to the Catalyst Web site: http://catalyst.washington.edu.
  2. Log on to the Catalyst tools with your UW Net ID and password, and select “SimpleSite” from left-hand menu. If you have never used a Catalyst tool before, you will be prompted to enter your name and contact information.
  3. You should now see the SimpleSite welcome screen. Before you can work on any site, you need to select it from the drop-down list of available sites. The list will include your student account (students.washington.edu/yourUWNetID).


  4. Screen shot of SimpleSite welcome page

  5. You may select a template for your site by choosing “Select a default template set for this Web site” and clicking the “Next” button. You will be presented with a set of classic and enhanced templates. Choose the style you would like to use and click the “Save” button.
  6. You can change the color of your template by choosing “Manage the style sheets for this Web site” and clicking the “Next” button. Select different preset styles from the drop-down menu “Blue Sky,” “Cascade,” etc., and choose “Preview” to view samples. When you have selected a style, you can choose “Set as Default” to make it your default setting. “Edit this Style Sheet” will allow you to change the preset colors and font sizes to customize this style sheet.
  7. Begin constructing your site by selecting the “Work on this Web site” option and clicking “Next.” You will see on the left-hand window with your student (student_html or public_html) Web accounts and a workspace on the right.


  8. If you plan to create Web sites for multiple courses this year, you should create folders for each course. To create a folder, make sure the folder “public_html” or “student_html” is highlighted in the left-hand side of the screen, and then choose the “New Folder” button. In the line entitled “Unique folder name,” give your folder a distinct name (for example, “111r”), and click the “Next” button. Your new folder will appear under your student or staff Web account.



  9. Shot of SimpleSite folder creation screen

  10. To create a home page, make sure your newly created folder from the left-hand side of the screen appears yellow-highlighted (click on it if it does not) and select “New Page” from the options at the top of the page. Select the “Home Page” template under ­­­­the “New page or page element” options. The name “index.shtml” will automatically appear in the “Unique file name” box. Choose “Next.”

  11. Shot of SimpleSite page creation scren

  12. Begin filling in the template. You can edit any section by clicking the “Edit” icon:

    Screen shot of SimpleSite edit icon
  13. If you do not want any of the template sections to appear on your page, check the “Hide” box next to that section.
  14. The home page template contains “Content section” and “Journal” options. The journal allows you to post date and time-stamped information such as announcements. The content option allows you to present information under headings and without date and time stamps.


  15. Screen shot of SimpleSite Home Page Template

Add Images
  1. To add images, choose the “Insert/modify image” icon from the toolbar at the top of the template section.
  2. Screen shot of SimpleSite image toolbar

  3. If you already have images saved in your Web publishing folders, use the “Select” button next to the “image location” line, and choose your image from the left-hand column. If you are just starting out, Catalyst will allow you to upload an image from your computer by selecting “Browse” next to the “upload image” line. Use the window that appears to find your image and click “Open.” Save the image in the same folder as your webpage by clicking “Select” in the “location to save” line and left-clicking your webpage’s folder in the left-hand column. The file-location will now appear in the “location to save” line. Now select “Upload,” and the image’s filename will appear in the “Image location” line at the top. Click “OK” to finish. You should see the image appear in the section of the template.
  4. To add a group of links to navigate your course webpage select “Group of links” from the drop-down menu in any column (headers will create horizontal link groups, while left or right columns will create vertical ones). A template for inserting links will appear, which looks like:


  5. Screen shot of SimpleSite link options

  6. Type text that describes the link in the “Link” box, and then click the link icon:
  7. Screen shot of SimpleSite link icon

  8. In the box that appears, type the complete URL, beginning with http://www, for any links external to your own website. For linking to pages you’ve created, simply type the filename of a file within the same folder, ending in “html” or “shtml”.
  9. Click “OK” when done.
When you have finished your page, choose “Preview.” If you are satisfied with the page, click the “Save and Close” button. Doing so will automatically publish your page to your Web site.

Add another Page
  1. To add another page to your site, click on your folder icon and select the “New Page” button.
  2. Select a template from the “New page or page element” menu.
  3. Choose “Preview,” then “Save and Close” when you have finished.


  4. Screen shot of SimpleSite Page creation options

Add Global Navigation
  1. Once you have created a set of pages, you can link all the pages in the site by creating a global navigation page. The global navigation is another .php file that becomes a part of your other pages. To create your global navigation page, click on your folder icon and select “New Page.” Choose “Global navigation” from the “New page or page element” menu. The name “navigation.shtml” will automatically appear in the “Unique file name” box.
  2. On the global navigation page, type descriptive names for your Web pages in the link boxes. Click the link icon. In the “Insert/Modify Link” box that appears, click the “Select” button and click on the icon for the page you want to link to. Click “OK.”
  3. Screen shot of SimpleSite link modify page

  4. When you have set all the links, choose “Save and Close.” To add the navigation links to each page, click on that page’s icon and choose “Edit Content” from the options that appear. On the page template, decide where you want to position your navigation and select “Global navigation” from the drop-down menu. From the navigation options that appear, choose the filename “navigation.shtml” that appears after your folder name. Choose “Save and Close” when you have finished.