Transcript CREATING MASTER PAGES

Easy Site Navigation
Getting organized, staying organized
 Creating custom site-navigation controls
 Using Menu, TreeView, and SiteMenuPath controls
 Make life easier with Web User Controls

Introduction
 If your site is to be successful, it must be easy
to navigate.
 If the Web site is a large, navigating between pages using
nothing but hyperlinks can be tedious for the user.
 Visual Web Developer’s Site Navigation controls provide a great
way to provide an easy, consistent navigational structure for
your site.
 You can define all the links in one place. That way, when you
add a new page to the site (or delete a page), you don’t have to
worry about going back to change the links. Just keep the links
correct in one file.
 You have to think about how you’re going to organize your Web
site’s content. Then you have to create area of navigation.
Finally you might need to create a separate file for these areas.
A good Site Organization Design
Using Site-Navigation ControlsMENU-Control
 The two main VWD controls for site navigation are
Menu and TreeView.
 The Menu control offers a simple drop-down menu of
navigational links, as shown in figure
 When the Menu control is first displayed on the page
in a browser, only the Home link and the arrow
symbol are visible.
The Menu control is good
for a small menu that you
want to keep out of the way
most of the time.
TreeView Control
 The TreeView control
shows the navigational
structure in a collapsible
tree, as in the Figure.
 The user can click +
and – signs to
(respectively) expand
and collapse
categories.
 The TreeView control is
best for handling larger
navigational tasks.
Menu and TreeView –(continue)
 Both the Menu and TreeView commands can be
used with either static data or dynamic data.
 When using a control with static data, the
navigational structure of the site is defined as part of
the control. The method is easier in that you can
define the whole menu structure just by filling in the
blanks in dialog boxes.
 With dynamic data, you store data about the site’s
structure in a file, called a site map, that’s external to
the control. The advantage to this approach is that
the site’s navigational structure is stored in one place.
 So if you need to change the navigational structure of
the site, you just have to change the external file, not
every control on every page.
Using the TreeView and Menu
Controls
 The TreeView and Menu server controls are both in the Navigation






category of the Toolbox.
They’re so similar that reading instructions is sufficient for you to use
either.
We first describe how to use the controls with static data (without a site
map that’s defined in an external file).
This is the easiest way to create a map, especially if it’s a small map
that’s not likely to change often. (And when you know nothing about
XML.)
The only real drawback to this method is that it’s tedious. And if you put
the control on a specific Web page, you’d have to re-create the control
on (or copy and paste the control to) other pages.
Unless you put the control in a Master Page, in which case it will appear
on all pages that use the Master Page — which may not be what you’re
looking for.
If you don’t want to put the navigation control on a Master Page, you
could put it in a Web User Control and use it as needed on pages
throughout your site. We will talk about Web User Controls
Using the TreeView and Menu
Controls--Continue
 So the first step is to open the page on which you




want to place the Menu or TreeView control. Make
sure you’re in Design view. Then follow these steps:
Drag either a Menu or TreeView control from the
Toolbox onto the page.
On the Common Tasks menu, click Edit Menu
Items.(The Menu Item Editor dialog box opens).
Use the Menu Item Editor to define each menu
item.
Click OK.
Using the TreeView and Menu
Controls--Continue
How to Use the Menu Editor
 To use the Menu Item Editor, use toolbar buttons at
the top of the Items list to insert options to appear on
your menu.
 You’ll need a root element first, so click the Add Root
Item button in the toolbar to add a new root. At first,
the item is just named New Item.
 Next you have to set the following properties in the
Properties column of the dialog box:



NavigateUrlL: Click this property, and then click the
Build button that appears. Use the Select URL dialog
box that opens to navigate to the page that the link
should open, and then click OK.
Text: Type the text of the menu item.
ToolTip: Type the ToolTip text for the item.
Example of the Menu Editor
How to Add Child Pages
 To add a child page item under the root item, click the Home
item at the top of the left column, and then click the Add a Child
Item button in the toolbar (second button from the left). Another
New Item appears, indented under the first item.
 As before, you want to set the NavigateUrl property to the page
the menu item opens, the Text to the item as you want it to
appear in the menu, and optionally a ToolTip. Just keep
repeating the process until you’ve defined all your items.
 Use other buttons in the toolbar to work with items you’ve
already put in the menu. Click on the item you want to change,
and then use the Delete (X), up, down, left, or right arrow
buttons to reposition the item, if necessary.
Example – How to Add A Child Page
 Just create the last child
element, and change its
Text property to show
“About us.”
 You can’t see the entire
NavigateUrl. It’s the path
to the
AboutUsHome.aspx
page from the site’s root
folder, as given here:
 ~/PublicPages/AboutUs/
AboutUsHome.aspx
Creating A Site Map
 There are several ways to create site maps. The easiest is to
just create a Web.sitemap file in the root of your folder.
 Then edit the resulting XML file to define your site’s navigation
structure. Here are the steps to get started:
 Right-click your site name at the top of Solution
Explorer and choose Add New Item.
 In the Add New Item dialog box, click Site Map.
 Click the Add button.
 In Solution Explorer, you see the Web.sitemap name at or near
the bottom of the folder hierarchy.
 On the Design surface, you see an almost-empty site map file
with some placeholders for typing text There is no Design
view for the Web.sitemap file.
Example of Creation a Site Map
Example of Creation a Site Map –
Continue
Example of Creation a Site Map –
Continue
Customizing navigation for roles
 If your site has members and roles, you may want
different navigation maps for different types of users.
 For example, the navigation options for an
anonymous user might include links to public
information only.
 The options on the navigation menu for an
authenticated user, or user in a specific role, might
include links to members-only content.
 Hiding navigational options from anonymous users is
called security trimming, (i.e. some options are
available only to people in specific roles.
How to Use Security Trimming
 Using security trimming in your site menus is a two-step
process. First, you have to enable security trimming for your site
as a whole.
 That involves specifically defining Web.sitemap as your site’s
default site map file, and then enabling security trimming on that
file by manually editing your site’s Web.config file. Here are the
necessary steps:
 Open (double-click) the Web.config file in your site’s
root folder.
 Don’t confuse Web.config with Web.sitemap. They’re two
separate files that play two separate roles.
 Scroll down to the bottom of the Web.config file, and get
the cursor to a blank line just above the closing
</system.web> tag.
 Type the following tags exactly as shown:
How to Use Security Trimming -Continue
 Type carefully because typing something that’s sorta
like the above won’t cut it. Use the IntelliSense
menus as much as possible to minimize typos.
 4. Close and save the Web.config file.
How to Use Security Trimming -Continue
 When that Web.sitemap file is bound to a navigation Menu
control, anonymous users see the drop-down menu at the
left in Figure. Authenticated users in the SiteMembers role
see the navigation menu shown at the right in that same
figure.
Binding a control to Web.sitemap
 After you’ve created a Web.sitemap file in your site’s root folder,
you can bind it to either a Menu or TreeView control.
 “Binding” just means that the control gets its information from
the Web.sitemap file rather than properties defined within the
control.
 First, in Design view, you open the Master Page (or .aspx page)
on which you want to put the control. Then follow these steps:
 Drag a Menu or TreeView control onto the page.
 From the Data Source drop-down list on the Common
Tasks menu, choose <New Data Source...>.
 In the Data Source Configuration Wizard that opens,
click Site Map.
 Click OK.
 To see the results, close and save the page. Then view the page
in a Web browser. (Or, if you put the control on a Master Page,
open any page that uses that master.)
Adding an Eyebrow Menu
 A breadcrumb or eyebrow menu is a short
navigational path back to the home page,
usually shown at the top of a page.
 You see examples of them at many large
Web sites, including the Microsoft Developer
Network Web site (www.msdn.com). Such a
menu usually looks something like this:
Adding an Eyebrow Menu -- Continue
 The path provides a quick view of where the user is in the




navigational hierarchy, as well as quick links up the navigational
hierarchy.
If your site has a Web.sitemap file, you can easily add a
breadcrumb menu to the top of any page in your site.
Just drag a SiteMapPath tool from the Toolbox onto your page.
It appears as a generic eyebrow menu in Design view.
Like all server controls, SiteMapPath has a Common Tasks
menu with an easy AutoFormat option. It also has an extensive
Properties sheet where you can change things like font, color,
and so forth.
But you don’t have to do anything to it if you don’t want. Just
close and save the page.
Adding an Eyebrow Menu -- Continue
Creating Web User Controls
-- THE PROBLEM – THE NEED
 In any given Web site there’s likely to be stuff you want to show






on every page. That stuff you can put in a Master Page.
On the other hand, there may also be stuff that you want to put
on some, but not all, pages.
An eyebrow menu would be a good example, because such a
menu doesn’t really make sense on pages that are at the top of
a navigational hierarchy.
If you drag-and-drop a control straight from the Toolbox onto a
page, you create a whole new control.
If you want consistency across your site, you’ll have to style the
control exactly the same on every page in your site.
If you ever change your mind about that style, you’ll have to
make the change to every page that uses the control.
PROBLEM.
The simple solution to the problem is a Web User Control.
Creating Web User Controls 
Continue
 Getting back to the eyebrow menu example, you could put the




SiteMapPath control in a Web User Control, and design it as you
see fit, and then close and save the Web User Control.
Then, any time you want an eyebrow menu on the page you’re
editing, drag the Web User Control from Solution Explorer onto the
page (which is named as MyEyebrowMenu.ascx
Don’t use the generic SiteMapPath control from the Toolbox
anymore, as that one won’t have the same style as the one in the
Web User Control.
When you drop the Web User Control onto your page, you won’t
have to design it because it’s already been designed. And, if you
ever decide to change the appearance of the control that’s inside
the Web User Control.
Just open the Web User Control in Design view, make your
changes, and close and save the page. The change is automatically
reflected in every page on which you’ve placed the Web User
Control.
Creating Web User Controls 
Continue
 Web User Controls are perfect for anything that you might want
to show on some, but not all, pages throughout your site.
 A good starting point might be to create a folder for the controls.
To do so, just right-click the site name at the top of Solution
Explorer and choose Add Folder➪Regular Folder. Give the
folder a name (Example : WebUserControls) and press Enter.
Creating Web User Controls 
Continue
 Creating a Web User Control is almost identical to creating a
regular Web Form page. Here are the steps:





In Solution Explorer, right-click the folder in which you
want to store the control and choose Add New Item.
In the Add New Item dialog box, click Web User Control.
Enter a filename of your choosing. (Example
MyEyebrowMenu.ascx).
Choose language options to taste.
Click Add.
 The new control opens looking just like an empty Web page
(in Design view). And basically, it is just an empty page in the
sense that you can put whatever you want into it.
 In the eyebrow menu example, you’d drag a SiteMapPath
control from the Toolbox onto the page. But any server
control from any Toolbox category would be fine as well.
Insertion of Web User Controls
Using a Web User Control
 Any time you want to display a Web User Control on one of
your pages, just drag its filename from Solution Explorer
onto your page, Nothing else is required.
 To see the control, close and save the page on which you
placed the control. Then view that page in a Web browser.
 To change the style of the control that’s inside the Web
User Control:



Open the Web User Control by double-clicking its name
in Solution Explorer.
Edit the control in Design view as you normally would.
Close and save the control.
 All pages that use the Web User Control display the control
with your current format settings.