|
Step 1 |
|
Start by selecting a page layout type that you
want to create. In this example we have used a
collaborative site template in Green. |
 |
| |
|
Step 2 |
| From
the Collaboration Site Backgrounds and
Banners stencil use the Basic No Menu
(Home) Page Background for a Welcome
Layout Base template -OR- use the
Basic Menu (Content) Pages Background if
you want to create Library & List Layout
Content Page. In this example we are going to
use the later option.
Using the 2000% accuracy feature of the
templates, shift the top corner of the
background image into position.
Once you have lined up the
background shape exactly as displayed at 2000%
you can move it to the back. This will bring
your Guide Lines to the front of the screen
again. |
 |
| |
|
|
Step 3 |
Moving your selected images to the back if
simple. Follow these steps.
- Select the Background
Image that you just positioned on the
template. You will know what you have
selected when the small green squares and
dashed line appear around the shape.
- Right-Click the mouse on
the shape and select Shape and
then select Send to Back.
- Your original template
layout will be on top, so you need to select
it and move it to the back using the same
process as above. You will need to repeat
this for the a few times.
- You should end up with a
screen that has the Guide Lines in front of
your background. (As displayed)
|
 |
| |
|
|
Step 4 |
|
Select the <Site Name> area and give your site a
name. |
 |
| |
|
|
Step 5 |
| From
the Collaboration Site Backgrounds and
Banners stencil, locate the Authoring
Region with Site Name drag it onto the top
region of your template.
Zoom in to 400% or more to
accurately position this shape.
Selecting the <Site Name> area
of this shape, enter your site name again.
|
 |
| |
|
|
Step
6 |
|
Adding the
SharePoint Banner shape from the
Collaboration Site Backgrounds and Banners
will really bring your Quick Layout to life. Drag this shape just below the Authoring
Region that you last positioned. |
 |
|
|
|
|
Step 7 |
|
Move to the
Right-Hand side of the Template and locate the 3
vertical guides that are used to position the
Site Dropdown, the Search Text box,
and the Site Actions button.
Select all three
lines, but clicking the first line and holding
down your SHIFT key while clicking the remaining
two lines.
When all 3 are
selected and showing a pink outline, right-click
while the cursor is over any one of them, and
select Shape and Bring To Front.
This will move these guides to the front of your
template. |
 |
|
|
|
|
Step
8 |
|
From the Collaboration Site
Search stencil, locate
the Search Area Dropdown List and the
Search Entry Text Box. Position these two
shapes as they are presented in this screen
shot. You can increase
the Zoom to 200% or 400% as this will help you
position the shapes exactly. |
 |
|
|
|
|
Step 9 |
|
Position a left-hand navigation
menu. You have two options at this point, you
can either create a menu to meet your exacting
needs or use a pre-built menu. In this example
we are going to use the pre-built menu.
Select the Basic Menu
Structure from the Collaboration Site
Left Navigation stencil.
Drag it to meet the left and
right guides for the menu and position it to the
Content Boundary guide.
NOTE: The menu guides are accurate for
each template, however there is no consistency
between each of the different template types
with respect to menu width, so you may need to
adjust the menu width slightly. |
 |
|
|
|
|
Step
10 |
|
Once the Left Navigation is
placed where it needs to be, you can select the
<Menu Header> and <Menu Item> and create your
entries. |
 |
|
|
|
|
Step
11 |
|
Position your "Site Actions"
button. From the Site Action Menu Buttons
stencil, select either the Selected button shape
if you want to add the Site Menu shape or select
the Site Actions Menu Button (Unselected)
shape for a normal view.
We have selected both here to
show you the difference.
(Top Image) If you want to use
the Selected Button which is Orange, you can use
the pre-built menu from the Collaboration
Site Actions Menu stencil and either build
your own menu or use a pre-built selection.
(Bottom Image) If you want to use
the Unselected Button which is Blue, use the Site Actions Menu Button (Unselected)
from the Site Action Menu Buttons. |
 |
|
|
|
|
Step
12 |
|
Next we want to display
realistically, what sort of content page this is
going to be. There are a
broad number of page type icons available from
the Collaboration Site Page Images
stencil. Locate the Image that you want to use
and place it as shown in the image to the right.
In this example I have
selected the Site (Discussion) Page Image
from the Collaboration Site Page
Images stencil. For
authenticity it should be positioned exactly
against the two grey guides. |
 |
|
|
|
|
Step
13 |
|
The next step in our Quick Page
Layout is to position some Top Navigation menus.
This is again a matter of selecting the
Background image, which is the Top Nav -OTB
(Banner) from the Collaboration
Site Top Navigation stencil.
It needs to be positioned
directly above the Main Background image that we
first placed and the SharePoint Banner
image we placed in step 6.
You may need to resize this
shape a little on the right to neatly meet the
Site Action Menu Button. Once you have lined it
up on the left, adjust it from the right to meet
the Site Action Menu Button. |
 |
|
|
|
|
Step
14 |
|
The final step is to position
some menu items on the Top Navigation bar.
Simply select either Top Nav - Selected
or Top Nav - Unselected from the
Collaboration Site Top Navigation stencil.
Typically the Top Navigation will only have
the Current Page as the Top Nav - Selected
and every other item is unselected.
Just a couple of things to
remember when building up a Top Nav Menu...
- You may well need to
adjust the length of your tabs depending on
the words you type in.
- Make sure that each tab
overlaps the previous tab by the width of
the tab border.
- If you Selected Tab is
not the last tab you place, make sure you
move it to the front, using the right-click,
Selecting Shape and Move to Front.
|
 |
|
|
|
|
Congratulations
|
|
Congratulations...
You now have a page that you can
start adding web parts or a whole host of other
shapes to.
You will be able to save this
as a project and build your whole Collaboration
(or other) site interface. |
 |
|
|
|
