Templates and Instructions

This information is for UM Libraries' staff.

• Review the Web Best Practices before you begin.
• See Instructions below for how to use the templates.

Instructions

1. Open a template. Based on the examples, choose the layout which best suits your needs. Choose the appropriate link in the "Template" column above to go to the HTML mark-up for this template.
2. Copy the template code. With the template mark-up visible in your browser, go to Edit > Select All. Copy the highlighted selection by choosing Edit > Copy.  NOTE: Be sure to use Select All so that the entire template is copied.
3. Open a new document in "Notepad." Go to the Start menu button in the left-hand corner of your screen, and go to Programs > Accessories > Notepad. An "Untitled" Notepad document will open.
4. Paste the template code into the Notepad document. In the Notepad document, choose Edit > Paste. The complete code you copied from the template will appear.
5. Name your document and save it as a web page.
   1. In the Notepad document, choose File > Save.
   2. Choose the location on your local computer where you would like to keep the document while you work on it (e.g. My Documents).
   3. Enter a new File name that reflects the content of your page (e.g. "schedule.html" or "itd_staff.html"). Use lowercase letters, with no spaces. Make sure that you include the file extension .html at the end.
   4. Change the "Save as type" from the default setting to "All files."
   5. Click the Save button.
6. Edit the code and add the content in "Notepad." Delete all brackets [].
   1. Follow the editing instructions embedded within the template carefully. Replace all bracketed text (e.g. [Add YOUR page title here]) with your own information, deleting the brackets. Pay attention to the comment tags (e.g. <!--Stock Meta Tags DO NOT EDIT--> ) for instructions.
   2. See Web Best Practices' Using the Libraries' Templates for a list of the elements you will need to change.
   3. In the interest of maintaining a consistent look and feel to the UM Libraries' site, please adhere to the UM Libraries' Web Color Palette and Web Best Practices' recommendations for Page Design.
   4. Save your document often while you are working.
7. Preview your new page in a browser.
   1. Save your "Notepad" document again.
   2. Keeping "Notepad" open, open the browser of your choice (e.g. Netscape Navigator). Go to File > Open File in the browser. Select your web page (from My Documents or wherever you saved it in Step 5) and open it.
   3. The browser will display your document as a web page. DON'T PANIC: your page WILL look a little funny! The colors will be wrong and the header/footer will be missing. These things are controlled by the Libraries' style sheet and will reappear when you upload your page to the server.
   4. Make further changes, if needed, by continuing to edit your text in "Notepad." Check your adjustments by saving the "Notepad" version, and then refreshing the page in the browser window (e.g. click the Reload button at the top of the browser window, to the left of the URL).
8. Check for mistakes in your mark-up using the W3C validator. This tool from the World Wide Web Consortium (W3C) will point out errors in your HTML. Even if your page seems to display correctly, checking it with the W3C validator is a key step to helping you catch (and learn from) your mistakes.
   1. Go to the W3C Mark-up Validation Service page.
   2. Under Validate by File Upload, use the Browse button to access your document on your computer. Choose your file, and then click on the Check button. If you are error free, the page will display the message "This Page Is Valid HTML 4.01 Transitional!" in green. If you receive the message "This Page Is NOT Valid HTML 4.01 Transitional!," in red, go back to your file, fix the mistakes, attempt the validation process again.
   3. Problems? If after several attempts at fixing your mark-up you still can't figure out what's wrong, e-mail webservices@itd.umd.edu.
9. Publish the page to the Libraries' web site with Webspinner.
   1. When you finish editing your code, log into your Webspinner account. Don't have one yet? Request a Webspinner account. If needed, refer to Staff Learning & Development's illustrated tutorial: Using Webspinner.
   2. Select the appropriate directory where you want to load your file (e.g. /groups).
   3. Select New File, and enter the File Name (the name of your document, ending in .html).
   4. Click on Browse to upload the local file to the Libraries' server.
   5. Click on Create File. Your file should appear in the file list box.
   6. Launch a second browser and type in the URL (web address) of your file to view it. For example, if your file were called itd_staff.html and you uploaded it to the /groups directory, then the full URL would be: http://www.lib.umd.edu/groups/itd_staff.html.
10. Double-check your work: view in different browsers, check links, make sure brackets are deleted.
    1. Look at your live page in multiple browsers--Netscape Navigator, Mozilla Firefox, and Internet Explorer, at least--to make sure the display is correct. You may also want to test important or high-level pages in Macintosh Safari (Web Services has a Mac which we will be glad to let you use for this purpose).
    2. Click on all of your links to make sure that they work.
    3. Make sure you replaced ALL of the [bracketed] text in the template with the correct information, and deleted the [ ]. Don't forget the page title at the very beginning of the template, and the Information Provider e-mail link at the very end.

Questions, suggestions or ideas? E-mail webservices@itd.umd.edu.

return to top