Step One -- Design Your Site

Be creative and build your site as an image in Photoshop or any other design tool.  While designing, keep in mind how your design will work on our management system.  You will build a template (frame) of the site that always stays the same.  Then, you will create editable regions where the user can add and change content.  As you design, think about where you want these editable regions to be.  (For an example of an editable region, see our token visual reference).

You can choose to design your site and we'll be happy to cut up your design in CSS and XHTML and implement it in to ImmerseEdit for a one-time charge of $395, or follow the instructions below to prepare your files yourself for no up front cost! Yes, yes... we know. Pretty cool, huh?

Templates
You will need to design multiple templates for your site.  Usually, a site will have at least three templates.

  1. The home page template -- since the home page is usually different than all of the other pages in a site, it generally has its own unique template.
  2. The inside page template -- often a single template can work for every other page in the site.
  3. The administrator template -- this is a special template required by the system.  You must have an administrator template in your design and it must be called "Admin.html".  See more on the administrator template in step four below.

Step Two -- Cut-up and Build Out Your Site

Once you've created your design images, it's time to cut them up into HTML and CSS.  The great thing about our software is that you can use whatever method you choose to do your build out.  You should use linked external CSS stylesheets and we encourage you to utilize web standards and separate your layout (CSS) from your structure (XHTML).  When building out your site, remember to leave room for those editable regions.  

Files, Directories and Paths
When you're finished building out your site, you'll have multiple files, just like you would for a normal website.  You'll have:

  • HTML files for each of your templates (i.e. Home.html, Inside.html, Admin.html . . . etc.).
  • Supporting files such as javascript files (i.e. scripts.js) and cascading style sheets (i.e. styles.css)
  • Graphics files that appear in the template (should be .GIF and .JPG images). 

All files should use paths relative to the site root.  For example, the following shows a link to a style sheet called mystyle.css, located in a folder called "styles," which exists at the root of the site.

<link rel="stylesheet" type="text/css" href="styles/mystyle.css />

Step Three -- Add Tokens

Tokens are simple bits of code that add dynamic tools to your HTML template files.  For example, you will add the <$region$> <$/region$> token whenever you want to create an editable region in your design.  Adding this simple token transforms your design from static to dynamic, allowing your website users to add and edit website content with our software's easy-to-use tools. 

There are several tokens available for you to use.  Please see our Token Reference Guide to get full documentation on tokens.

Step Four -- Double Check a Few Things

You're almost done, but first you need to double check a few important things:

1)  Do you have an administrator template?  You must have an administrator template file in your design.  The system uses this template when you are editing your elements or editing your website settings.  Your administrator template must meet the following criteria:

  • The file MUST be named "Admin.html"
  • It MUST be a simple template with a single editable region that is more than 600 pixels wide.
  • The single editable region MUST be named "MainContent"

2)  Do you have other templates?  Your design must include at least one additional template file, but it may include as many template files as you like.  Each template file should have a unique name.  These filenames will be what you see when you choose your template inside the software, so make them descriptive (i.e. Home.html, InsidePage.html, AboutUsSection.html . . . etc.)

3)  Does each of your templates have an editable region named "MainContent"?  Every template in your design must have a region named "MainContent".  For more information on this, see the editable region token reference page.

Step Five -- Zip and Upload

Now that you design is complete, all files (graphics, CSS, HTML) should be archived in a ZIP format to upload.  Organize your files inside a folder on your computer (see notes on "files, directories and paths" under step 2 above), then right-click (command-click on Apple OS X) and choose the appropriate archive option to make a .ZIP archive.  The name of your zip file will become the name of your design.

Now, just upload your design to us.  That's it!  You're done.

Making Changes to Your Design
Should you need to make changes to your design, just make your changes and re-upload your zip files, or you can always contact us for help.