Tutorial for SiteBuilder 2

This Step-by-Step Walkthrough is designed to give you everything you need to make your own School of Medicine web site. In the following pages, we will provide you the opportunity to download all the parts and templates you will need to make your own site. This walkthrough endeavors to clearly explain, with text and example pictures, how to go about putting your site together.

Your finished product will resemble

Image of finished frames

About The New Template Set

To use SiteBuilder 2 effectively, you will need to download the template set (will appear in a new browser winow; click close button to return here). This is archived in a number of compression file formats, i.e. .zip and Stuffit. When you have decompressed the archive, you will have a directory/folder on your desktop called "yoursite." This is the template set, which contains all the files you will need to construct a SiteBuilder 2 site. You can preview the template set here (will appear in a new browser window; click close button to return here).

Documentation and Style Guide

The template set contains two special documentation files (pages will appear in a new browser window):

documentation.html - The documentation.html file expalins the differences between SiteBuilder 1 and SiteBuilder 2 and provides some helpful hints and pointers.
style_guide.html - SiteBuilder 2 takes advantage of CSS style sheets, which unify the look and feel of pages across the entire site. style_guide.html demonstrates the different styles pre-defined for your use in frames_style.css, which is included in the template set.

"yoursite" file inventory

Here is an inventory of the files and directories you will find in the template set, with a brief description of each (pages will appear in a new browser window):

Essential files

index.html - framing document and default page for any directory on Luge (www-med.stanford.edu).

localnav.html - file that fills the left navigation frame with your site's links

main.html - initially displayed page in SiteBuilder 2, a.k.a. the "Home" page

frames_style.css - controls CSS styles for text on all pages

Other files

subpage.html - stationary for creating new pages in site

documentation.html - internal documentation file

style_guide.html - guide to CSS text styles

contact.html - a default file for your contact information

faculty.html - a default file you can use to list faculty; links to 2 default resume page templates

resume_nophoto_template.html - resume template without photo

resume_photo_template.html - resume template with photo

images - directory for site-wide graphics resources; contains many default graphics and icons

subdirectory - template set for subdirectories...essentially a site-within-the-site

index.html - framing document and default page for any directory on Luge (www-med.stanford.edu).

localnav.html - file that fills the left navigation frame with your site's links

main.html - initially displayed page in SiteBuilder 2, a.k.a. the "Home" page

subpage.html - stationary for creating new pages in subdirectory

images - directory for subdirectory graphics resources

Before moving on

To begin the process of developing your site, you will want to move the "yoursite" directory to wherever you want to keep the local version of the site on your computer. Top of the "C" drive or the top of your main local hard drive is very appropriate, but you can put it anywhere on your computer that you like.

Although it's not required, it's good practice to rename this directory/folder to be the same as your host directory on the server, or what you expect this directory to be named when you get hosting on Luge. The name of your department for example. We suggest you avoid spaces in any file or dirctory names associated with Web sites, and it's best to always use lower case letters, as URLs are case sensitive, and it's easier to remember all lower case.

Checking your work

As you work on your new site, you can preview your work in your browser by using the command sequence File > Open, then browsing to the directory and opening the "index.html" file to view the site in frames, or to "main.html," or any subpage. This way you can develop the site befor it is hosted on a Web server, review it, show it to your supervisor, etc. all before the public can view it. All functions work using this method except that "index.html" won't be the default file for your local directories. All this means is that if you link to a directory and test it in the browser you will get a list of directory's files instead of auto-loading index.html. Simply browse to it and open it to continue.

If you are developing live on a Web server, you can put the site's files to the server and then test the site in your browser using the site's URL.

Next-->