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 ownload a web design template. ! good place to start is "pen #ource $eb esign% http%&&www.oswd.org&. 'rowse through the different templates. (o view a template) click *#iew"+ If you find a template that you like) click on *Download+ to begin the download process. ,lick *$%+ when it asks you if you want to view the compressed file using *#tuffit -.pander.+ "nce 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. (he *home+ page of the template that you viewed is most likely called *inde&"'tml+. I(P$)T*NT+ (a%e sure to ,li,% t'e ,onte&ts o- template -older into t'e -older t'at .ou /ust ,reated t'at will 'ouse all o- .our webpages" 0diting t'e Template File Using Sea(on%e. If you simply click on *inde..html+ you can view the file) but not necessarily make changes to it. (o do that) you will need to open the file up using a web editing program like #eaMonkey. $ithin #eaMonkey) you need to be in the ,omposer mode in order to make changes to html files. (here are a couple of ways to open the template file using #eaMonkey% Find the file that you want to edit (most likely *inde..html+) by opening up your folder on the desktop. "pen file with /Sea(on%e../ "nce you/ve opened the page in #eaMonkey) go to /File)/ then /0dit Page./ (his should open the page in the ,omposer mode. "R 0ou can access the ,omposer mode by clicking on the #eaMonkey icon in your !pplications folder or in your dock) then clicking on File ! New ! Composer Page "R Window ! Composer" (o edit the template file) you would then go back and click on File ! $pen File and choose *inde..html+ that/s within your webpages folder on your desktop.

1234256 !dapted from work by 7annah 8ee with materials adapted from http%&&www.lis.uiuc.edu&itd&tutorials&#eaMonkey&