Creating a Consistent Look Using Layout Pages

So far you've seen that it's easy to include the same content on multiple pages. A more structured approach to creating a consistent look for a site is to use layout pages. A layout page defines the structure of a web page, but doesn't contain any actual content. After you've created a layout page, you can create web pages that contain the content and then link them to the layout page. When these pages are displayed, they'll be formatted according to the layout page. (In this sense, a layout page acts as a kind of template for content that's defined in other pages.)
The layout page is just like any HTML page, except that it contains a call to the RenderBody method. The position of the RenderBody method in the layout page determines where the information from the content page will be included.
The following diagram shows how content pages and layout pages are combined at run time to produce the finished web page. The browser requests a content page. The content page has code in it that specifies the layout page to use for the page's structure. In the layout page, the content is inserted at the point where the RenderBody method is called. Content blocks can also be inserted into the layout page by calling the RenderPage method, the way you did in the previous section. When the web page is complete, it's sent to the browser.

The following procedure shows how to create a layout page and link content pages to it.

In the Shared folder of your website, create a file named _Layout1.cshtml.

Replace any existing content with the following:

<!DOCTYPE html>
  <head>
    <title> Structured Content </title>
    <link href="@Href("/Styles/Site.css")" rel="stylesheet" type="text/css" />
  </head>
  <body>
    @RenderPage("/Shared/_Header2.cshtml")
    <div id="main">
      @RenderBody()
    </div>
    <div id="footer">
      &copy; 2010 Contoso Pharmaceuticals. All rights reserved.
    </div>
  </body>
</html>

You use the RenderPage method in a layout page to insert content blocks. A layout page can contain only one call to the RenderBody method.

Note Web servers don't all handle hyperlink references (the href attribute of links) in the same way. Therefore, ASP.NET provides the @Href helper, which accepts a path and provides the path to the web server in the form that the web server expects.

In the Shared folder, create a file named _Header2.cshtml and replace any existing content with the following:
```
<div id="header">Chapter 3: Creating a Consistent Look</div>
```
In the root folder, create a new folder and name it Styles.

In the Styles folder, create a file named Site.css and add the following style definitions:

h1 {
    border-bottom: 3px solid #cc9900;
    font: 2.75em/1.75em Georgia, serif;
    color: #996600;
}

ul {
    list-style-type: none;
}

body {
    margin: 0;
    padding: 1em;
    background-color: #ffffff;
    font: 75%/1.75em "Trebuchet MS", Verdana, sans-serif;
    color: #006600;
}
#list {
    margin: 1em 0 7em -3em;
    padding: 1em 0 0 0;
    background-color: #ffffff;
    color: #996600;
    width: 25%;
    float: left;
}
#header, #footer {
    margin: 0;
    padding: 0;
    color: #996600;
}

These style definitions are here only to show how style sheets can be used with layout pages. If you want, you can define your own styles for these elements.

In the root folder, create a file named Content1.cshtml and replace any existing content with the following:

@{
    Layout = "/Shared/_Layout1.cshtml";
}
<h1> Structured Content </h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>

This is a page that will use a layout page. The code block at the top of the page indicates which layout page to use to format this content.

Run Content1.cshtml in a browser. The rendered page uses the format and style sheet defined in _Layout1.cshtml and the text (content) defined in Content1.cshtml.

You can repeat step 6 to create additional content pages that can then share the same layout page.

software collections

Friday, 2 September 2011

Creating a Consistent Look Using Layout Pages

No comments:

Post a Comment