03.11.2016 Views

Beginning ASP.NET 4.5 in CSharp and VB Opsylum

You also want an ePaper? Increase the reach of your titles

YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.

210 x CHAPTER 6 CREATING CONSISTENT LOOKING WEBSITES<br />

Master Page<br />

Header<br />

Content Page<br />

Menu<br />

ContentPlaceHolder<br />

Header<br />

Menu<br />

FIGURE 6-1<br />

F<strong>in</strong>al Page<br />

To see this process <strong>in</strong> action, the follow<strong>in</strong>g sections guide you through creat<strong>in</strong>g master <strong>and</strong> content<br />

pages.<br />

Creat<strong>in</strong>g Master Pages<br />

You can add master pages to the site us<strong>in</strong>g the Add New Item dialog box. You can place them <strong>in</strong><br />

any custom folder <strong>in</strong> the site, <strong>in</strong>clud<strong>in</strong>g the root folder, but from an organizational po<strong>in</strong>t of view, it’s<br />

often easier to store them <strong>in</strong> a separate folder. Just like normal <strong>ASP</strong>X pages, they support the <strong>in</strong>l<strong>in</strong>e<br />

code model as well as the Code Beh<strong>in</strong>d model. The master pages used <strong>in</strong> the Planet Wrox project use<br />

the Code Beh<strong>in</strong>d model exclusively. In the follow<strong>in</strong>g exercise, you learn how to create a simple master<br />

page <strong>and</strong> add some HTML to it to def<strong>in</strong>e the general structure of the pages <strong>in</strong> your website.<br />

TRY IT OUT<br />

Creat<strong>in</strong>g a Master Page<br />

1. Open the Planet Wrox project <strong>in</strong> Visual Studio if it is not open already.<br />

2. In Chapter 2 you created a folder called MasterPages to hold your master pages <strong>and</strong> then added<br />

a s<strong>in</strong>gle master page to that folder. If you didn’t carry out that exercise, add the master page now.<br />

To do this, create the MasterPages folder <strong>in</strong> the root of the site, right-click the new folder, choose<br />

Add Í Add New Item, <strong>and</strong> select the Master Page item. Make sure that the master page uses<br />

Code Beh<strong>in</strong>d <strong>and</strong> that it is us<strong>in</strong>g your preferred programm<strong>in</strong>g language. Name the master page<br />

Frontend.master. F<strong>in</strong>ally, click Add.

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!