Select the first group, Home
and click Menu->Color
Click the Back Color button and type
these values: FF,
C8 and 40
for red, green and blue, respectively. (This will produce a "gold" color.)
Set the border size to 2 and set the
four border colors to 80,
40 and 40
for red, green and blue respectively.
|
Notice that the Color
Picker dialog can let you re-select previously used colors
quite easily. Since we have already use the 80/40/40
color, to select it again we just have to click on the
Used Colors button and select the color that we want to
re-use from the list.
We could also use the
Picker button to pick the color from anywhere on the
screen, so if the color that we're looking for is visible
on the screen just click on the Picker button and click
over the color. The Color Picker will read that color and
make it available for you.
You can also SHIFT+click the Picker button to use an
alternate version of the picker.
You could also use the
Windows button to access the common color picker used in
most Windows applications.
Finally, the Color
Picker dialog can display a slightly modified version of
the selected color which is optimized for the web. A web
optimized color is a color that is guaranteed to be
properly displayed under any browser running under any
platform. To select the WebSafe version of the selected
color simply click on the small square besides the main
color preview. |
Remember that when using the Toolbar feature, a group has two
"identities:" One is as a container for the commands it will
display, so the background color you've just set changes the
background color of the rectangle that encapsulates the
commands. The other identity is as a toolbar item.
To change the colors of the Home
toolbar item click the Toolbar Item
tab.
Under the Normal state click
Text Color and set the color values to: 00, 00 and 00 (Black)
Again, under the Normal state click
Back Color and set the
color values to: FF, C8 and 40.
Now, under the Mouse Over state click the
Text Color button and set the color values to: FF, FF and
FF. (white)
Again, under the Mouse Over state click the
Back Color button and set the color values to: 80, 40 and
40. (dark maroon)
Click OK to accept the
changes and click OK again to close the Color dialog.
Click Menu->Font to set up the
font that the toolbar item will use.
Click the Change button under the
Normal state and set the font to
Tahoma, 12, Bold.
Do the same for the Over state.
Click Menu->Margins and select
2 pixels for both the horizontal and
vertical margins.
To set up the other groups with the same style settings, just
make sure the Home group is selected and click Edit->Copy
Check the Color,
Font,
Image and
Margins checkboxes and click OK.
Now click Edit->Paste, select the Paste to all groups
option and click
OK.
You have just applied the same style changes
to all the groups in the project! (You probably don't believe that it could be done that easily, so go ahead--check for yourself!)
Now,
let's change the style of the commands.
The steps are very similar as changing the style of the groups.
Select the first command under the
Products group, Computers,
and click on Menu->Color
For the Normal state click
Reset. This will assign the
default settings of the parent group's style.
For the Mouse Over state, click Text Color. Then click
Windows and select the White color.
Now click Back Color and type 80, 40
and 40 for red, green and blue,
respectively.
Now click Menu->Font to set
the font type, size and style of the command's
Caption.
For both states select Tahoma for
the font name, 11 for the size and
Bold for the style.
Finally, to propagate the same style to all the commands,
make sure the Computers command is selected and click Edit->Copy
Select the Font and
Color checkboxes and click
OK.
Click Edit->Paste, choose
Paste to all Commands and click
OK.
This is now a good time to preview your project by clicking
Tools->Preview.
Verify that your menus look like the image below.

Because the Computers and Accessories commands are used to
display another menu, it's a good idea to let the user know that by selecting them they will get another menu with more options. An easy and effective way is to add small arrows to the right of the Captions where this happens.
These arrows can be small images you have created with some
graphic editor or you may use the two arrows below:
To save the above images, just right click on the image and
select Save Picture As... from the
context menu. You should save these images in the
c:\DMB_Tutorial\images\ folder.
Note that one arrow is black and the other is white. (The table cell background color was made black so that you can see the image. The image is smaller than the cell.) This is
because the menus we have created have a light background color
when the items are not selected and a dark background color when
selected. Therefore, we'll use the black arrow for the default state
of the menus and the white for when the menus are selected. This
way the arrow image will always contrast with the command's
background color.
To
set up the Computers command to use
these arrow images, select the command and click
Menu->Image
Click Change for the
Normal state, under the
Right Image pane.
Click From File... and
select the black_arrow.gif image.
Click Change of the
Mouse Over state, under the
Right Image pane.
Click From File... and
select the white_arrow.gif image.
Because the arrow images are a bit too large, set the size to
10, 10.
By default you will notice that the size of the arrow images is
set to 16,16 but this is too large and would affect the way our
menus look by making the commands using these images too tall.
To apply these changes to the
Accessories command, select the
Computers command, click
Edit->Copy and select the Image
checkbox.
Now select the Accessories command, click Edit->Paste, make sure the
Paste to the command Accessories
option is selected and click OK.
Click Tools->Toolbars Editor.
You will notice that the Toolbars Editor
dialog is divided into four sections, each represented by a tab at the bottom of the toolbar tab.
In the first section, General, we
can perform the following actions:
- Select which groups must be included into the toolbar
- Select in which order we want our groups to be displayed
on the toolbar
Click on the Appearance tab.
Set the Toolbar Style parameter to
Horizontal.
Set the Border to
2 and its color to 80, 40, and 40
for red, green and blue respectively.
Set the Separation to
2. Because you cannot create
separators for the toolbar, we add some separation between each
item to reveal the background color of the toolbar. This will
have a similar effect to that produced by a separator.
Make sure the Justify Hotspots is
unchecked. This will allow each toolbar item to have each own
width based on the length of its caption.
Set the Back Color to the values 80,
40, and 40
for red, green and blue respectively.
Click on the Positioning tab.
Click on the second dot from the first row. This will make the
toolbar to appear centered on the page and auto center whenever
the browser is resized. It will also keep it aligned to the top
of the page.
Set the Spanning to (auto). This will keep the background of the
toolbar to the same size as its contents. We do this because we
don't want to have the background color of the toolbar to span
across the width of the page.
Finally click OK to apply your
changes.
This should be a good time to preview your project by
clicking on Tools->Preview