Microsoft Expression Web - Master Pages


Advertisements


In this chapter, we will learn about ASP.NET master pages. When we create a master page, we can lay it out, apply styles, and add ASP.NET controls in the same way as in other pages in Microsoft Expression Web. The layout and content we create in a master page are applied to the pages attached to the master page. It is a similar concept to Dynamic Web Template.

Dynamic Web Templates enable you to apply a common look and feel to all the pages in your website. As Dynamic Web Templates are applied in the pages to which they are attached at design time, applying changes to all the pages in a site can cause a delay while the HTML is updated in all the pages.

If the server is running ASP.NET, ASP.NET Master Pages allow for similar functionality by defining the editable areas in the template. However, the application of the template to the custom content in the pages is done dynamically at runtime.

Example

Let’s take a look at a simple example in which we will create a master page using CSS template and use this master page to create other pages.

Step 1 − Open the index.html page in which we have defined different sections using CSS style-sheet.

CSS

Step 2 − From the File menu, go to New → Page and you will see the New page dialog.

Master Page

Step 3 − From the left pane, select ASP.NET and from the middle list, select Master Page and click the OK button.

ASP.NET

Step 4 − The above screen will produce a pop-up named Untitled1.master. Save this page and name it default.master.

default.master

Step 5 − We want to build our design into the master page that will be shared throughout our site. So let’s copy the code of the content that you would like to have on each page from the index.html code and paste the code to the default.master page.

default.master page

Step 6 − Now we have a layout that we would like to use on every page of the site. However, if we were to start building the content pages now, we wouldn't be able to actually enter any content into this layout. Hence, we need to create ASPX content pages from the master page. To do this, we have to add the content region as well so that we can add content to the specified pages.

ASPX context

In the design view, right-click where you want the content on your pages. Let’s say we want to add content in the main-content section and then click the Manage Microsoft ASP.NET Content Regions…

Step 7 − In the Manage Content Regions wizard, enter the Region Name and click Close.

Regions Name

Step 8 − As can be seen in the following screenshot, the Content PlaceHolder is added in the main-content section. Now we have to add ASPX web page.

PlaceHolder

Step 9 − Go to the File menu and select New → Create from Master Page…

Create From Master Page

Step 10 − Browse to the default.master page and click OK.

Click OK

Step 11 − Now, a new ASPX page is created and all the layout styles are applied from the master page.

ASPX Page

Add some text in the main section.

Main Section

Step 12 − Save this page and call it mypage.aspx and then preview it in a browser.

mypage.aspx

Advertisements
E-Books Store