Template from CWRUkit 2

Office of Web Development

Web Tips - Javascript for Spotlight Section

Search our Site!

Creating the "CWRU's Spotlight Site" feature

Many of our pages have a running sidebar down the right-hand side of the page. The top element in this table is a "CWRU Spotlight Site". We wanted to come up with a way to draw attention to some of our departments and Centers here on campus that have taken our templates and used them to build their pages.

The challenge was to come up with a system whereby different sites could populate this area of the page, and when the user would see a graphic they would also be able to read a little bit about the site. I wanted to include tips about how this Department or that had customized the template for their own personality. I also wanted to use this area as brain food for pointing out something interesting, new, or creative that they had done.

Could I include a graphic? How about also enabling a link where someone could launch to a specific website and check it out for themselves? Now, how about tying all three elements together? When you've figured out how to fly in all three elements, don't forget our original objective; make it dynamic or random so there's a different featured site everytime you visit the page.

OK, enough with the background info... I'll tell you how we did it.

There's a javascript embedded in the page (you could link it if you want), with an array of 10 items. When you call the page and it loads, one of these items is chosen at random. It then populates that part of the page as our "Spotlight" When you go to another page, or you refresh the page, you'll get a different item. Try it now!

Here is the code to make it happen:

<!-- Begin
var a = Math.random() + ""
var rand1 = a.charAt(5)
quotes = new Array

quotes[0] = " <b>CWRU Undergraduate Admissions</b><br><div align='center'><img src='images\/cap_ugadmis.gif'> </div>One of the first sites we worked on, this site has been live for over a year. The menu uses our hidden\/visible layer technique that is found on CWRU's homepage. While this is a little buggy in some browsers it has proven to be a good choice for this particular site. Many links can be accessible from your homepage this way. The subpages of the site are built from the first CWRU template. Also of note is the random picture that features several different people and a quote from them about their experience at CWRU. Different colors for this area give the site a dynamic look.<br><div align='right'><a href='http://www.cwru.edu/ugadmis'>See the site.</a></div> ";

quotes[1] = " <b>University Farms Website</b><br><div align='center'><img src='farm.jpg'> </div>Tom Fulton designed this site for the Squire Farms Valleeview and Valley Ridge Farms. The colorful site uses our hidden\/visible layer technique that is found on CWRU's homepage, but in a different way. Tom has placed graphics and other elements inside the layer, then made them visible by way of a mouseOver. While this is a little buggy in some browsers it has proven to be a good choice for this particular site. Note also how he has used the CWRU basic design and modified the look by customizing it with complimentary colors.<br><div align='right'><a href='http://www.cwru.edu/menu/farms/'>See the site. </a></div> ";

quotes[2] = " <b>Dental School - Alumni Affairs</b><br><div align='center'><img src='images\/cap_dentalsite.jpg'> </div>Tom designed this site from our CWRUkit Template for the Dental School's Alumni Affairs site.<br>It mainly serves as a front page for a menu that links various pages pertaining to CWRU, and the School of Dentistry. The contact at the bottom of the page in the imagemap, has been routed to an existing contact page. It doesn't always have to go to an 'e-mail the maintainer' link. If you have an existing page with multiple contacts for your department, use it!<br><div align='right'><a href='http://www.cwru.edu/dental/casewebsite/41/dentalalumni.htm'>See the site.</a></div> ";

quotes[3] = " <b>Old Site Template (blank)</b><br><div align='center'><img src='images\/cap_blanktempa.gif'> </div>Do not use this Template. <br>Yes, that's right. This is an old design that is no longer supported by the Office of Web Development.<br>Yes it is our design, but we think that we have a better template with our current one. <br>Similar to the new template, this older one used the class='nav' type of cascading style sheet system to activate the rollovers for the menu. This was a good template while it lasted I guess, but we have further refined our templates and methods of doing things. Many are spotlighted in this section. This is as good a reason as any to download the new template!<br><div align='right'><a href='http://www.cwru.edu/webdev/toolbox'>Browse the toolbox. </a></div> ";

quotes[4] = " <b>A Page Using Forms<br> - from CWRUkit3</b><br><div align='center'><img src='images\/cap_formpage.jpg'> </div>Included in the new kit is a template for creating FORMS. A simple 'mail' form is included which will generate an email back to whoever you want, such as the maintainer of your site or a particular Professor.<br>Additional fields can be added later to allow for questionaires or miscellaneous data collection. Just create your pages, place your content into them, name your fields, change a few links and soon you'll be receiving your data in an e-mail. It's easy! Try it.<br><div align='right'><a href='http://www.cwru.edu/webdev/toolbox'>Download the Template. </a></div> ";

quotes[5] = " <b>Department of Bioethics</b><br><div align='center'><img src='images\/cap_newbioethics.jpg'> </div>Another site done with... you guessed it, our Template. This one has been customized in many different ways. We took the colors of the Department's newsletter and incorporated it into the pages. By changing the top graphic, and editing the stylesheet we came up with a site that fits perfectly with the Department's need for personalization. Yet, none of the pages stray very far from the confines of the Template that it was built from. Also of note; the 'Faculty Spotlight' on the homepage draws attention to a different faculty member at different times of the day.<br><div align='right'><a href='http://www.cwru.edu/med/bioethics/bioethics_n.htm'>See the site. </a></div> ";

quotes[6] = " <b>Office of Audit Services</b><br><div align='center'><img src='siteaudit.jpg'> </div>One of the first sites we worked on, this site has been live for over a year. Kevin built this from the original CWRU template (slightly different from the current one and no longer available or supported). It is a good example of how that first CWRU Template could be customized to reflect a particular Department or Office within CWRU and still keep the basic look intact. One thing to notice about this site is the Feedback Form that is found at the bottom of the menu. When you go to that page you'll notice how we've assigned style classes to the form elements that match the sites look. Remember, you can assign style sheet classes to ANY element within an HTML page. <br><div align='right'><a href='http://www.cwru.edu/president/audit/audit.htm'>See the site. </a></div> ";

quotes[7] = " <b>Office of University Communication</b><br><div align='center'><img src='images/cap_univcomm2.jpg'> </div>Although the Template was not strictly adhered to in the original design, it does have the CWRU look and feel. We designed this site as a way to publish all the news stories that come out of the University and are seen in Campus News. Two similar templates control all the pages within these areas. Note the elided black bar at the top dividing the banner from the content. Pop-outs were used to facilitate navigation, although not generally recommended. They are rather tricky to maintain, and have issues of cross-browser compatibility. Plenty of photographs, use of white space, and a custom colored scroll bar make this site easy to read, and pleasing to the eye.<br><div align='right'><a href='http://www.cwru.edu/pubaff/univcomm/univcomm.htm'>See the site. </a></div> ";

quotes[8] = " <b>Share the Vision Poll</b><br><div align='center'><img src='images\/cap_visionpoll.gif'> </div>One of the more recent additions to CWRU's web presence is this site. Designed by Tom Fulton using the CWRU Template this is a very good example of staying within the boundaries of CWRU's basic look, while still allowing some freedom of customization. Notice his use of the stylesheet to color the top page name element, and use of the same stylesheet element to match the search button with the rest of the page.<br><div align='right'><a href='http://ess.cwru.edu/vision'>See the site. </a></div> ";

quotes[9] = " <b>Office of the President and Provost</b><br><div align='center'><img src='images\/cap_prespage.gif'> </div>Another new site created from our Template, found here in the toolbox. President Hundert's new Vision Statement can be found here, as well as links to several speeches given by James Wagner and Edward Hundert. A well designed, clean, concise site that's easy to manage on the back-end, yet - considering how much content is here - is still easy to navigate through.<br><div align='right'><a href='http://www.cwru.edu/menu/president'>See the site. </a></div> ";

// sample from webdev Spotlight Site javascript
var quote = quotes[rand1]
document.write(quote);
// End -->
</script>

Take everything from the <script> to </script> and place it in your page.

Notice how each line in the array can contain text, graphics, hot links, etc. This is great because you can have things that appear to be random, yet are connected with other things within that cell. When a graphic comes into the cell, it is connected to the link that goes to that site, and the text that describes things to look for once you get there.

I'm sure you can think of another way to use this script, and if you do come up with an application for this, I'd love to hear about it. Drop me a line at kla3@cwru.edu or call me on extension 3447.

Hope this helps!

Kevin Adams
Assistant Director,
Office of Web Development
Case Western Reserve University

CWRU's Spotlight Site!

See how we did it!

WebDev Tip of the Day!

See how we did it!

News

New HomePage Launched!

We have been working on a new design for the Office of Web Development Homepage. We wanted to sample some of the technologies and techniques that we use here at CWRU in our own pages. This is the news area, which contains a server-side include that calls a text file from our root directory. This enables us to have links to other things within the site like our toolbox and Tips and Tricks page for instance. They can then be edited easily and updated in ALL of our pages by modifying this one text file. (It's found in the root of webdev as news.txt)
Ask us about this, we'll help you do the same thing on your site.

GOOGLE SEARCH

We've set up Google as the primary search engine for CWRU. We've also configured it to search from within our Web Development directory when you're searching from our pages. You can set up Google as your primary search engine on your site by following the instructions found here. Or just click on the 'WebTip' icon.
This functionality has been live on the CWRU home page as of Monday Oct. 4! Click on "search" in the upper left-hand corner of the main CWRU homepage. Check back here and let us know if you find this helpful, or if you need help in setting it up on your own departmental page.

New Web Site Account Requests

A Project Inclusion Request Form is needed in order to create a CWRU web-site account. You must represent a University-affiliated organization. The same form is used to update the information (such as web maintainer) for an existing account. Please download the form that is most appropriate for your organization by clicking below:

APIR Form

We do handle this part of the process. We'll help you get it done and provide you with the link, but it is done by another department. Once completed, you'll need to mail the form to
Kelvin Smith Library, Case Western Reserve University 10900 Euclid Avenue Cleveland, OH 44106-7151
Or FAX it to: (216) 368-8720
Attn: Pam Hlavin

Join the Web Team

Join the growing team of CWRU designers. Share ideas, code and notes! Next meeting will be in June.
Maybe you have an idea you'd like to put on the agenda for the next meeting? We'll be announcing it sometime before the meeting. Contact Tom if you want to be added to our mailing list.

New CWRU Template Now Available!

The Template Toolbox is found here on this site. It contains several things that will aid you in creating CWRU approved webpages. You'll find templates, fonts, and graphics that are to be used in your pages, as well as several tools which you might find useful. Check out the browser re-sizer, for example. Also see our running list of
Sample Pages(Utilizing templates and unique designs for each school or department). If you need help contact Kevin Adams, Assistant Director, Office of Web Development for additional tips on customizing the templates.

Need Design Help?

The Office of Web Development is involved with many schools and departments, helping them redesign their sites to utilize design elements and functional capabilities found here. If you are interested in acquiring our assistance, please contact Tom Fulton, Director of the Office of Web Development.

CWRU's Office of Web Development.
Tom Q. Fulton, Director
Kevin Adams, Assistant Director

This page last updated on: Tuesday, 23-Sep-2003 15:48:56 EDT