General Page Edits

 Top  Previous  Next

The Control Pad is displayed by running the index_btnlarge.html or index_btnsmall.html files. These are the “core” files that the Control Pad operates from.

 

•In order to deploy the Control Pad with your content, minimal HTML editing is required.
•We recommend Dreamweaver MX or higher for CSS support. However, you can use any text-editor (Notepad, TextPad, etc.) to edit for the HTML and CSS files.
•No JavaScript editing is required!

 

HTML and CSS Editing

We've designed the Control Pad to allow developers with easily edit the HTML and CSS to customize the design and functionality.

 

In the section below:

•orange text refers to HTML code
•red text refers to HTML items you can edit
•… refers to non-essential HTML code hidden in Instruction Guide document

 

HTML Filename

The index_btnlarge.html and index_btnsmall.html files can be renamed to anything you wish. Commonly index.html, default.html, or a naming convention such as <myprojecttitle.html> are used.

 

Title

In the <head></head> section the title of the webpage can be edited. This title displays in the browser title bar and is important in search engine results.

 

<!-- EDIT title and meta tags as appropriate for your content -->

<title>Captivate Control Pad</title>

 

Meta Tags: Keywords and Description

In the <head></head> section of the HTML files we’ve place placeholders for keyword and description meta tags. These items are important for indexing the site with search engines, search results within large websites, and search engine optimization.

 

Visit Wikipedia ( http://en.wikipedia.org/wiki/Meta_element ) for  more information.

 

<meta name="keywords" content="type,keywords,here" />

<meta name="description" content="Type the description here." />

 

Captivate Movie Information

Also in the <head> section of the page are several items you’ll edit relating to your published Captivate movie.

 

<!-- EDIT path to captivate .swf file, background color, width, height -->

<script type="text/javascript">

var url = "flash/sample.swf";

•Edit the var url line to link to your published Captivate .SWF file. By default, replace “sample.swf” with the filename of your published Captivate .SWF file located inside the flash subfolder. You’ll note that we’ve set this up to use a relative path to the flash folder. Absolute URLs will work too.

 

var flashvars = {};

var params = { bgcolor: "#FFFFFF", scale: "exactfit", wmode:"transparent"};

•The background color is set to white: #FFFFFF. For best results, match the bgcolor to the background color of your Captivate movie.
•The scale is set to exactfit. This works extremely well in cases where we know the specific width and height of the .SWF file being displayed. Because we’re creating the movie in Captivate, we know the exact dimensions.

 

var attributes = {};

swfobject.embedSWF(url, "captivateMovie", "800", "460", "9", false, flashvars, params, attributes);

// movieid, width, height, flashversion

•Do not alter the first two items – url and “captivateMovie”. These are important placeholders referenced by the JavaScript programs.
•The next two items are the width (800), and height (460). Set these to the exact dimensions of your Captivate .SWF file.
•Next is the version of Flash player. Set this to the version you set when you publish the movie in Adobe Captivate.