This tutorial outlines the easiest way of presenting materialworlds simulations alongside your own work - by using frames.
You're also welcome to use links (including deep links) into our site - but you may want to go further than this, and place simulations in a context of your own design.

Frames provide a way of displaying different web pages together in a single browser window (in this case - a simulation page and one or more of your own web pages). The basis of frames is the frameset page. This splits the browser window into a set of rectangular areas - or frames - and each frame displays a separate webpage. Frames don't have to be visible - they can have no borders and no scroll bars - being used simply as a way to combine different web pages together in a given layout. And if the pages have the same background color, they don't appear separate.

Typically, in a page broken down into two or more frames, one frame would hold the simulation, while others display text and/or graphics. Frames can also be used to hold simulation controls and graphs, put together in the layout you've chosen.
Because materialworlds simulations can automatically resize to fill the frame, your web pages will work for a range of browser window sizes.

For people viewing your web pages without Windows InternetExplorer, or without materialworlds installed, a static image of the simulation, with relevant text and links, will be displayed in the simulation frame.

example1.html
Here is the HTML code for a page containing two frames. (by default this is the simulation shown on the right)

<HTML>
<HEAD>
<TITLE>My simulation</TITLE>
</HEAD>

<FRAMESET ROWS="70%,30%" FRAMEBORDER="0" FRAMESPACING="0" BORDER="0">
<FRAME SRC="../sims/SolarSystem/FourSeasons1View/index.html" SCROLLING="No" NORESIZE>
<FRAME SRC="mytext.html" NORESIZE>
</FRAMESET>
</HTML>

This simple frameset holds two rows, occupying the top row occupying 70% of the page.
The frame in the top row contains the simulation page - which in this example is accessed via a relative URL.
("../" means "go one step back up the directory structure")
The frame in the second row contains mytext.html (your own page accompanying the simulation) - also accessed with a relative URL.
Scrolling is deactivated in the top frame (because the simulation is autosizing) but has been left active in the bottom frame.
Simple variations on this example could be to use COLS instead of ROWS, or to specify a pixel, rather than a percentage size for the columns or rows. For example COLS="120,*" would make the first column 120 pixels wide and the second column take the remainder of the space.

Although web pages and frames can be created with just a text editor, the easiest method is to use a WYSIWYG web page editor.
The ageing AOLpress2 (freeware from www.aolpress.com) is excellent for navigating through nested frames and editing them at the same time. Sometimes you'll want to edit the HTML directly in "Show HTML" mode. Have an up-to-date browser running at the same time to view your work. Refresh the browser window to see the latest saved (to disk) version of a web page.

The web pages displayed in a frame can themselves be framesets (as is the simulation in example1.html).

example2.html
Ball column

<HTML>
<HEAD>
<TITLE>My simulation</TITLE>
</HEAD>
<FRAMESET COLS="40%,60%" FRAMEBORDER="0" FRAMESPACING="0" BORDER="0">
<FRAME SRC="mytext2.html" NORESIZE>
<FRAME SRC="http://www.materialworlds.com/sims/Balls/index.html" SCROLLING="No" NORESIZE>
</FRAMESET>
<BODY></BODY>
</HTML>

This frameset holds two columns - with the simulation accessed with an absolute URL at the materialworlds site. (If you wanted, you could copy this to your own site - and use a relative URL.)
[We've actually used a relative URL for this example - so that you don't need to go online if you're not already]

So, using frames, it's easy to run existing materialworlds simulations within your own webpages - using absolute URLs to the materialworlds site - or relative URLs (having copied the relevant simulation folders to your own site.)

The simulation library provides a variety of different presentations of the same simulations. Use the library simulation links of your choice to provide the URL for building your own framesets and webpages.

tips
Materialworlds simulations are arranged in hierarchical folders (or subdirectories); each folder containing the files that a particular simulation webpage needs.
Use Windows Explorer to browse through the directory structure of the simulations installed on your computer. Link to index.html in any simulation subdirectory to access that simulation.
If you want to have a simulation on your own site (rather than using an absolute URL to www.materialworlds.com) just copy the relevant folder into the directory structure of your own webpages. Simulations (to use offline, and to copy) will have been installed on your own computer as part of materialworlds.

Also see the exhibits page for details on creating full-screen simulations - and how to display one of a group of simulations on its own.

The links to simulation pages used on this site are all to index.html in a particular simulation subdirectory, but sim.html is the real simulation page. Here's how it works:
index.html tests for the presence of InternetExplorer.
If it finds it, it switches to explorer.html; if not, to netscape.html
explorer.html tests for the presence of materialworlds.
If it finds it, it switches to sim.html; if not, to install.html

So if you want to examine or edit the simulation web page, go to sim.html.
If you can can guarantee that your pages will be viewed only using computers with IE and materialworlds installed, then you could use sim.html rather than index.html in the simulation URL.

Avoid having a single simulation displayed more than once at the same time. Materialworlds can handle only one instance of a particular simulation (*.mw) file open at a time. A way around this is to copy the folder containing the simulation and rename the simulation file and all controls that refer to it. Then (should you wish) you can have both simulations visible at the same time.