Pick the Web Form option from the template list and name the file Default.aspx. Right-click on the project name in the Solution Explorer and choose Add New Item. Let's start by adding Default.aspx, our website's homepage. With the master page defined, we're ready to add the ASP.NET pages for the website. Any ASP.NET pages that use this master page will have this uniform layout, with the ability to specify the markup for the MainContent region.įigure 4: The Master Page, When Viewed Through the Design View ( Click to view full-size image) Step 2: Adding a Homepage to the Website With the markup entered above, switching to the Design view shows the master page's layout. Our master page has a single ContentPlaceHolder ( MainContent), but master page's may have multiple ContentPlaceHolders. These content editable regions are indicated by the ContentPlaceHolder control, which can be seen within the content. While you cannot tell from the markup shown below, the CSS rules are defined such that the navigation 's content is absolutely positioned so that it appears on the left and has a fixed width of 200 pixels.Ī master page defines both the static page layout and the regions that can be edited by the ASP.NET pages that use the master page. In my master page I use cascading style sheets for positioning and styles with the CSS settings defined in the external file Style.css. You can use the Design view and add whatever Layout or Web controls you need, or you can manually add the markup by hand in the Source view. Then select the Master Page type from the list of templates and name it Site.master.įigure 3: Add a New Master Page to the Website ( Click to view full-size image)ĭefine the site-wide page layout here in the master page. To create a master page, right-click on the project name in the Solution Explorer and choose Add New Item. I cleaned out those pages and files demonstrating using the DAL and BLL from the first two tutorials since we will be reexamining those examples in greater detail in future tutorials. Right now our website consists of only the Typed DataSet ( Northwind.xsd, in the App_Code folder), the BLL classes ( ProductsBLL.cs, CategoriesBLL.cs, and so on, all in the App_Code folder), the database ( NORTHWND.MDF, in the App_Data folder), the configuration file ( Web.config), and a CSS stylesheet file ( Styles.css). The first step is to create the master page for the site. By the end of this tutorial we'll have a polished website design for building our tutorial web pages.įigure 1: The End Result of This Tutorial ( Click to view full-size image) Step 1: Creating the Master Page To illustrate these concepts and make our tutorials website more usable, let's spend this lesson defining a site-wide page layout, implementing a site map, and adding the navigation UI. We'll be using the default site navigation provider, meaning that our site map will be defined in an XML-formatted file. The new navigation Web controls the Menu, TreeView, and SiteMapPath make it easy to render all or part of the site map in a common navigation user interface element. The site navigation system provides both a mechanism for page developers to define a site map and an API for that site map to be programmatically queried. This model allows developers to define and centralize a site-wide page layout, thereby making it easier to create a consistent look and feel across all pages that can easily be updated. Such ASP.NET pages need only provide content for the master page's specified editable regions all other markup in the master page is identical across all ASP.NET pages that use the master page. This template can then be applied to ASP.NET pages in the site. ![]() Master pages allow for developers to create a site-wide template with designated editable regions. ASP.NET 2.0 introduces two new features that greatly simplify implementing both a site-wide page layout and navigation scheme: master pages and site navigation. One common characteristic of user-friendly websites is that they have a consistent, site-wide page layout and navigation scheme. ![]() This tutorial looks at how you can create a consistent look and feel across all pages that can easily be updated.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |