This is the first article in the Master Pages series. So I am very excited. Because I was writing a Blog, it may be inevitable to make mistakes. Please criticize and correct them carefully.
Introduction:
The well-designed site LayOut has two excellent features. one is that the entire website maintains a uniform website style. Let's take a look at Http: // www. asp. met (Figure 1), basically the Top and Bottom of each page, this ensures that the website looks consistent.
(Figure 1)
The other is to easily change the appearance of the website, that is, to quickly change the color, Font, and content of the page, rather than changing the style, modify thousands of pages and code.
So how can we create a site with a uniform style ?. NET Master Pages is the control we want to use. using Master Pages, we can easily create a general template page, so that we can easily change the appearance of the entire site as long as we change the template page style.
Okay. Let's take a look at how Master Pages works.
In addition to content pages, we usually need to display basically the same content for other parts such as Top, Bottom, and Left, just like the Http: // www.asp.net site, top is the Logo of the page and a series of links, and Bottom is an advertisement or some CopyRight information. these contents are required for every page.
So how do we create such a website? There are many technologies that can be used to do this, such as Frame and UserControl. however, the fastest and easiest way is to create one through master Pages. master Pages can be used to create common parts and custom parts that do not need to be displayed.
Step 1:Create Master Page
Create a new website (figure 2)
(Figure 2)
Add a MasterPage (Figure 3)
(Figure 3)
Let's take a look at the Html code of Site. Master.
We can see the Html code of Site. Master.
.Web Form(<Form runat = "server">) is the same as creating the. Retrial page.
.ContentplaceholderThis is the control that displays custom content.
Create a simple layout.
Open our Site. Master and create a general layout: Header, Left (navigation), News (content), Footer. (Figure 4)
(Figure 4)
Step 2: add content Pages
Everything is ready. now we can create a content page. adding a content page is as simple as creating An ASPx page. the only difference is that in the pop-up Page creation window, select Master Page. (figure 5)
Add content. We can create any content on the page we created, because it is the same as ASPX. you can add webcontrols, text, Html code, and so on. in our example, I just added some Text. (4)
Here we will finish the simple creation of the MasterPages page. If you want to know how a Master Pages page generates code, you can right-click the page to view the source code.
But how can we apply a Master Page to an existing ASPX Page during website creation ??
Follow me:
1: To the existing page@PageCommand addedMasterPageFileAnd points to the Master page. (MasterPageFile = "~ /Site. master")
2: added the Content control corresponding to the ContentPlaceHolder control in Master Pages <asp: Content id = "content1" ContentPlaceHolderID = "MainContent" runat = "server"> </asp: Content>
3: remove the Html and Form code because the corresponding code already exists in the Master Page.
In this way, we can bind the Master Page to a created ASPX Page. but we can see that. time-consuming and laborious. create a new ASPX page. you can directly select the Master Page, which is relatively simple. therefore, we recommend that you select any website. first, create a Master Page, whether used or not.
Step 3: update the Master Page
Since a Master Page is used in the whole website. so we need to update some public parts. update the Master Page template. the following is a simple example: display time on Left. we only need to add a Label in Master Left to assign a value to the Page_Load event of the background code.
Display timeBackground
CodeView the effect
So far, the first lecture of the Master Page series is over. For more information, see the next lecture <multiple ContentPlaceHolders>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
