Masterpages are keys in constructing websites in asp.net. They provide the background for a website such as the top banners, left hand navigation, footer etc. In this exercise you will need to
- Create a basic empty website
- create a main master page (banner, left hand menu, footer)
- create a web page that will use that master page
- Create a child/nested master page (provide a page menu on the right)
- create a web page that uses the nested master
Create a basic empty website
- Start from scratch
- create a new website application using visual studio.net
- create a subfolder under root called "master" to hold the master pages
- under master create a master page using "new item" on that folder called "MainMasterPage"
- At this time you wont be able to test anything yet
create a main master page (banner, left hand menu, footer)
- switch to the source view of the master page
- create an html table with html table directives
- Put a css class on this table called "main-layout-table"
- Provide three rows and 1 column in the table
- top row will be your banner
- middle row will be your body
- bottom row will be your footer
- In the top row use an h1 for entering a title
- In the bottom row enter "footer" as text
- In the second or middle row put another table and give it a class of "body-layout-table"
- Provide 1 row and 2 columns in the table
- 1st column will be 15% and 2nd column will be 85%
- In the first column put plain text called "left hand menu" goes here
- In the second coulmn put an asp.net control called contentplace holder and give it an id called "pagecontent"
create a web page that will use that master page
- Create a sub folder called "test" under root to hold the web pages to test the master pages
- Create a new web page called testMainMasterPage.aspx
- Go to the source view of the page (not the code behind) but the code that contains the asp tags
- In the header of the page indicate that this page uses the main master page
- Delete the rest of the content of the page as vs.net would have created some sample tags
- Put a content control to satisfy the content place holder specified in the master page
- Insdie the content control tags put a hello world text
- In a web page that is refering the master page all html content should be inside a content tag
- Compile/build the solution
- Set this page as the start page of the website and run with out debugging
- You should see your hello world displayed in the body portion of the page
Create a child/nested master page (provide a page menu on the right)
- Goal of this exercise is to provide a page menu on the right hand side of the content
- Create another masterpage in the "master" subfolder called NesterMasterPage.master
- Create a content tag satisfying the contract of the main master page
- Inside this content tag create a table with 1 row and 2 columns
- column1 will be 80% and column2 will be 20%
- In column1 put a content place holder and call it "PageContent"
- In coulmn2 put a content place holder and call it "PageMenuContent"
Create a web page that uses the nested master
- Create a test page for this under test subdirectory and call it testNestedMasterPage.aspx
- Associate this page to the NestedMasterPage.aspx
- Create two content tags one for "PageContent" and the other "PageMenuContent"
- In the "PageContent" tag say "hello world Page"
- In the "PageMenuContent" tag say "hello world Page Menu"
- Build the solution
- Test it
- You should see content displayed in the page content cell and also in the page menu content cell.
satya - Wednesday, May 23, 2007 4:54:27 PM
Here are some basics on master pages
satya - Wednesday, May 23, 2007 5:00:41 PM
Idea for a MainMasterPage.master
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MainMasterPage.master.cs" Inherits="MainMasterPage" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div> <table class="main-layout-table"> <tr><h1>Header</h1></tr> <tr> <table> <tr><td width="15%">leftmenu</td> <td width="85%"> <asp:contentplaceholder id="PageBody" runat="server"/> </td> </tr> </table> </tr> <tr>footer</tr> </table> </asp:contentplaceholder> </div> </form> </body> </html>