Scribd
Upload
6 views17 pages

After Mid Lec 2

This document provides a tutorial on using Master Pages in ASP.NET with Microsoft Visual Studio 2015. It explains the concept of Master Pages, how to create and apply them to web forms, and includes detailed steps for designing a consistent layout for web applications. Additionally, it covers the incorporation of images into the Master Page for enhanced visual appeal.

Uploaded by

irum
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views17 pages

After Mid Lec 2

This document provides a tutorial on using Master Pages in ASP.NET with Microsoft Visual Studio 2015. It explains the concept of Master Pages, how to create and apply them to web forms, and includes detailed steps for designing a consistent layout for web applications. Additionally, it covers the incorporation of images into the Master Page for enhanced visual appeal.

Uploaded by

irum
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

Visual Training

Of

Microsoft Visual Studio2015

Web based Applications using ASP.Net with MS Visual C-


Sharp
Visual Training

Of

Microsoft Visual Studio2015


Web based Applications using ASP.Net with MS Visual C-
Sharp
Chapter No.2

Master Pages

In

ASP.Net
In today’s session:
 Understanding the Master Page
 Creating the Master Page
 Using the Table Tags in Master Page
 Applying the Master Page to other Pages

1.1 Master Pages

In Web site development using ASP.NET, the master page is a feature that enables you to
define common structure and interface markup elements for your Web site,
including headers, footers, style definitions, or navigation bars. Master pages allow you to
create a consistent look and behavior for all the pages (or group of pages) in your web
application. The master page can be shared by any of the pages in your Web site, called
the Content Page, and removes need to duplicate code for shared elements within your Web
site. The master page defines placeholders for the content, which can be overridden by
content pages. When users request the content page, ASP.NET merges the pages to produce
output that combines the layout of the master page with the content of the content page.

1.2 Adding the Master Page to the Web Site


A Master Page is used to provide a consistent look to the web site. Before you add a Master
Page to your web site, design it on the page how do you want to design it, for example we
want to design it as:
 First Row is the Header
 Second Row Having Links and Body of the Site
 Third Row has the Footer Links
For example:
Left Image Header Text Right Image

Marquee NEWS

Left Links Body Text (contents Page will be opened here) [Colspan = 2]

Centrally Aligned Footer Links


Follow these steps to add and use Master Pages to your Web Site.
1. Create a New ASP.Net Empty Web Site, Name it as UsingMasterPages
2. Right Click the web site and choose Add New Item as shown,

3. Here, From the Open Add New Item Window the Master Page and press Add
button
4. The Master Page will be added to your web site and you will see the Master Page.
Here, first Change the Title of the Master Page in the HTML <HEAD> tag as shown:
<title> :: Students Portal :: </title>

5. In the Master Page, see the selected <DIV> Tag. There is a tag called
<asp:ContentPlaceHolder>. This tag defines the area in which all the other linked web
forms are displayed. Here before the <DIV> tag, design the <TABLE> as we give the
Table design on previous page of this document.

6. From the above figure, it is clear that there are


a. Table width=100% and Border=”2”
b. Total Four Rows
c. In first Row, there are three TDs. First and third TD is of Width=15% and
remaining Width=”70%” will be allocated to Middle TD
d. In Second Row, we have used ColSpan = “3” and add a <MARQUEE> tag
e. In the third TD, first TD is displayed as in first TR but the next two TDs are
merged using Colspan=”2”
f. In the last and 4th Row, three TDs are merged using Colspan=”3” and are
aligned in the center.
The complete HTML code is given by in the Master Page before the <DIV> tag.
<%@ Master Language="C#" AutoEventWireup="true"
CodeFile="MasterPage.master.cs"
Inherits="MasterPage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>:: Students Portal :: </title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<table width="100%" border="2">
<tr>
<td width="15%">Logo-1</td>
<td>Students <br />Portal</td>
<td width="15%">Logo-2</td>
</tr>
<tr>
<td colspan="3">
<marquee>Today! We are learing Using Master Pages in ASP.Net</marquee>
</td>
</tr>
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="3" align="center"> &copy;</td>
</tr>
</table>
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1"
runat="server">

</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
7. Next Step is to Cut the Content Place Holder tag inside the <DIV> tag as we have
shown in the gray color highlighted in the above figure. Now, Paste it in the third
Row second <TD> in which we have used Colspan=”2”. This is shown in the next
figure.
Finally, this is the complete Master Page Code. Now, Add a Web Form and Apply
Master Page to this Web Form As Master Page is useless unless we not apply it to a page
that will be opened inside the Master Page.
Here , we have learnt how to add and design a Master Page in ASP.Net. In the following
Section, we will see how to apply Master Page to Web Form or Content Page.
1.3 Applying Master Page to the Content Page
1. Add a New Form by Right Click on the Web Site Name and Choose Web Form and at
the bottom of the Add New Item Window, Check the Apply Master Page Option as
shown

2. Then Press the ADD button, you will be shown all the Master Pages in your web
site, here Select the required Master Page, as we can have multiple Master Pages in a
single Web. For the time being we have only one Master Page for our web site. Press
the OK Button,
3. You can see the following Code in the Home.aspx file. In this file, Developer can
add the code for the Home.aspx page between the

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1"


Runat="Server">

Developer Area to do Code here for Home.aspx Page


</asp:Content>

As an example code is given here.

Finally, Save the file, and run the web site. You will see the following output
That is all, we want to do today….

1.4 Using Images in the Header of the Site


To manage a site in an efficient way, place the similar type of items in the folders. In a web
site we may have a no of images. So we have to add a folder named Images, in which we
place all of the site images.

To add a folder and rename the folder to Images, follow the steps shown below:
 Right Click the Web Site and
 Choose Add  New Folder option and rename the Folder to Images
 Copy some Images to this folder by simple Copy & Paste Options.
 After adding Images to the folder, open the Master Page in Source Code View. Look for
the <TD> in the first <TR> of the above designed Master Page and add image using <IMG>
tag. This code is shown here

 Finally, Save and run the web site

You can set its Height and Width property according to your site requirements:
Here, we set the
Height = 180 and Width = 200
Similarly, add the second image in the third <TD> of the same <TR> . Thus the complete
code of first <TR> is shown here

Thus, the site is furnished with images. In this way, you can add images as much as and
anywhere in your web site. The final output is

Congratulations! You have successfully used the Master Pages in

ASP.NET Web Sites

These ASP.Net Tutorials are prepared only for the purpose of learning ASP.Net with C#.
Anyone can copy, print or reuse it in any format
Saif Ur Rehman Saifi
Assistant Professor, UIIT
PMAS Arid Agriculture University, Rawalpindi
If you found this tutorial helpful or you want to give us any valuable suggestions contact at
www.ASPUIIT.blogspot.com

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy