Skip to Content

Web Standards Guide

 
  • Email
  • Print
  • Share

Interactive Features

NOTE: You must use Dreamweaver to implement many of these features.
If you do not have access to Dreamweaver, contact the Web Support Group. Contribute authors should submit a help desk request to the Web Support Group for assistance.

Embedded Videos

Dreamweaver authors can add the video code onto a web page by inserting the appropriate <embed> code from the video on the GSB's YouTube channel. Do not include the <object> code. Follow the instructions in the document below.

Sample Embed Code for YouTube Video

<embed src="http://www.youtube.com/v/sVk_PkC7X4Y&rel=0&color1=0xb1b1b1&color2=0xcfcfcf&feature=player_profilepage&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="425" height="344"></embed>

For more information about working with videos please go to the Photo and Video section of Brand Central.

Embedded Slide Shows

There are two slideshow versions: a large and a small. The large version functions as a stand-alone presentation. The smaller version can be embedded into a web page. For questions and information about embedded slide shows please contact Patrick Keating in Marketing and Communications.

Example of a Large Slide Show:
URL: http://www.gsb.stanford.edu/news/packages/2007/photocontestFall/

Example of a Small Slide Show:
URL: http://www.gsb.stanford.edu/knightcenter/watch/slideshows.html

Embed Code for a Small Slide Show:
<embed src="http://www.gsb.stanford.edu/news/packages/2007/photocontestFall/soundslider.swf?size=0" width="420" height="353" align="top" quality="high" bgcolor="#000000" name="soundslider" menu="false" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></embed>

Rotating Picture Show

You can use images of any size in a rotating picture show. The first two URLs below use an image size of 120 X 120 pixels; the last one is sized at 150 X 150 pixels. Just be sure all images are the same size. For more information about creating a rotating picture show contact Web Services Team.

Examples of Rotating Picture Shows

Expandable Frequently Asked Questions

This element uses an "accordion" feature to display the answer directly beneath the question. Click once on the question to reveal the answer. Click once again to close (roll up) the answer.Use the javascript and code snippet below.

Javascript References

Add these two references after <-- InstanceBeginEditable name="head" -->

<script type="text/javascript" src="/js/accordion.js"></script>
<script type="text/javascript" src="/js/rollover.js"></script>

FAQ Code Snippet

<div id="faq">
<div id="vertical_container">
<h4 class="accordion_toggle">Question goes here?</h4>
<div class="accordion_content">
<p>Answer goes here.</p>
</div>
<!-- end accordion content-->

<h4 class="accordion_toggle">Next question goes here?</h4>
<div class="accordion_content">
<p>Next answer goes here.</p>
</div>
<!-- end accordion content-->

[etc]
[etc]
[etc]

<h4 class="accordion_toggle">Last question goes here?</h4>
<div class="accordion_content">
<p>Last answer goes here.</p>
</div>
<!-- end accordion content-->

</div>
</div>
<!--end vertical container-->

Examples of Expandable FAQs

Expandable Text Area

This element can be used to create dynamic expandable text areas. Click on the word "more" to reveal the full content. Click on the word "minimize" to close. Follow the steps below.

  1. Add a link to the javascript file in the head of your document
    <script type="text/javascript" src="/scripts/expandCollapse.js"></script>

  2. Use this code snippet to set up the actual expanding text in the page:
    <div id="item01">
    <p class="expandlink" style="margin-bottom: 0"><a href="#item01" onclick="return toggleMe('item01+', 'item01');">...more</a></p>
    </div>
    <div id="item01+" style="display:none;">
    <p>content here</p>
    <p class="expandlink" style="margin-bottom: 0;"><a href="#item01+" onclick="return toggleMe('item01+', 'item01');">[minimize]</a></p>
    </div>

Example of an Expandable Text Area:http://alumni.gsb.stanford.edu/act/resources/askact/category_organizational_development.html.

Embedded Google Map

Google provides an interface for creating maps which you can embed in your web pages.

For more informaton about creating Google maps go the Web Guide section in Brand Central.