Master Page
Master Page is a layout which will give you
the consistent look, feel and behavior for all the pages (or group of pages) in
your web site or application.
Basically Master page is a template for other
pages which shared layout and functionality with the pages. Master Page contains
the ContentPlaceHolder, which is overridden by the content pages. Content page
contains only the content. The output is a combination of Master page and
content page.Step 1: Create a
New Web Site
Go to File menu then
New then Web Site then Select ASP.Net Empty
Web Site like the following.
![Img-1.jpg]()
Step 2: Take a Master Page
Right click on the project in the solution bar
Select Add New Item and Select Master Page
from the Template and give a name or leave the name and click Add.
![Img-2.jpg]()
Step 3: Write Code as follows
<html
xmlns="http://www.w3.org/1999/xhtml">
<head
id="Head1"
runat="server">
<title>
<asp:ContentPlaceHolder
ID="title"
runat="server">
</asp:ContentPlaceHolder>
</title>
<link href="Styles/main.css"
rel="stylesheet"
type="text/css"
/>
<asp:ContentPlaceHolder
ID="head"
runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1"
runat="server">
<div class="wrapper">
<div
class="menu">
<ul>
<li
class="navigation_first_item"><a
href="Default.aspx">Home</a></li>
<li><a
href="Category.aspx">Category</a></li>
<li><a
href="#">Contact
Us</a></li>
<li><a
href="#">About Us</a></li>
</ul>
</div>
<div
class="clear">
</div>
<div
class="content">
<asp:ContentPlaceHolder
ID="contentBody"
runat="server">
</asp:ContentPlaceHolder>
</div>
<div
class="clear">
</div>
<div
class="footer">
<h2>
[email protected]</h2>
</div>
</div>
</form>
</body>
</html>
Step 4: Take Default and Category page
Right Click on the project and click Add
New Item and then select Web Form and make sure you are selecting the
check box “Select Master Page“.
![Img-3.jpg]()
Style Sheet
/*
--------- RESET --------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,textarea,p,blockquote,th,td
{
padding:
0;
margin:
0;
}
/*body*/
body
{
background-color:
rgb(237, 237, 237);
font-family:
"Arial",Helvetica,sans-serif;
font-size:
12px;
}
/*Page*/
.wrapper
{
width:
950px;
margin:
auto;
}
/* Home
Page */
.content
{
width:
100%;
background-color:
rgb(254, 254, 254);
border:
1px solid
rgb(224, 224, 224);
border-radius:
5px 5px
5px 5px;
float:
left;
margin-top:
8px;
margin-bottom:
8px;
min-height:
400px;
}
/*Menu*/
.menu
{
background-color:
rgb(10, 110, 178);
width:
100%;
margin:
0px 0px
10px;
padding:
0px;
height:
40px;
color:
rgb(243, 243, 243);
border-radius:
5px 5px
5px 5px;
}
.navigation_first_item{
border-left:0px;
/*-moz-border-radius:
5px 0 0 5px;
-webkit-border-radius:
5px 0 0 5px;*/
border-radius:
5px 0
0 5px;
}
.navitem_s
{
float:
left;
border-right:
1px solid
rgb(10, 85, 125);
border-left:
1px solid
rgb(67, 153, 200);
height:
40px;
background-color:
rgb(14, 79, 114);
}
.menu
ul {
}
.menu
ul li {
float:
left;
display:
block;
list-style:
none;
border-right:
1px solid
rgb(10, 85, 125);
border-left:
1px solid
rgb(67, 153, 200);
}
.menu
ul
li.navigation_first_item:hover {
border-radius:
5px 0px
0px 5px;
}
.menu
ul li
a
{
font-size:
13px;
font-weight:
bold;
line-height:
40px;
padding:
8px 20px;
color:
rgb(255,255,255);
text-decoration:
none;
}
.menu
ul li:hover
{
background-color:
rgb(14, 79, 114);
border-right:
1px solid
rgb(14, 89, 130);
}
.clear
{
clear:
both;
}
/*Footer*/
.footer
{
height:
50px;
background-color:
rgb(10, 110, 178);
color:
rgb(255,255,255);
border-radius:
5px 5px
5px 5px;
}
.footer
h2
{
padding:
15px;
text-align:
center;
}