While designing an HTML page, you can preview the page in a Web browser. To open an HTML page in a Web browser, right-click the HTML file in the Solution Explorer window and select View in Browser. A new tab will appear with the HTML output of the page.

Instead of previewing an HTML page in the default browser, you can open the page in another browser, such as Netscape Navigator. To open an HTML page in another browser, right-click the HTML page in the Solution Explorer window and select Browse With. A list of all the browsers configured on your machine will appear.

Finally, if you want to view the page using different resolutions, such as 640×480 or 800×400, you can select different browser window sizes in the Browse With dialog box.

Visual Studio .NET supplies two interfaces for editing HTML documents—Design View and HTML View. You can use any one of the following methods to switch between the two views:

Figure 2.2 illustrates how the editor appears in Design View, and Figure 2.3 illustrates how the editor appears in HTML View.

Figure 2.2. Viewing an HTML page in Design View.

Figure 2.3. Viewing an HTML page in HTML View.

Different browser types, such as Internet Explorer and Netscape Navigator, and different browser versions, such as Internet Explorer 3.0 and Internet Explorer 5.0, support different browser features. For example, support for Cascading Style Sheets varies wildly among different types of browsers and browser versions.

Within the Visual Studio .NET environment, you specify the target browser for an HTML document by using the targetSchema property. The targetSchema property determines, among other things, which HTML elements are available in the Toolbox, which properties are displayed for an HTML element, and which HTML attributes are displayed in the HTML editor when using automatic statement completion.

targetSchema can be set to any one of the following values:

One of the most important features that the targetSchema property affects is support for Cascading Style Sheets. Unless the targetSchema is set to a browser that supports HTML 4.0 or later, support for Cascading Style Sheets is disabled.

The targetSchema property also affects whether support for client-side scripts is enabled or disabled. If the targetSchema is set below HTML 4.0, all support for client-side scripts is disabled.

You can modify the targetSchema property for an HTML document by completing the following steps:

Alternatively, you can select DOCUMENT from the drop-down list in the Property window and alter the targetSchema property from the property list.

You can choose to design an HTML page by using either Flow or Grid layout mode by completing the following steps:

It’s important to understand that you can design pages using either Flow or Grid layout modes that are compatible with any browser. In particular, you can design pages by using Grid layout mode that are compatible with browsers that do not support Cascading Style Sheets.

Visual Studio .NET uses different methods to implement Grid layout, depending on the value of the targetSchema property. If targetSchema is set to HTML 4.0 or later, elements are precisely positioned with Cascading Style Sheet style tags. If the targetSchema does not support Cascading Style Sheets, nested HTML tables are used to precisely position elements on the page.

Therefore, as long as you set the targetSchema property appropriately, you should not shy away from using Grid layout mode as a result of browser compatibility worries. Because almost all browsers support table tags, Grid layout is compatible with almost any browser.

After you add an HTML page to your project, you can add HTML elements to the page from the HTML tab on the Toolbox. There are two ways that you can add items from the Toolbox. First, you can double-click an item on the Toolbox, and the item is added at the currently selected spot on the HTML page (the Designer surface). You can also add an item from the Toolbox by dragging and dropping it onto the HTML page.

For example, to add a Label to your HTML page, perform the following steps:

After you add the Label, the Designer surface should resemble Figure 2.5.

Figure 2.5. A Label on a page.

After you add a Label to the page, you can modify the text that the Label displays by typing the text directly into the Label. Select the Label on the Designer surface and then click it again. (Be careful to wait a second before you perform the second click.) Now, you can type text into the Label.

Notice that you can modify the size of the Label by clicking the Label and pulling on the square handles that appear on the edges of the Label. You can also change the position of the Label by dragging the Label on the page.

When Flow layout mode is enabled, you can create an HTML page just as you would create a normal word processing document. You can type text directly onto the Designer surface. When you type a carriage return, a paragraph break is automatically added.

In Flow layout mode, you can add HTML elements to the page from the Toolbox. However, you cannot precisely position the elements on the page. For example, if you add a Label control, the Label control is added inline with the rest of the text.

Flow layout mode supports a limited number of commands for aligning text. You can use the Align Left, Center, Align Right, and Justify commands.

The alignment commands are available by opening the Format menu and pointing to Justify. You can also access the alignment commands from the Formatting toolbar. If the Formatting toolbar isn’t visible, open the View menu, point to Toolbars, and select Formatting.

When Grid layout mode is enabled, you can design an HTML page by providing precise x and y coordinates for all of its elements. In Grid layout mode, you cannot add text directly to an HTML page. Instead, you must add text to elements contained in the page, such as Labels.

In this section, you’ll learn how to take advantage of the features that Visual Studio .NET provides for designing HTML pages in Grid layout mode. You’ll learn how to display a grid and precisely position elements on a page.

Displaying a Grid

If you need to precisely position elements on a page, it’s useful to have a visible grid against which to align elements. You can display a grid while working in Design mode by selecting Show Grid from the Format menu. You also can enable and disable this option by toggling the Show Grid icon on the toolbar.

Note

Displaying a grid adds a new meta tag to your document. When you display a grid, a vs_showGrid meta tag is automatically created.

By default, an 8-pixel by 8-pixel grid is displayed. To set the grid size to a new value, do the following:

1. Select Options from the Tools menu.

2. Navigate to the HTML Designer folder.

3. Display the Display page.

4. Enter a value for the horizontal and vertical spacing.

For example, Figure 2.6 illustrates how the HTML designer appears when the grid size is changed to a 50-pixel by 50-pixel grid.

Figure 2.6. Modifying the grid size.

Layering Elements in Grid Layout Mode

If the document targetSchema property is set to HTML 4.0 or later, you can layer elements on the design surface. In other words, you can place one element directly above or below another (this is also called z-ordering because you are arranging elements on the page’s z-axis).

To layer one element on top of a second element, simply drag the first element over the second element. If you want to change the order of the elements, you can open the Format menu, point to Order, and then select either Bring to Front or Send to Back. Not all browsers support layering. If the targetSchema property is set to HTML 3.0, exclamation marks will appear when you attempt to layer elements (see Figure 2.7).

Figure 2.7. Invalid layering of elements.

You can combine the features of Flow and Grid layout mode in a single page by using the Flow Layout Panel and the Grid Layout Panel. Both the Flow Layout and Grid Layout Panels are available under the HTML tab on the Toolbox.

For example, suppose that you are working in Flow layout mode and need to precisely position form fields when constructing an HTML form. In that case, you can add a Grid Layout Panel to the page and add the form elements to the panel (see Figure 2.8).

Figure 2.8. A Grid Layout Panel in Flow layout mode.

If you are working in Grid layout mode and discover that you need to add a considerable amount of text to a page, you can add a Flow Layout Panel (see Figure 2.9).

Figure 2.9. A Flow Layout Panel in Grid layout mode.

Visual Studio .NET includes a variety of text formatting commands that you can use regardless of whether you are working in Flow or Grid layout mode. The formatting commands are available from the Format menu and the Formatting toolbar. (If the Formatting toolbar is not visible, open the View menu, point to Toolbars, and select Formatting.)

Visual Studio .NET contains all of the standard formatting commands, such as bold, italic, underline, superscript, and subscript. These commands are available by opening the Format menu and pointing to Font, and are also available on the toolbar.

You can also control text indentation by using the Increase Indent and Decrease Indent commands located from the Format menu or the toolbar.

The Formatting toolbar also includes a Font Name drop-down list for picking a typeface, a Font Size drop-down list for picking a font size, and foreground and background color pickers for choosing text foreground and background colors. (You can’t use background color unless the document targetSchema property is set to a value equal or greater than HTML 4.0.)

Finally, the Formatting toolbar contains a drop-down list for the Block Format. Block Format options include the following:

You can apply multiple Block Format commands to the same string of text. For example, you can apply Bulleted List formatting to text and change the Font Color to Red. If you want to remove all formatting from a string of text and start fresh, apply Normal formatting to the text.

You can modify properties of an HTML document, such as its background color and margins, by opening the Property Pages for the document. There are two ways you can open the Property Pages:

Either method will open the dialog box displayed in Figure 2.10. The dialog box has three tabs labeled General, Colors and Margins, and Keywords.

Figure 2.10. Opening DOCUMENT Property Pages.

The General tab enables you to set properties, such as the page title, page background color, and page background image. If the targetSchema is set to HTML 4.0 or later, this tab can also be used to specify the default client-side scripting language used for the page.

The Colors and Margins tab enables you to specify the default color for text and hypertext links. You can also use the options under this tab to set the top, left, right, and bottom margin sizes.

Finally, the Keywords tab enables you to supply the text used with the keywords meta tag. Some (but not all) search engines use the keywords meta tag when indexing HTML documents.

Adding an image to an HTML page requires the completion of two steps. First, you need to add the image file to your project:

After you add an image to your project, you can add the image to an HTML page by doing the following:

The Insert Image dialog box provides you with several options for the layout of the image. You can specify the image alignment, border thickness, and horizontal and vertical spacing around the image. Finally, you can supply alternative text for the image that will appear in browsers that do not support images.

After you add an image to a page, you can automatically add the width and height of the image to the HTML <img> tag by right-clicking the image and selecting Add Height/Width. In general, it’s a good idea to add width and height attributes to an image to render the HTML page containing the image faster.

If you want to link one HTML page to another enabling a user to navigate from the first page to the second, you need to create a hyperlink.

Before you can create a hyperlink, you must first select the text or image that you want to use as the label for the hyperlink. Select a string of text or an image with your mouse. Next, select Hyperlink from the Insert menu.

Selecting Hyperlink from the Insert menu causes the Hyperlink dialog box to appear (see Figure 2.11). You can use this dialog box to browse to a page to link to the current document.

Figure 2.11. Opening the Hyperlink Dialog Box.

/SomePage.htm#mybookmark

You can drag and drop all of the standard HTML form elements—such as text fields, check boxes, and submit buttons—from the HTML Toolbox onto the design surface.

Typically, before you add form elements to an HTML page, you’ll first want to add the HTML <form> tag itself to the page. To add opening and closing HTML <form> tags to a page, select FORM from the Insert menu.

You can view the locations of the opening and closing <form> tags by selecting Details from the View menu. You’ll want to be careful to add any form elements between the opening and closing <form> tags.

Adding Drop-Down Lists and List Boxes

To add either a drop-down list or list box to a form, select a point between the opening and closing tags of the form and double-click either the DropDown or Listbox elements in the HTML Toolbox.

After you add a drop-down list or list box, you can add options to the element by right-clicking the element and selecting Properties. Selecting Properties opens a dialog box that enables you to insert a text and value for each option in the drop-down list or list box (see Figure 2.12).

Figure 2.12. Adding list items to a list box.

You can add an HTML table to a page by dragging and dropping the Table element from the HTML Toolbox. By default, a table added from the Toolbox contains three columns and three rows.

Alternatively, you can add a table by opening the Table menu, pointing to Insert, and selecting Table. Selecting this menu option provides you with more options for initially configuring the table (see Figure 2.13).

Figure 2.13. Setting Table options.

After you add a table, you can add and delete table columns, rows, and cells from the Table menu. For example, to add a new row to a table, select the table, open the Table menu, point to Insert, and select Row Below.

You can change properties of a table, such as the height, width, cell padding, cell spacing, and border colors of the table by opening the table’s Property Pages. You open a table’s Property Pages by right-clicking the table and selecting Properties.

You can also modify the properties of a particular column, row, or cell by selecting the column, row, or cell and selecting Select from the Table menu. After you select the table element, open the Property Pages for the element by right-clicking and selecting Properties.

Framesets enable you to display multiple HTML pages in a single window. Visual Studio .NET enables you to easily work with frames by supplying standard frameset templates.

To add a frameset to a project, do the following:

After completing these steps, the frameset will appear in Design View. Before you can use the frameset, you’ll need to assign files to each frame in the frameset.

Linking to a Page in a Frame

Framesets are commonly used for displaying both a menu and content page in the same window. For example, in a frameset with two frames, you might place a menu of links in the left frame that open pages in the right frame (see Figure 2.15). To open a page in a particular frame, you must include the name of the frame in the link.

Figure 2.15. Displaying a menu and content page with a frameset.

To name a frame, perform the follow steps:

1. Left-click inside the frame.

2. In the property window, find the name property and supply a name (for example, contents).

After you name a frame, you can create a link to the frame by doing the following:

1. Select the HTML page that will contain the link.

2. Add a Label element to the HTML page by double-clicking the Label element on the HTML Toolbox.

3. Click inside the Label and type the text for the label (for example, Products).

4. Select the text by double-clicking the text with the left mouse button.

5. Select Hyperlink from the Insert menu.

6. Enter the path to the page that you want to open in the frame in the URL text box and click OK.

7. Click the link and find the target property in the Properties window.

8. For the target property, enter the name of the frame into which you want the link to open the page.

After you complete these steps, clicking the link will open a page into a new frame.

When you start adding a new HTML tag in the HTML editor, a pop-up window appears that contains a list of valid HTML tags by default. If you select an HTML tag from the list, the tag is automatically added to the document.

Furthermore, if you select a tag that requires a closing tag, the closing tag is also added to the editor. For example, adding an opening <b> tag automatically adds a closing </b> tag.

You can also configure the HTML editor to automatically add quotation marks around the values that you assign to attributes in an HTML tag. This option is disabled by default.

You can disable or enable any of these options from the Options dialog box by doing the following

From the HTML Specific page, you can modify the following options:

You can automatically format the source code of an HTML document by opening the Edit menu, pointing to Advanced, and selecting Format Document. You can also apply automatic formatting to a page by clicking the Format the Whole Document button on the HTML Editor toolbar. When you format a document, tags are automatically indented.

For example, if you start with HTML code that looks like the following:

<table><tr>
<td>Hello</td>
</tr>
</table>

After you apply automatic formatting, you get HTML code that looks like the following:

      <table>
           <tr>
               <td>Hello</td>
           </tr>
       </table>

You can control when automatic formatting is applied and particular automatic formatting options from the Format page in the Options dialog box (see Figure 2.16). To open the Format page, do the following:

Figure 2.16. Modifying options for automatic formatting.

You can use the Format page to choose the circumstances under which automatic formatting is applied and the type of formatting that is applied. You can set the following options:

You can also control capitalization for HTML tags and attributes. For example, you can indicate that you want all HTML tags added to a page to be lowercase and all HTML attributes to be uppercase.

When you add HTML tags to a page, the HTML is validated against the selected targetSchema by default. Any content that can’t be validated appears with a red squiggly line beneath it. If you hover the mouse over the content, a ToolTip appears with an explanation for the validation failure.

For example, the following tags would raise a validation error:

<table><td>

Because you can’t place a <td> tag directly within a <table> tag, the validation error “Per the active schema, the element ‘td’ cannot be nested within ‘table’” appears.

You can turn off automatic validation by completing the following steps:

You can also validate an HTML document at any time by clicking the Validate Document button on the HTML Editor toolbar.

You can add style attributes to an individual HTML element in Design View. For example, suppose that you want to create a Button element with a red italic font and a blue background. To add these style attributes to a button, do the following:

You can modify the style attributes for an element at any time in the future by opening the Style Builder dialog box.

Instead of adding style attributes to individual elements in an HTML page, you can add one <style> block that contains generalized style rules for the page. To add a <style> block to a page, follow these steps:

Next, to select the element, class, or element ID to format with a style rule, do the following:

Finally, you can specify the style rule to apply to the element, class, or element ID by performing the following steps:

You can create a single external style sheet and apply the style sheet to multiple pages within a project. This is useful when you want to create a consistent look for all the pages in your application.

When you create a new ASP.NET Web Application, a single external style sheet file is created by default. You can work with this style sheet file or create a new one.

To create a new external style sheet, do the following:

After you open an external style sheet file in the editor (see Figure 2.20), you can modify the style rules manually or with the Style Builder dialog box.

Figure 2.20. Editing an external style sheet.

To edit a style rule with the Style Builder dialog box, select an element in the CSS Outline window and select Build Option from the Styles menu. You can use the options in the Style Builder dialog box to specify the formatting associated with the element.

After you create an external style sheet, you can apply the style sheet to one or more HTML files by doing the following:

Completing these steps adds a link tag to the HTML page that looks something like the following:

<LINK href="Styles.css" type=text/css rel=stylesheet>