Watch videos with subtitles in your language, upload your videos, create your own subtitles! Click here to learn more on "how to Dotsub"

[How Do I:] Use Master Pages and Site Navigation?

0 (0 Likes / 0 Dislikes)
  • Embed Video

  • Embed normal player Copy to Clipboard
  • Embed a smaller player Copy to Clipboard
  • Advanced Embedding Options
  • Embed Video With Transcription

  • Embed with transcription beside video Copy to Clipboard
  • Embed with transcription below video Copy to Clipboard
  • Embed transcript

  • Embed transcript in:
    Copy to Clipboard
  • Invite a user to Dotsub
Welcome to this ASP.NET video tour of master pages and site navigation. Master pages are used to control the overall design of your site. Multiple child or content pages will inherit this visual design. And by editing the master page, it automatically updates all the content pages that use it. Master pages are also a good spot to place the new site navigation controls. We're going to cover that towards the end of this video. Well, master pages are a pretty simple concept to master. Let's start by creating a sample site, masterpages. And what we'll do—let's ignore the default page for a minute. We'll go and create a master page. And for all intents and purposes, it looks like a regular HTML page. But remember, this page will be used as the overall template for all the rest of the child pages. And so, as we go, I'm also going to give you a demonstration, or show you a lot of the new features of the HTML editor. So let's give ourselves a title, Master Pages Demo. And that title will be used by all of our pages. I'm going to import some existing images and files into our project. So let me go ahead and do that. I have these in My Documents\Images. I have a couple pictures that we're going to use, as well as a style sheet. So style sheets—this is a great spot to add that, so all of our pages will inherit that simple style sheet. I could also go and make changes to styles, which I'll be showing in a couple different ways. Here's a nice feature for the HTML editor, the document outline. That's this guy right here. So I can go through and click and select different items here. Let's say I want to change some of the body styles. Like I want a left margin of 0 and the top margin 0. This will make my page snap to the very top-left corner of the browser. As we get down here, we notice this control here called the content placeholder. If we go to the design mode, you'll see the content placeholder. This will be where the child pages put their content. I don't want it here yet, because it kind of gets in the way of my overall master page design. So I'll just delete it, and we'll add it back shortly. So now I have a simple blank page with nothing but a title and a style sheet. Let's start by inserting a table. This table structure will mimic our overall site design. Now it's kind of strange. I have a top up here as well. I'll put some kind of site header information, and here I'll have a footer. And in the middle is where the menu and the content will go. Now that's not a lot of space for content. So let's go ahead and change that. I'm going to drop the content placeholder in. We'll see how that works again shortly. Let me make a few more changes here. We don't need this much space for the footer. So I'll put something a little more reasonable here. Copyright. you the copyright symbol. That's a good thing to remember. Master Some Company. And let's see, over here in the menu area, why don't we change a couple styles? First, we'll align that to the top of that little square. And let's change the background color to light gray. And finally, I'll give it—I want to make sure it's a minimum of 300 pixels or set it right to 300. Okay, that's better. Now up in the header area, some of the new table design features—as you saw, we were able to insert a table, but from here, you can insert another row— so have another row right above where— let's go change the style here. I'll make the background a darker color. And so you can make it look interesting. We'll change the bottom edge to a solid color. Let's make it thick. Make this olive. Okay. And finally, in this row right here, let's insert a cell to our left. And this will nicely align above our menu. There's where I will put this home picture. And I need to change the style in that cell as well and have it aligned so it's centered. So horizontal alignment, centered. Good. I'll be making a few more tweaks as we go. So I also have a little picture I can put up at the top. And we'll put something else here next to the picture shortly, when I get to the—show you some other features here. And finally, we'll have a header, Master Pages Demo. Okay. Well, let's see what this looks like. Well, we can't actually look at it. Even though it looks like HTML, it has this strange master syntax there at the end. We need a child page for it. There's a couple ways to do that. I can use the existing default page that was created when we had our site first built. And to kind of attach an existing page to that master page, we simply delete everything. Then go up here and start, and then we wire it up to the master page file. Equals MasterPage. As you can tell from that dialog, we could have multiple master pages. In fact, you can nest master pages. But I'll just go with this for now. So that's it. We have our first web page. If we switch to the design view, you can see that all the master page content is grayed out, and our content is going to go right here in the middle. So this is our default content. And so let me—we can have some default content. In this case, it's empty, so it doesn't make a lot of sense. I have to kind of create my own instance of a content placeholder by choosing Create Custom Content. Now I can start typing. This is the default home page for the site. And if we switch back to source mode, you see it made a content placeholder for us. Now we're ready to view this. Okay, still pretty bare bones, but you can see it works. Our default page is really just that text, and it lives within the context of all this stuff. I want to make a couple changes. I want this to align to the top. And I'll make a couple more HTML changes. Like I'd like to get this empty space gone. So let's leave that there. That empty space is coming from that nonbreaking space. And if I want to align this cell to the top, I go to the Text, make the Vertical align to top. I also know from experience, I'm going to have to change this master pages demo right there by setting the column span to 1 and height equal to 100%—I'm sorry, width equal to 100%. If we go back here and hit Refresh, we should get rid of that empty space, and that's looking better. Couple more quick changes. I want to put—well, that's too narrow, but we'll fix that in a minute. I want to have a nice little line here separating the master page area from here. Now remember, earlier I showed you this thing at the bottom down here, and I clicked the master page demo area. You can see I'm really inside the h2 tag. I want to be inside the tr tag. Because that's the table row. For that table row, I select that. Then I can go to the properties style section. And go and modify the edges, like I did earlier. And go to the bottom, make it a solid thin line. And set that color equal to, like this light silver color. So using this little piece here at the bottom allows you to narrow in and select exactly the kind of row content that you want. Now when I hit Refresh, I should have that little line. It's looking better. Finally, we need a menu. This is pretty cool. We're going to switch now out of the master page demo and HTML creation into the new navigation features of ASP.NET 2.0. So if I collapse this, you can see over here on the navigation side, we have three new server controls, the SiteMapPath, a Menu, and a TreeView. These all rely on a site map description of what your site looks like. So it's some kind of hierarchical representation in XML of what your site looks like. So I already have defined that in these files right here. I've got five aspx pages that are empty, as well as the website map. Let me bring these in. So we have—again, this change password, create account. These are just placeholder pages, and they look pretty much just like the default page. What's interesting is the website map. This is an XML representation of a hierarchical view of our site. And the reason why I have all these placeholders is because the site map syntax, when it's interpreted, requires you to actually have all these pages. They can't all point to the same empty or default page. So we have kind of a three-layer arbitrary menu structure or layout here, with Manage Accounts down at the bottom. We have an Admin page and a few other pages. Actually, I didn't bring in the Admin page. Oh, that's good, I can show you another way to create child pages. If you right-click on the master page, I can just choose Add Content Page. Now, you don't get the name you want, so I just go and rename that to Admin. And I'll put in some text and say This is the Admin main page. Now we have something a little more substantial. Now we need to use the site map. The way we do that is to drag—let me get rid of the menu text. We drag a tree view control. I could use the menu, but I like the way the tree view looks better with our hierarchical data. And let me attach it to a data source. So we have—attach it to our site map, and that's going to look for a file called web.sitemap. And notice, there's our syntax, our hierarchy. And I'm going to change it to— you can see there's lots of different formatting in here. I'll use arrows, too. And then, finally, I'm just going to drag this little runtime control down here. Great. Now using that same site map, we have another feature called the SiteMapPath. This is like the little breadcrumb control you get on websites. All I have to do is drag that on, and, you know what, I need to make one change to that image control, in order to get it to align correctly. This took me about an hour to figure out, but align = absolute middle. By putting that on the image tag, my site map will align perfectly with that. Okay, so let's hit Refresh and see how this looks. Ah, that's looking a lot better. So we have our log in page—well, that's a little funny. So we have another kind of painting or HTML issue. This is just what you get when you're dealing with HTML. You have to make lots of little tweaks. I happen to know that that behavior is caused by this guy right here. Needs to be set to 100%. If I go back and hit Refresh, that looks a lot better. Okay, so notice now when I click down, that at the top, our little site map path is showing us where we are. This is really useful if you have a lot of pages, and you want users to be able to easily understand where they are in your overall hierarchy. I don't like the default behavior of this menu. Notice when I click on an item, it shifts over to the left a little bit. We have a lot of control over the way this is styled. If we go back to the master page and bring up the properties for this menu, at the very bottom, we have all these different styles. So, for instance, the selected style. Remember, when I clicked on it, it scooted over to the left. That's because they've hard-coded 0 pixels there. Likewise, I want it to be bold, instead of underlined. And when I'm hovering over one of the menu items, I'm going to use this little trick where you set the background color equal to yellow, so it looks highlighted. And I'll turn off the underlines. Let's see how all those changes look. Refresh. Ah, much better. Great. So that's master pages. Now we're going to use this same content for the membership and roles video. So let's save the whole thing as a template. So we export this whole project as a template. Call it masterpPages, and I'll, Visual Basic. And I think this is fine. I'll call it the master pages demo. Great. So later, we'll use this Zip file and copy it. You can see it's already in my templates folder. Later, we can create a new website based on that masterpages template. So if you want to learn more about how we fill out this with real content, where you can change your password and login, watch the Membership and Roles video. So, as you've seen, master pages are a great place to put common content.

Video Details

Duration: 13 minutes and 14 seconds
Country: United States
Language: English
License: All rights reserved
Genre: None
Views: 5
Posted by: neudesicasp on Aug 23, 2013

Create a web site with a consistent layout and design across all its pages using ASP.NET 2.0 MasterPages. See how easy it is to add navigation to a web site using the new TreeView and SiteMapPath controls.

Caption and Translate

    Sign In/Register for Dotsub to translate this video.