|
Step 1 |
| Open
any of the templates provided with the Design
Library. Once you have done this, locate the
"Web Part Edit Verbs" stencil in the stencil
shapes on the left hand side. |
 |
| |
|
Step 2 |
|
Drag-n-drop the "Verbs-Verbs Menu Holder"
shape onto you page. This is a blank menu box
which contains the exact SharePoint shading for
realism. This shape is
the background and foundation for your menu.
All the menus are scaled to
suit the template page they are displayed on. |
 |
| |
|
|
Step 3 |
|
There is a range of pre-built menu items that
can be added, and one called "Verbs-Menu
Item" that can be customized to allow for
new entries. Select the
item that you want to add to your menu structure
and drag it onto you page.
You will notice that it has a
dotted "alignment marker" you can use
this to manually align the shape on the menu
box, or you can use the Shape -> Align Shapes
tool.
To use the Alignment tool,
select the Menu Box first by clicking on it with
your mouse. While holding the CTRL key select
the menu item shape that you want to align. Once
both shapes are selected, click the "Shape"
menu item on the top toolbar and then the
"Align Shapes" menu item from the dropdown
list. If this is the first item in your menu
structure, you can click both TOP Align and Left
ALIGN to move it right to the top of the menu. |
 |
| |
|
|
Step 4 |
| Now
that you have a perfectly aligned shape such as
demonstrated in the image to the right.
Slowly click on the <Menu Item
Text> until it has focus, then type in the
title of your menu item. As below.
|
 |
| |
|
|
Step 5 |
|
Continue this process until you have the menu
items that you require. You can extend the Menu
Box shape to make it taller or shorter, but
changing the width will mean that the menu items
no longer fit. So it is not advised.
Experiment a little but when you
are done, you should be able to produce a
perfect replica of the actual SharePoint menu.
The divider is provided in
this stencil as is the "Edit" button at
the top of the verbs menu.
|
 |
| |
|
|
Step
6 |
| By
positioning the menu you have created in the
correct position above a "Web Part - Wireframe
(Edit Mode)" Stencil shape, you can achieve a
very realistic and scaled effect.
Once you have finished your
design, you can start to see how your UI and
mock-ups will look before you develop anything.
See the final printed version.
|
 |
