1. Create a new web project with an empty template in Microsoft visual studio.
2. Right Click the solution explorer choose the option "Add" >> "Web Forms Master Page"
Proceedings of creating content pages
2. Right Click the solution explorer choose the option "Add" >> "Web Forms Master Page"
MyMasterPage.Master
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="MyMasterPage.master.cs" Inherits="WebAppWithMasterPage.MyMasterPage" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<style>
table.center {
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<table class="center" style="width: 75%">
<tr>
<td>
<asp:ImageMap ID="ImageMap1" runat="server" Height="40px" Width="900px"
ImageUrl="~/images/menu.jpg">
<asp:RectangleHotSpot Bottom="40" Left="0" NavigateUrl="~/History.aspx" Right="150" />
<asp:RectangleHotSpot Bottom="40" Left="150" NavigateUrl="~/Departments.aspx" Right="300" />
<asp:RectangleHotSpot Bottom="40" Left="300" NavigateUrl="~/StaffList.aspx" Right="450" />
<asp:RectangleHotSpot Bottom="40" Left="450" NavigateUrl="~/courses.aspx" Right="600" />
<asp:RectangleHotSpot Bottom="40" Left="600" NavigateUrl="~/FeeDetails.aspx" Right="750" />
<asp:RectangleHotSpot Bottom="40" Left="750" NavigateUrl="~/Contact.aspx" Right="900" />
</asp:ImageMap>
</td>
</tr>
<tr>
<td style="height: 50px; background-color: deepskyblue; vertical-align: top">
<asp:ContentPlaceHolder ID="lungs" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
<tr>
<td style="height: 380px; background-color: deepskyblue; vertical-align: top">
<asp:ContentPlaceHolder ID="stomach" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
<tr>
<td style="background-color: cornflowerblue">
GenC Batch
CHN19DN017 - A Batch towards complete knowledge
</td>
</tr>
</table>
</form>
</body>
</html>
Mandatory Step
1. The above master page contains “ImageMap” tool.
So, Design some menu Image using MsPaint or Photoshop.
2. Set the ImageUrl Property of “ImageMap” control
to that designed image.
1. Right Click MyMasterPage.Master Select “Add Content Page”
in Menu.
2. One
Content page will be added as “Webform.aspx” rename it ad index.aspx
Note: the Content page will not have HTML, head, and body tags.
Add the following content inside it.
<%@ Page Title="" Language="C#" MasterPageFile="~/MyMasterPage.Master" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="WebAppWithMasterPage.WebForm7" %>
<asp:Content ID="Content1" ContentPlaceHolderID="stomach" runat="server">
<h1>Welcome
to Anees Basha Foundation's College of ABC</h1>
<div>
Select links to access pages...
</div>
</asp:Content>
1. Right Click MyMasterPage.Master Select “Add Content Page”
in Menu
2. One
Content page will be added as “Webform.aspx” rename it ad History.aspx
Note: the Content page will not have HTML, head, and body tags.
Add the following content inside it.
<%@ Page Title="" Language="C#" MasterPageFile="~/MyMasterPage.Master" AutoEventWireup="true" CodeBehind="History.aspx.cs" Inherits="WebAppWithMasterPage.WebForm1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="stomach" runat="server">
<h1>Anees
Basha College of Arts and Science</h1>
<div>
Add some history content here...
</div>
</asp:Content>
1. Right Click MyMasterPage.Master Select “Add Content Page”
in Menu
2. One
Content page will be added as “Webform.aspx” rename it as Departments.aspx
Note: the Content page will not have HTML, head, and body tags.
Add the following content inside it.
<%@ Page Title="" Language="C#" MasterPageFile="~/MyMasterPage.Master" AutoEventWireup="true" CodeBehind="Departments.aspx.cs" Inherits="WebAppWithMasterPage.WebForm2" %>
<asp:Content ID="Content1" ContentPlaceHolderID="stomach" runat="server">
<h1>Departments
- ABC</h1>
<div>
Add some department list here...
</div>
</asp:Content>
1. Right Click MyMasterPage.Master Select “Add Content Page”
in Menu
2. One
Content page will be added as “Webform.aspx” rename it as StaffList.aspx
Note: the Content page will not have HTML, head, and body tags.
Add the following content inside it.
<%@ Page Title="" Language="C#" MasterPageFile="~/MyMasterPage.Master" AutoEventWireup="true" CodeBehind="StaffList.aspx.cs" Inherits="WebAppWithMasterPage.WebForm3" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<h1>Staff
List - ABC</h1>
<div>
Add staff list here...
</div>
</asp:Content>
1. Right Click MyMasterPage.Master Select “Add Content Page”
in Menu
2. One
Content page will be added as “Webform.aspx” rename it as courses.aspx
Note: the Content page will not have HTML, head, and body tags.
Add the following content inside it.
<%@ Page Title="" Language="C#" MasterPageFile="~/MyMasterPage.Master" AutoEventWireup="true" CodeBehind="courses.aspx.cs" Inherits="WebAppWithMasterPage.WebForm4" %>
<asp:Content ID="Content1" ContentPlaceHolderID="stomach" runat="server">
<h1>Courses -
ABC</h1>
<div>
Add some courses here...
</div>
</asp:Content>
1. Right Click MyMasterPage.Master Select “Add Content Page”
in Menu
2. One
Content page will be added as “Webform.aspx” rename it as FeeDetails.aspx
Note: the Content page will not have HTML, head, and body tags.
Add the following content inside it.
<%@ Page Title="" Language="C#" MasterPageFile="~/MyMasterPage.Master" AutoEventWireup="true" CodeBehind="FeeDetails.aspx.cs" Inherits="WebAppWithMasterPage.WebForm5" %>
<asp:Content ID="Content1" ContentPlaceHolderID="stomach" runat="server">
<h1>Fee
Details - ABC</h1>
<div>
Add Fee detaisl of each course...
</div>
</asp:Content>
1. Right Click MyMasterPage.Master Select “Add Content Page”
in Menu
2. One
Content page will be added as “Webform.aspx” rename it as Contact.aspx
Note: the Content page will not have HTML, head, and body tags.
Add the following content inside it.
<%@ Page Title="" Language="C#" MasterPageFile="~/MyMasterPage.Master" AutoEventWireup="true" CodeBehind="Contact.aspx.cs" Inherits="WebAppWithMasterPage.WebForm6" %>
<asp:Content ID="Content1" ContentPlaceHolderID="lungs" runat="server">
<h1>Contact
Details - ABC</h1>
<div>
ABC,<br />Khaja Malai,<br />Kodaikanal
Road,</br/>Dindigul.
</div>
</asp:Content>
Now. Right-click the index.aspx
select “Set as Start Page” option in Context menu
Check your application will work fine with a master page and
content pages.
No comments:
Post a Comment