Set Up a Simple Theme for Your Website Using WebMatrix

image108_thumb1

A consistent look and feel is a quality of many professional Websites. Some types of elements are often repeated within the header and footer sections of every page, for example: the banner image,  a company name or logo, the business address and contact information.

 

  1. Install WebMatrix
  2. Read or Watch the Tutorial
  3. Create your Site

If you’re building a simple Website from scratch, you can avoid copying and pasting these repeated elements into your Webpages by defining the header and footer elements once, and reusing them across multiple pages within your Website. Not only does this ensure consistency across pages, it also makes it easier to maintain your Website.

Watch the How-To Video

play_tutorial_video_thumb5

How-To Guide 

This tutorial illustrates how to create the basic elements of a professional Website and how to provide a consistent implementation using WebMatrix and the Razor syntax. WebMatrix is a comprehensive, lightweight set of Web development tools that provides an easy way to build Websites.  The Razor syntax provides an easy and compact way to embed server code into HTML markup.                        

WebMatrix is free, and is easy to download. Within minutes you can start creating your business Website.  See Getting Started with WebMatrix Beta and ASP.NET Web Pages, if you haven’t yet installed it.

In Part 1 of this series, we’ll explain how to define reusable document fragments and include them in a page using the Razor syntax and RenderPage construct. For more information on the Razor syntax, see Introduction to ASP.NET Web Programming using the Razor Syntax.

We’ll walk through the following steps:

Step 1: Create the initial Website

Launch WebMatrix and select Site From Template.

1-1[2]

Select Empty Site, give it a name, and click OK.

1-222

Let’s set up some folders for files we’ll be using across multiple pages.

  • To create a folder in WebMatrix, right click on the parent folder (in this case, ContosoHotel) and select New Folder.

1-3

  • The new folder will appear with the default name New Folder. To give it a name, simply type over the selected text.

1-4

  • Name this first folder Shared. We’ll be storing our reusable header and footer files in this folder.
  • Repeat the process to create another folder for style definitions, and name it Styles. 
  • Repeat the process again to create a folder for images, and name it Images. We’ll be placing the image files referenced by the header and footer definitions in this folder.

Create a file for site-wide style definitions.

  • To create a new file in WebMatrix, right click on the parent folder (in this case the Styles folder), and select New File.

1-5

  • Then, select the type of file you want to create (in this case, CSS) and specify a name in the Name text box. Name this file StyleSheet.css.

1-6

[Cascading Style Sheets (CSS), are used to define the formatting and visual styles of Webpages. If you are unfamiliar with CSS, see Introduction to CSS].

Step 2: Set up the header definitions

Now that we’ve set up the site structure, let’s create the header fragment we’ll be using across our pages.  Follow the process described above for creating new files and create the header file in the Shared folder. Right click on the Shared folder, select New File, select CSHTML. [A CSHTML page is a special type of page in WebMatrix. In addition to the usual contents of a Webpage, such as HTML, it contain code that uses the Razor syntax.]

  • Name the file _Header.cshtml.  [Since the header file is not meant to be accessed on its own, we’ve prefixed the file name with an underscore (_) to prevent it from being displayed in a browser, if requested directly.] 
  • Delete the code created by default in the _Header.html file.

First, let’s add an HTML element to enclose the entire header section:

  • In the _Header.cshtml file, add an HTML div element and assign it an id:
<div id="header">

</div>

As we add each HTML element to the header, we’ll specify an id or class attribute to enable corresponding CSS definitions to be created in the StyleSheet.css file. For example, for the header element we just added, we might add the following CSS definition:

#header {
height: 243px;
width: 100%;
}

Let’s add a banner image to the header. A professional image in the header will attract visitors’ attention. (Professional quality photos are available from online stock photo houses and local photographers.)

  • Add the following attribute to the header style we just defined in StyleSheet.ccs:
background: url(../Images/contoso_masthead_bkgd.jpg) no-repeat;

Using your company logo, or logotype, encourages brand recognition as visitors navigate to different pages within your site. To add the company logotype to the header:

  • In the _Header.cshtml file, add an image element to the header div:
<img src="../Images/contoso_hotel_logo.png" alt="Contoso Hotel Logo" id="logo" />

[Note: To improve your organic search rankings (SEO), you’ll want to provide a value for the alt attribute. If you’re not familiar with Search Engine Optimization (SEO), you might want to check out Getting Started with SEO Using WebMatrix.]

Another element we might want to include across the top of all our pages is a primary navigation menu.

  • In the _Header.cshtml file, add a list element (ul) to the header div to represent the menu, and assign it an id:
<ul id="nav" >
<li><a href="#">Home</a></li>
<li ><a href="#">Meetings &amp; Events</a></li>
<li><a href="#">Photo Galleries</a></li>
<li><a href="#">Our Location</a></li>
<li><a href="#">About Contoso</a></li>
<li><a href="#">Reservations</a></li>
<li><a href="#">Contact</a></li>
</ul>
 
As pages are added for each menu item, you would update the item’s href attribute to point it. (We’ll see an example of this later on, when we add the Home page.)

Step 3: Set up the footer definitions

As described above for the header, create a new file in the Shared folder for the footer definitions:

  • Right click on the Shared folder, select New File, select CSHTML, and name the file _Footer.cshtml.
  • Delete the code created by default in the _Footer.html file.

Using the same approach described above for the header, we’ll add HTML elements to the _Footer.cshtml file.

Let’s add an HTML element to enclose the entire footer section:

  • In the _Footer.cshtml file, add an HTML div element to enclose the footer and assign it an id:
<div id="footer">

</div>

Add the company address and contact information to the footer element, along with a copyright notice:

<div>
<p>The Contoso Hotel<br>
123456 Contoso Drive<br>
Monterey, CA 91234 U.S.A.</p>
</div>

<div>
<p>Telephone: (805) 555-0100<br>
Fax: (800) 555-1212<br>
Email: <a href="#">info@contosohotel.com</a></p>
</div>
<div class="last">
<p>Contoso Hotel<br>
All Rights Reserved &copy; 2011</p>
</div>

Step 4: Create the home page, and add the header and footer blocks

To create the home page, add a new file to the root folder:

  • Right click on ContosoHotel, select New File, select CSHTML, and name the file Default.cshtml. Then click OK.

Insert the header and the footer into the page:

<body>
@RenderPage("/Shared/_Header.cshtml")

<!-- Insert page content here. -->

@RenderPage("/Shared/_Footer.cshtml")
</body>
 
The @ character denotes the start of a code block in the Razor syntax. The call to RenderPage injects the contents of the _Header.cshtml file into the page, enabling us to reuse the header across multiple pages.
Update the head element of the page:
  • Populate the title tag
  • Add a reference to the style sheet
<title>Contoso Hotel</title>
<link rel="stylesheet" href="Styles/StyleSheet.css" type="text/css" media="screen" />
 
Now that we’ve added the home page, let’s update the menu link in the header file:
  • In _Header.cshtml, update the href attribute of the Home element to point to the home page:
<li><a href="Default.cshtml">Home</a></li>
 
Make sure you have the Default.cshtml file selected, and click Run on the menu ribbon to see the end result.

1-7
(If you’re following along using just the code in this tutorial, you’ll need to add some style definitions in StyleSheet.css, to see the page as pictured above.)

Beyond the Basics: Adding the Bing Search Box

A search box is a common element of many Websites, typically enabling visitors to search both within the site and on the Web. The Bing Box can be configured to provide these search capabilities on our site, and you can easily include it within your page header using the Bing helper.

Helpers provide an easy way to perform common web tasks, and are called from your Web pages using the @helper syntax. The Bing helper is included in the Microsoft Web Helpers package.  To install the package, follow the instructions in the section titled Installing Helpers with the Administration Tool in the Getting Started with WebMatrix and ASP.NET Web Pages tutorial.

To add the Bing Search Box to the header;

  • Open the _Header.cshtml file and add the search box:
<div id="search">
@Bing.AdvancedSearchBox(siteUrl: "www.contosohotel.com",
siteName: "Contoso Hotel",
boxWidth: 250,
resultWidth: 600,
resultHeight: 700,
themeColor: "Green",
locale: "en-US")
</div>

[For more information on the Bing helper,  see the Adding Search to Your Website.]

Click Run to view the page in the browser. Here’s our end result:

1-8

Links to other resources:

You can discuss this article using the adjacent Facebook talkback.

For technical questions please visit our discussion forums, where we have a vibrant community of developers like you, as well as Microsoft engineers who are ready to answer your questions!