Creating Web Sites and Web Pages by Using Visual Web Developer and ASP.NET
- 5/12/2010
Using the Web Page Designer
Unlike a Windows Form, a Web page can have text added directly to it when it is in the Web Page Designer. In Source view, the text appears within HTML and ASP.NET tags somewhat as it does in the Visual Studio Code Editor. In Design view, the text appears in top-to-bottom fashion within a grid as it does in a word processor such as Microsoft Word, and you’ll see no HTML. In the next exercises, you’ll type text in Design view, edit it, and then make formatting changes by using buttons on the Formatting toolbar. Manipulating text in this way is usually much faster than adding a Label control to the Web page to contain the text. You’ll practice entering the text for your car loan calculator in the following exercise.
Add text in Design view
-
Click the Design tab, if it is not currently selected, to view the Web Page Designer in Design view.
A faint rectangle appears at the top of the Web page, near the template text “WELCOME TO ASP.NET.” The template text is there to show you how text appears on a Web Form, and where you can go to get additional information about ASP.NET. You’ll also notice that your Web page has Home and About tabs, which are provided for you as part of your default page.
-
Position your insertion point at the end of the text “WELCOME TO ASP.NET.”
A blinking I-beam appears at the end of the line.
-
Press the BACKSPACE key to remove “WELCOME TO ASP.NET,” and then type Car Loan Calculator.
Visual Studio displays the title of your Web page exactly as it will appear when you open the Web site in your browser.
-
Delete the line beginning with “To learn more about ASP.NET…,” and in its place, type the following sentence:
Enter the required information and click Calculate!
-
Delete the sentence in the template beginning with “You can also find documentation…”
Now you’ll use the Formatting toolbar to format the title with italic formatting and a different color.
-
Right-click the Standard toolbar in Visual Web Developer to display the list of toolbars available in the IDE.
-
If you do not see a check mark next to Formatting in this list, click Formatting to add the Formatting toolbar.
The Formatting toolbar now appears in the IDE if it was not already visible. Notice that it contains a few features not usually found on a text formatting toolbar.
-
Select the text “Car Loan Calculator.”
Before you can format text in Visual Web Developer, you must select it.
-
Click the Italic button on the Formatting toolbar.
-
On the Format menu, click the Font command, click Red in the Color list box, and then click OK.
Your screen looks like this:
)
Now, you’ll examine the HTML and ASP.NET markup for the text and formatting you entered.
View the HTML and ASP.NET markup for a Web page
-
Click the Source tab at the bottom of the Designer.
The Source tab displays the actual HTML and ASP.NET markup for your Web page. To see more of the markup, you might want to resize a few programming tools temporarily and use the document scroll bars. The markup looks like the following screen shot. Your markup might have some differences.
A Web page is made up of page information, scripting code, cascading style sheet (CSS) information, HTML tags, ASP.NET tags, image references, objects, and text. The @ Page directive contains information about the language you selected when creating the Web application, the name of any code-behind file, and any inherited forms.
HTML and ASP.NET tags typically appear in pairs so that you can see clearly where a section begins and ends. For example, the <style> tag identifies the beginning of text formatting, and the </style> tag identifies the end. Notice that the “Car Loan Calculator” text appears within <em></em> tags to make the text italic. Below the “Car Loan Calculator” text, the second line of text you entered is displayed.
-
Click the Design tab to display your Web page in Design view, and open the Toolbox if it is not visible.
)