tutorial web

Using Web Design Templates                                  ____

UIWP 2010 Summer Institute

Creating a New Folder

Make sure to create a new folder that will house all of your webpages and images. In the Finder view (make sure that you minimize any programs that you have open) go to File --> New Folder. Rename the folder to your choosing.

Downloading a Template

Download a web design template. A good place to start is Open Source Web Design: http://www.oswd.org/.

Browse through the different templates. To view a template, click “View.” If you find a template that you like, click on “Download” to begin the download process. Click “Ok” when it asks you if you want to view the compressed file using “Stuffit Expander.”

Once you download the file, a folder will appear on your desktop that contains the style sheets of the template (which will end in .css), in addition to .html files that you can modify. The “home” page of the template that you viewed is most likely called “index.html”.

IMPORTANT: Make sure to click the contexts of template folder into the folder that you just created that will house all of your webpages.

Editing the Template File Using SeaMonkey

If you simply click on “index.html” you can view the file, but not necessarily make changes to it. To do that, you will need to open the file up using a web editing program like SeaMonkey. Within SeaMonkey, you need to be in the Composer mode in order to make changes to html files. There are a couple of ways to open the template file using SeaMonkey:

Find the file that you want to edit (most likely “index.html”) by opening up your folder on the desktop.

Open file with 'SeaMonkey.' Once you've opened the page in SeaMonkey, go to 'File,' then 'Edit Page.' This should open the page in the Composer mode.

OR

You can access the Composer mode by clicking on the SeaMonkey icon in your Applications folder or in your dock, then clicking on File --> New --> Composer Page OR Window --> Composer.

To edit the template file, you would then go back and click on File --> Open File and choose “index.html” that's within your webpages folder on your desktop.

6-28-10 Adapted from work by Hannah Lee with materials adapted from http://www.lis.uiuc.edu/itd/tutorials/SeaMonkey/