This tutorial was brought to you by NetroStar, a Miami-based global
web design company.
In this tutorial I'll show you how to use master pages in Visual Studio. It's very useful when every page of your website has the same content on top, side or bottom of the page. In that case you have to create master page once and then you only modify content that varies. If you want to change for example the title of your website you do this only in one file - master page - and then on each page that you have created you have a new title.
Here is a website that we'll create in this tutorial. When we're creating a new page, we have to modify only the green part, the red one is a master page that we created at the beginning.
First, we have to create a new ASP.NET Web Site. Then, add a master page to this project by right-clicking on the name of this project in Solution Explorer and choose Add New Item. Find a Master Page on this list and save it with a default name.
Code of your created master page should look like this:
ContentPlaceHolder is a place, where you insert content that is different on each page. In this tutorial we'll add 3 <div> elements - Top and Left (this will be the same on each page) and Content (this will be the part that contains ContentPlaceHolder). After adding these elements the code of master page within <body> should look like this:
Now we'll have to add CSS file to our project to change the look of our website. In order to do so right-clik on the project name, choose Add New Item and then find StyleSheet on the list. You can copy-paste the following code to your CSS file:
You'll also have to add the following code anywhere within <head> element in master page file to point CSS file:
Now it's time to add a new website. Right-click again on the name of the project in Solution Explorer and click Add New Item. Choose a Web Form and remember to check "Select master page" as shown below:
In the next window you just select a master page that you created moments before. Your new file should look like this:
Within <asp: Content> element you can place anything you like. Notice that you have two ContentPlaceHolders with different IDs and the same two ContentPlaceHolders in master page file.
Place the text "This is my new Website" in second ContentPlaceHolder:
Now you can create two other Web Forms names Site1 and Site2. In the first file in ContentPlaceHolder write: "This is Site1" and in the second file: "This is Site2".
Your website is ready, when you run this website you can change the content of ContentPlaceHolder just by clicking links on left.
This tutorial was brought to you by NetroStar, a Miami-based global seo company.