YourBannerAltHere

How To Use This Template Set

SiteBuilder 2

Welcome to SiteBuilder 2. This template set will allow you to build a site in the School of Medicine look-and-feel, or convert an existing SiteBuilder site to the new format. You can use the files in this template directory to create your site. A full tutorial is available.

What's new

  • No more buttons! Links can be as long as needed.

  • Scrolling localnav frame allows for unlimited number of links

  • Style-sheet (CSS) implemented for better accessibility and easier text control

  • Improved documentation

Suggested procedures and notes:

  1. Create or get a new banner graphic: If you have Photoshop, you can use the "banner_starter.psd" template file -- found in images -- to create your own banner graphic for the site. You can also request a banner graphic for your site from IRT Web Help.

  2. Replace the demo banner with your new custom banner graphic throughout the site, including main.html, subpage.html, contact.html and any similar files in the subdirectory.

  3. Update the browser titles of all the template files to reflect the name of your site, including index.html, main.html, subpage.html, contact.html and any similar files in the subdirectory. We recommend ordering from most specific to least, i.e. "Application Form - Fellowships - Department of Departmentology" This is important for searchability. You might want to read the Search Tips page for more about searching.

  4. Fill in main.html with your Home page content. The files of this site use CSS styles to control the fonts. There is a Style Guide to preview all the style settings. If you wish, you can edit or replace the frames_style.css stylesheet with your own settings.

  5. Open subpage.html and Save As to create a new page, with a short, specific name, without spaces, i.e. "program_objectives.html" Fill the page with the specific content and update the browser title. Repeat as needed.

  6. In localnav.html, change "Site Name Here" to that of your site and change the links. Since the Localnav frame is scrollable, there is no limitation on the depth of your localnav.html file. The headers and links contain stylesheet formatting. Link headings use the style "navhead" with a larger initial cap using the style "navheadcap" and link text uses the style "navlink." You can read more about available styles in the Style Guide. For best results, copy an existing block of arrow graphic, link text and it's <br> tag and paste where you need it, then edit the text and link URL. For multi-line links, you can use the two-line-with-spacer approach indicated in the localnav template file, or just let the text flow below the arrow graphic.

  7. Pages are provided to create Faculty listings: faculty.html is the main listing page. You can create your own local bio pages either with a photo - resume_photo_template.html - or without a photo - resume_nophoto_template.html. You can also link directly to the Faculty Research Database and/or the Find a Physician database. Instructions are on the template pages linked above.

  8. The subdirectory template is provided for optional multi-level navigation. To use this subdirectory, duplicate it at the desktop level of your computer, in your local files directory, and rename it for your topic. Links to the subdirectory or it's index.html file should have the target = "_top" Links to individual files at either level should have the target = "main" to ensure that they appear in the large frame, and not that of the localnav. The example provided in this template set uses the "expanded link effect," described below. If you want to have subdirectories to organize your content, but don't want the left navigation links to change from top-level to subdirectory, you can save a copy of your top-level localnav.html file into the subdirectory. Your subdirectory localnav.html file can also be a completely different set of links attuned to the subdirectory topic, in which case it's good to have a link back to the top level of the site.

  9. The expanded links effect -- where clicking on a subdirectory link appears to "expand" the navigation links to reveal a series of additional links to subdirectory pages -- works because both the main top-level directory and the subdirectory have the same file structure, i.e. index.html, localnav.html and main.html. Although the subdirectory is like an entirely new site to the browser, it has the same look-and-feel to the user. When the subdirectory link is clicked, it appears that the navigation links "expand" to provide "hidden" page links. The subdirectory localnav.html file should have all the same links as the localnav.html file in the top-level directory, plus the additional sub-topic links. We suggest that you work out all the links in the top-level localnav.html file, then Save As... into the subdirectory. Dreamweaver will track the upper-level links so that they still work in the subdirectory. You can then insert new links to subdirectory pages. We suggest using a different color arrow icon, inset using 3 non-breaking spaces (Mac: apple-shift spacebar; Win: control-shift spacbar) and apply the "subnavlink" style from the cascading style sheet (Text > CSS Styles > Subnavlink) to the link text to provide a highlight color to these links and make them stand out.

  10. Each Sitebuilder page contains a table at the bottom with "Printer-friendly" and "Home" links, copyright and last modified date. The printer-friendly link uses a JavaScript pop-up window to allow the user easier printing. You can also use this script to create other kinds of pop-ups, such as slide shows and details. Your links will need to take this format, with no target setting: javascript:openWin('URLgoesHere');   - Example Link (internal) | Example Link (external) ; The home link takes users to index.html in the file's directory, to provide for users who arrive at the page without frames. Copyright text should be updated if later than 2003. Last modified date is automatically generated for files hosted on www-med.stanford.edu, using a server-side include called an echo variable: <!--#echo var="LAST_MODIFIED"--> If hosted on another server, this feature will only work if the server is configured to permit it.

  11. You can use FrameMaster2 to produce URLs that will show a given subpage inside the site's frames environment. Add "/fm2/?/ " after "www-med.stanford.edu" in the URL, and "&" in front of the page URL, i.e. "&subpage.html"
    Example: http://www-med.stanford.edu/fm2/?/path/to/yoursite/&subpage.html
          Example: http://www-med.stanford.edu/fm2/?/sitebuilder/yoursite/&subpage.html
    Don't forget to set target="_top," if linking from a SiteBuilder or other frames-based site or page.

JavaScript Pop-up IconPrinter-friendly page HomeHome Icon

This document was last modified: Wednesday, 10-Dec-2003 16:48:48 PST
Copyright © 2003, Stanford University School of Medicine. All rights reserved.