23-May-07 (Created: 23-May-07) | More in 'CS-dotnet'

An exercise using masterpages: Draft

Goals

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

  1. Create a basic empty website
  2. create a main master page (banner, left hand menu, footer)
  3. create a web page that will use that master page
  4. Create a child/nested master page (provide a page menu on the right)
  5. create a web page that uses the nested master

Create a basic empty website

  1. Start from scratch
  2. create a new website application using visual studio.net
  3. create a subfolder under root called "master" to hold the master pages
  4. under master create a master page using "new item" on that folder called "MainMasterPage"
  5. At this time you wont be able to test anything yet

create a main master page (banner, left hand menu, footer)

  1. switch to the source view of the master page
  2. create an html table with html table directives
  3. Put a css class on this table called "main-layout-table"
  4. Provide three rows and 1 column in the table
  5. top row will be your banner
  6. middle row will be your body
  7. bottom row will be your footer
  8. In the top row use an h1 for entering a title
  9. In the bottom row enter "footer" as text
  10. In the second or middle row put another table and give it a class of "body-layout-table"
  11. Provide 1 row and 2 columns in the table
  12. 1st column will be 15% and 2nd column will be 85%
  13. In the first column put plain text called "left hand menu" goes here
  14. 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

  1. Create a sub folder called "test" under root to hold the web pages to test the master pages
  2. Create a new web page called testMainMasterPage.aspx
  3. Go to the source view of the page (not the code behind) but the code that contains the asp tags
  4. In the header of the page indicate that this page uses the main master page
  5. Delete the rest of the content of the page as vs.net would have created some sample tags
  6. Put a content control to satisfy the content place holder specified in the master page
  7. Insdie the content control tags put a hello world text
  8. In a web page that is refering the master page all html content should be inside a content tag
  9. Compile/build the solution
  10. Set this page as the start page of the website and run with out debugging
  11. 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)

  1. Goal of this exercise is to provide a page menu on the right hand side of the content
  2. Create another masterpage in the "master" subfolder called NesterMasterPage.master
  3. Create a content tag satisfying the contract of the main master page
  4. Inside this content tag create a table with 1 row and 2 columns
  5. column1 will be 80% and column2 will be 20%
  6. In column1 put a content place holder and call it "PageContent"
  7. In coulmn2 put a content place holder and call it "PageMenuContent"

Create a web page that uses the nested master

  1. Create a test page for this under test subdirectory and call it testNestedMasterPage.aspx
  2. Associate this page to the NestedMasterPage.aspx
  3. Create two content tags one for "PageContent" and the other "PageMenuContent"
  4. In the "PageContent" tag say "hello world Page"
  5. In the "PageMenuContent" tag say "hello world Page Menu"
  6. Build the solution
  7. Test it
  8. You should see content displayed in the page content cell and also in the page menu content cell.

Conclusion

Deliverables

  1. master/MainMasterPage.master
  2. master/NesterMasterPage.master
  3. test/testMainMasterPage.aspx
  4. test/testNestedMasterPage.aspx

Answer: master/MainMasterPage.master

Answer: master/NesterMasterPage.master

Answer: test/testMainMasterPage.aspx

Answer: test/testNestedMasterPage.aspx