I'm a self taught web designer and I've come to the point where I need to learn something new: Frames. I'm starting to sell wordpress themes and I need to create a Frame that will allow users to switch between demo themes they would like to view and possibly purchase. A great example of this can be found here: woothemes.com/demo/?t=35

Now I looked up a tutorial to explain everything and even viewed some source code (shown below).

Code HTML4Strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<title>Presto Themes Demo</title>
<link rel="Shortcut Icon" href="http://.../images/favicon.ico" type="image/x-icon" /> 
<meta name="description" content="Presto Themes Demo" />
<meta name="keywords" content="prestothemes, themes, wordpress" />
<frameset rows="36,*" frameborder="0" border="0" framespacing="0">
    <frame src="/...php/" name="switcher" scrolling="no" noresize>
	<frame src="UntitledFrame-1" name="main" scrolling="auto" noresize>
      <p>Sorry, your current browser does not support frames!</p>

My question is this: How do I set this up and where do I store the file with the above code?

First off, I will be making a new Wordpress Install for each theme and uploading them to the following addresses:

mysite.com/demo/music etc

So I'm guessing in the code supplied above, I will need to have some index.php or something for the "Frame Source" that will generate the top bar drop down menus for switching? Where will I store this file in my directory?