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:] Create a Master Page in Visual Studio 2008

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
[Microsoft] [] [Female Speaker] In this video, I'll demonstrate how to create a simple master page using 3.5. This master page will derive from a cascading style sheet that we created in previous videos. Once we build this master page, we'll then rely on it in future videos to build nested master pages. Let's begin by creating a new web project in Visual Studio 2008. Select file—new—project. This will bring up the new project dialogue box. We're going to start from scratch and create a series of master pages for a website, but first we need a top-level—enterprise-level master page to house a global style guide. From there, we'll add departmental master pages and nest them inside the enterprise master page. We can then use that hierarchy to create web pages specific to each department, or we might want to actually have master pages specific to a particular look and feel. So—let's go ahead and choose BB Web—we'll navigate to the directory we wish to use. And you can select a different one if you'd like, and for the name I'm going to call it Nested Master Pages. And select okay. The first thing we'll do is we'll get rid of the default ASP X page as we want to have a fresh template for master pages without any small pages derived from it. So we'll delete this, and next thing we'll need to do is import our global style guide, which will be given to us in the form of a cascading style sheet. You can download the style guide that I provided with the code samples, or you can use your own, or you can actually walk through the other videos on cascading style sheets to create a global style guide and walk along through the video. So let's go ahead and add a style guide—right-click on the project and say add existing item. And in this case, we'll navigate to the directory where we stored our global style guide. So, we will grab that—the global CSS, and you can grab one that you prefer to use. Next thing we'll need to do is add the—add a list of graphic assets to our page. All these assets are also available in the downloadable code for this video. And what we'll do is we'll have a logo file and some graphics that indicate the content for our page which is all stored in an images directory, so I'll go ahead and grab that. I'll just go ahead and take this images directory, and then drag it into my project. Now that we have our images with the logo etcetera—the next thing we'll need to do is create our master page. This is simple enough to do; we right-click on this. Select add new item. And from the list that is given to us we want to choose master page. And let's give it a name, and we'll call it global master and select add. And this will add a file with the extension M-A-S-T-E-R to our page. A master page is quite similar to a regular ASP X page in the fact that you can actually add any kind of content that a normal ASP X page would support such as control, access to data bound sources, etcetera, but keep in mind a couple differences here—one is the extension is M-A-S-T-E-R. That's so that the ISAPI filter doesn't pick it up and try to load it by default. You never want to right click on this and make this your default page or try to run directly from a master page. These are simply templates for any other web pages or ASP X files. The other thing that you'll notice that is different is that it has a special control called a content placeholder control. These placeholder controls represent areas where you are going to have dynamic content on your page that other web pages will be able to manipulate. And these map hand-in-hand with content controls. And you'll see all this in action later as we build upon it. Another feature to Visual Studio 2008 is the fact that we can see our code and our design simultaneously which is quite helpful when we're working with master pages and also with nested master pages. We can see exactly how the results will look without having to toggle between views or without having to hit F5 to run your project. Just go ahead and change the title to be something more intuitive— let's just say—pretend this is my company, so we'll call it my company name. This way we don't have random untitled pages in our website because every page is going to be linking to this page. And then next we'll add some simple Chrome to our page to serve as the global nav. In order for that Chrome display with a nice consistent style will need to bring over our cascading style sheet. We have 2 ways we can actually work with the cascading style sheet. We can go ahead and drag it on to our code file if we'd like, or we can actually go down to the managed styles and go ahead and link to it from the managed styles and attach it from there. So, we'll just try that. We'll say attach style sheet. We'll say global CSS. Click okay. And then you can see that it adds the length to the cascading style sheet in the relevant place, and also, if you look at your different CSS properties— we click on CSS properties, click summary, and we can see all the styles that are actually being implemented at this time. We'll be working with this a little bit more as we go forward. Now let's go ahead and add some basic navigation and logo to our page. Let's go ahead and first drag over our logo. And drag that on to the form, and then once we have a logo, we'll add a unordered list. And we'll actually specify a class for our unordered list. In this case we'll choose nav horizontal. As you can see the designer is smart enough to pick up cascading style sheet classes and apply them to your tag elements and in this case an unordered list. And the next thing—what we'll do is we'll actually pop over to the downloaded code for this video and go into the code snippets directory and grab the list items that go inside this unordered list, which will represent our navigation. So we'll just grab that and paste them in here. And we'll take a look at what that looks like. We can see now that we have a horizontally placed navigational system. If we'd like—while we're working with our master page— we can actually work directly with the cascading style sheet simultaneously that say we don't like the way that their anchor links are displaying. We can modify that style if we'd like and add another style simply by right-clicking on it, selecting new style, and in this case we will do nav horizontal for 8 anchor links, and we'll change the color to be white. And another handy tip is that it actually iterates through all the document colors that are being used from your style guide, so you don't accidentally pick up a style that's not even being used and keep a nice, consistent look and feel to your page. So, we'll go ahead and click okay, and that looks a little better for us. And keep in mind, as much as possible, you can to keep your master pages very lean and slim because any page that derives from this, especially when it comes to working with nested master pages, will experience the performance here every single time when it loads that page for every single master page that it links to. So—again—good idea to keep them lean and slim. So now we have our unordered list. We have—we could add some more elements to this—it might make sense to add a footer. Maybe we want to add a global search mechanism. But we'll keep it simple with this top header that will serve as a site-wide menu. Let's close this out, and save our changes. The next thing we'll want to do is add a departmental master page That'll help us break down our template to represent various subsections of our website. We'll go ahead and do that in our next video. [Microsoft] []

Video Details

Duration: 8 minutes and 20 seconds
Country: United States
Language: English
License: All rights reserved
Genre: None
Views: 6
Posted by: neudesicasp on Sep 5, 2013

In this video I will demonstrate how to create a simple Master Page using .NET 3.5 in Visual Studio 2008.

Caption and Translate

    Sign In/Register for Dotsub to translate this video.