Presentation is loading. Please wait.

Presentation is loading. Please wait.

Easy Site Navigation Getting organized, staying organized Creating custom site-navigation controls Using Menu, TreeView, and SiteMenuPath controls Make.

Similar presentations


Presentation on theme: "Easy Site Navigation Getting organized, staying organized Creating custom site-navigation controls Using Menu, TreeView, and SiteMenuPath controls Make."— Presentation transcript:

1 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

2 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.

3 A good Site Organization Design

4 Using Site-Navigation Controls- MENU-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.

5 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.

6 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.

7 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

8 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.

9 Using the TreeView and Menu Controls--Continue

10 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.

11 Example of the Menu Editor

12 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.

13 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

14 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.

15 Example of Creation a Site Map

16 Example of Creation a Site Map – Continue

17

18

19 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.

20 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 tag. Type the following tags exactly as shown:

21 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.

22 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.

23

24 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. 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.)

25 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:

26 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.

27 Adding an Eyebrow Menu -- Continue

28 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.

29 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.

30 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.

31 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.

32 Insertion of Web User Controls

33 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.


Download ppt "Easy Site Navigation Getting organized, staying organized Creating custom site-navigation controls Using Menu, TreeView, and SiteMenuPath controls Make."

Similar presentations


Ads by Google