Adding a new Content Page Part 2

We are going to face this problem if we create the content page before the master page. However, there is a way to solve this problem.

1. Shift to the source view of the page. At the top of the page, there is a line of code:

 <%@ Page Language = "C#" AutoEventWireup = "true" CodeFile = "Default.aspx.cs" Inherits = "_Default" %> 

2. Select everything below this line and delete them. The page should look like this:

3. Before performing the next step, let us spend a little time to understand this one line of code. Though it looks like a mysterious, cryptic code, it is actually known as a page directive. This line of code tells the VWD how to process the page. For example, the Language= "C#" part indicates that the Visual C# programming language is used for writing the code of this page (We have not written any code so far).

Here, the word Language (in red color) is known as attribute and the word C# (in blue color and between double quotes) is known as value. Therefore, we can say that our page has an attribute called Language and the value of this attribute is C#. If we want to write code in Visual Basic, the value of the Language attribute should be VB.

As we can see in the code, there are some attributes and each attribute has a value. Attributes are displayed in red color while values are in blue color and are placed inside double quotes.

Most of the time, we do not need to specify these attributes and values. VWD IDE generates them automatically for us. So why are we discussing them? Because there is an attribute called `MasterPageFile' and it is used to link the current page to a master page. In the next step, we are going to add this attribute.

4. Click after the last value in the code (just before the ending % symbol). If we press the spacebar now, a list will open up:

This list contains all the possible attributes that can be added here. Scroll down the list until the `MasterPageFile' attribute is found. Click on it and then press the enter key or TAB key. The attribute is now added and displayed in red color like the other attributes.

5. Now we need to specify a value for this attribute. The possible value for this attribute is the name of our master page. To assign the value, press the `=' key and we will get another list, displaying the name of our master page.

Click on the name of our master page (MasterPage.master) and press the enter key or the TAB key. The value is now added.

We have just used a great feature of VWD IDE - the `Intellisence'. When we write code, the IDE tries to guess what we are doing and presents a list of possible options. All we need to do is to select the required option. We used the intellisense to select the appropriate attribute and its value.

6. Switch back to the design view and voila! We have the elements of the master page on our Default.aspx page. We also have the Content box to place the content of our home page. However, if we click inside the white area of the Content box, we will not get the typing cursor. In the next step, we are going to sort out this problem.

7. Notice the small black arrow at the top-right corner of the content box. It is called a Smart Tag. The Smart Tag will only be visible when we move the mouse on the content box. If we move the mouse out of the content box or click somewhere else on the page, it will disappear.

Clicking on the Smart Tag arrow will pop up a menu called `Content Tasks'. The menu has only one option in it - `Create Custom Content'. Click on this option.

As soon as we click on the `Create Custom Content' option, the typing cursor appears inside the content box. Now all we need to do is to create a placeholder page.

We can run this page to test if everything is working properly. Here is our homepage in the browser:

In this chapter, we have learned how to add content pages to our site and link them to the master page. We can add a new content page or we can convert a previously created page into a content page.

Before we move on, note that when we run any page of our site, the title bar of the browser says `Untitled' page. This is because our master page does not have a title. To provide each individual page its own title, open that page in the IDE, go to the source view and add the following attribute in the first line of code -

Title="<put the title here>"

For example, to provide a title to our Contact.aspx page, the first line of the code in the source view should be like this:

 <%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Contact.aspx.cs" Inherits="Contact" Title="Contact Us" %> 

Here is another way of doing this:

1. Open the page in the IDE and switch to design view.

2. Click anywhere on the page (but not on the Content box or any other control).

3. Open the properties window by moving the mouse on the `Properties' tab.

4. Look for a property called `Title'. Click inside the cell next to it and type the title of the page.

5. Press the enter key.

6. Save the page. If we now move to the source view and examine the first line of the code, the Title attribute is added automatically by the IDE.

In the next chapter, we are going to add a navigation system to our site so that the user can browse the different pages of our site with ease.