Scheme Designer is an add-on for DHML Menu Studio application that allows you to create your own menu designs in an easy and intuitive way. Creating bitmap-based designs is especially straightforward, you simply select bitmaps (images) that the menu consists of and the program does all the rest. It only takes a single mouse click to add the menu to DHTML Menu Studio Gallery. (If you are not familiar with Xtreeme DHTML Menu Studio, please visit this page: http://www.xtreeme.com/dms).

Requirements

Scheme Designer is not a standalone application. In order to run it your system must meet the following requirements:

It must run one of the operating systems listed below:

Windows 98,
Windows ME,
Windows NT 4.0 Service Pack 6 or later,
Windows 2000,
Windows XP,
Windows 2003.

DHTML Menu Studio version 4.0.3 or later.
At least 10MB of available disk space before installation.

User Interface Overview

After opening the program it will show its main window. Near the top of the window there are seven toolbar buttons:

Below you may see the list of the buttons along with their function:

“New” button; creates an empty Scheme Designer project,
“Open” button; opens a previously saved project (see Opening and Saving Projects),
“Import” button; imports an existing DHTML Menu Studio design (from an .SXS file). See Importing Existing Designs from DHTML Menu Studio for more details.
“Save”/”Save As” buttons; save changes to the current project to an existing/new file,
“Add to DMS Gallery”; builds a menu design and adds it to DHTML Menu Studio Gallery (see Adding a Design to DHTML Menu Studio gallery).
“Help” button; opens the program’s documentation in a separate window.

The rest of the main window is divided into two parts. The “Options” contains settings of the current design project:

The “Preview” panel allows you to preview the currently edited design. Simply click the “Refresh” link and the program will display a sample menu based on the current design settings:

Creating an HTML-only Design

What is an HTML-only design

An HTML-only menu design is a template that defines the graphical appearance of a menu that consists of pure HTML without any bitmaps. Options you can customize include the menu orientation, text font, size and color, and the color of the background, etc. (see Changing Fonts and Colors).

If you want to create a bitmap-based menu see Creating a Bitmap Design.

How to create an HTML-only design

If you find it difficult to follow the steps below please read the User Interface Overview section.

Create a new project (click the “New” toolbar button).

Choose your menu orientation by selecting “Horizontal” or “Vertical” in “Menu orientation” field on the “Options” panel.

Make sure that the “Bitmap menu bar” option at the top of the panel is turned off.

To find out more about customizing the appearance of a menu read the Changing Fonts and Colors section.

You can click the “Refresh” button on the “Preview” panel to see how the menu looks like.

Using an HTML-only design in DHTML Menu Studio

Before you can use your design in DHTML Menu Studio you must first add it to the Gallery (see Adding a Design to DHTML Menu Studio gallery).

Creating a Bitmap Design

What is a bitmap design

A bitmap design is an advanced design (see Creating an HTML-only Design) that uses bitmaps (images) to enhance the menu’s look. You can use bitmaps for menu bar (including hover effect) as well as for pop-up windows. See Menu structure to find out what parts a menu consists of.

How to create a bitmap design

If you find it difficult to follow the steps below please read the User Interface Overview section.

Create a new project (click the “New” button in the menu bar).

Choose your menu orientation by selecting “Horizontal” or “Vertical” in “Menu orientation” field on the “Options” panel.

Turn on the “Bitmap menu bar” option located near the top of the panel.

Click the “select bitmaps” link next to the option and choose bitmaps that menu bar will consist of (see Creating and selecting bitmaps).

If you want different bitmaps to be displayed when the mouse cursor is over a menu item turn on the “Different bitmaps when mouse is over” option. Then choose bitmaps by clicking the “select bitmaps” link on the right (see Creating and selecting bitmaps). The bitmaps are called the “hover” bitmaps throughout the program and documentation.

If you want to create bitmaps for pop-up menus you should turn on the “Bitmaps for pop-up menus” option, click the “select bitmaps” link and choose bitmaps (see Pop-up components).

You can customize the look of the menu by changing options on the “Options” panel (see Changing Fonts and Colors).

You can click the “Refresh” button on the “Preview” panel to see how the menu looks like.

Creating and selecting bitmaps

There are several windows that let you select bitmaps for a menu part whose layout depends on the part you are customizing. See Menu structure to find out more. Below you may see the window you can use to select menu bar’s bitmaps:

This particular window opens when you click the “select bitmaps” link next to the “Bitmap menu bar” option near the top of the “Options” panel. Clicking any of the remaining “select bitmaps” links will bring up a window showing different components on the “Components” (see Menu bar components and Pop-up components for details).

The windows and the components will look different if the menu you are editing has vertical orientation (Main window > “Options” panel > “Menu bar” > “Menu orientation”).

To select bitmaps follow these steps:

You can use your favorite software to create the bitmap showing the menu, along with the version of the menu when the mouse cursor is over one of its items (optionally) and the pop-up menu (optionally, only if using bitmap-based pop-up menus). Example:

The program supports bitmaps in all popular formats including PNG, GIF and JPEG.

Hint: If your website is already using a bitmap-based menu you want to turn into a bitmap-based design, you can create a screenshot of your website by opening it in a web browser, making sure the menu is visible and pressing the Print Screen (PrtScn) key on your keyboard. Then open your favorite image-editing application and paste the screenshot to create a new bitmap (usually Ctrl+V). Then save the bitmap to a file.

Click the “Open” link on the “Source Bitmap” panel and select a file containing the bitmap you want to use.

Click a component on the “Components” panel. A selection rectangle will appear on the bitmap displayed on the “Source Bitmaps” panel. The “Properties” panel will show position, size and other parameters for the selected component.

Use the selection rectangle or position properties to select a part of the source bitmap for the component.

Hint: You can use the “Zoom In” and “Zoom Out” links for a better precision.

Note: Some components are optional. You can turn off the “Enable” option (if available) if you do not want to use the component in your menu.

Repeat two previous steps for remaining components.

At any time you can see the result of your work in the “Proof” panel at the bottom of the window.

Read the Menu structure section to find out more.

Menu structure

A menu consists of two main parts:

Menu bar (1 – see the image below),
Pop-up window (2).

Menu bar components

A menu bar is generated based on several bitmaps called “components”. In order to define these bitmaps click the “select bitmaps” link next to the “Bitmap menu bar” option on the “Options panel” of the main window.

Below is the list of all menu bar components:

Menu; this bitmap is used to create the leftmost part of a menu bar (it is optional; you can exclude it by turning off the “Enable” option on the “Properties” panel).
Item separator; this bitmap is used between two consecutive menu items (it’s optional).
Item start; this bitmap creates the leftmost part of a menu item.
Item middle; the bitmap is repeated as many times as it is necessary to fit the menu item text (the actual width of a menu item depends on how your design is used).
Item end; the bitmap for the rightmost part of a menu item.
Menu tail; this bitmap is used to create the rightmost part of a menu bar (it’s optional).

See Creating and selecting bitmaps for more details.

You can also define a different set of bitmaps for a menu bar that will appear when the user moves the mouse cursor over a menu item (hover bitmaps). You can define hover bitmaps by clicking the “select bitmaps” link next to the “Different bitmaps when mouse is over” option on the “Options” panel of the main window.

Pop-up components

A pop-up menu is usually shown when the user moves the mouse cursor over one of the menu items. To generate a pop-up menu three bitmaps (components) are used:

Pop-up head; this bitmap creates the topmost part of a pop-up menu; it is displayed only once.
Item; this bitmap is repeated as many times as it is necessary to fit all menu items.
Pop-up tail; the bitmap is used to create the bottom-most part of a pop-up menu.

See Creating and selecting bitmaps for more details.

Using a bitmap design in DHTML Menu Studio

Before your bitmap design can be used in DHTML Menu Studio it has to be added to the gallery (see Adding a Design to DHTML Menu Studio gallery).

Changing Fonts and Colors

On the “Options” panel you can find settings that let you customize the look of your menu. On the panel there is the “Menu bar” category where you can change options for the menu bar and the “Pop-up menus” category for pop-up windows.

Both categories contain “Fonts and colors” sub-categories you can use to customize the font, size, style and color and background color. You can also set font highlight color and background that will be visible when the cursor is over an item. By changing border size and color options you can also create a border around menu bar or pop-up window.

For color options you can always click the button on the right to open a window where you can choose a color from a palette.

Note: Some options are not effective if you are creating a bitmap-based menu design.

Adding a Design to DHTML Menu Studio gallery

Expand the “Output” category on the “Options” panel and type in the name of the menu design. It is the name the design will be displayed under in the Gallery.
Click the “Add to gallery” toolbar button (see User Interface Overview).

Using your Design in DHTML Menu Studio

After you create and add you design to the gallery you open (or switch to) DHTML Menu Studio to use your design to create a menu.

Open the DHTML Menu Studio application if it is not already open.

Select “Window” > “Scheme Gallery” from the main menu.

Click the “My Gallery” link on the “Choose gallery” panel on the left.

Note: If the “My Gallery” link is not available, click the “Regenerate Galleries” button near the bottom of the window.

A preview of your design should be visible along with the name you specified when adding the design to the DMS Gallery in Scheme Designer (you may have to scroll down to see your design).

Note: If the design is not visible you may have to refresh the window by right-clicking the window and selecting the “Refresh” item from the pop-up menu.

To use the newly added design to create a menu, simply click its name.

Opening and Saving Projects

To save your design project:

Click the “Save” button in the menu bar.
On the “Save” window specify the location and the name of your project file and click “Save”.

To save your design project under a different file name:

Click the “Save As” button in the menu bar.
On the “Save” window specify the name of your project file and click “Save”.

To open a previously saved design project:

Click the “Open” button in the menu bar.
On the “Open” window that will show up browse for a design project file that you want to open and click “Open”.

If you find it difficult to follow the steps above please read the User Interface Overview section.

Importing Existing Designs from DHTML Menu Studio

To import a design:

Click the “Import” button in the menu bar.
Select an .SXS file containing the design you want to import into Scheme Designer.
Click “Open”.

You can modify the design (see Creating a Bitmap Design & Creating an HTML-only Design) and add it to “My Gallery” in DHTML Menu Studio (Adding a Design to DHTML Menu Studio gallery).

Appendix A: Ordering the Full Version

The demo version is fully functional except it does not let you add the design to the DHTML Studio Gallery. This restriction is removed once you purchase the full version.

To order the full version of the product please visit the location shown below and follow the instructions you will find on the web page:

http://www.xtreeme.com/schemedesigner/purchase.php

We use a Secure Server to ensure privacy and safety. You may also order by FAX or phone.

Appending B: Contact Information

Company home page: http://www.xtreeme.com

Product home page: http://www.xtreeme.com/designdesigner

Order page: http://www.xtreeme.com/designdesigner/purchase.php

Support/contact page: http://www.xtreeme.com/designdesigner/support.php

Our physical location:

Xtreeme GmbH
Route de Moutier 109
CH-2800 Delémont
Switzerland

Phone (sales only): ++41 32 422 4311

Fax: ++41 1 355.3058