Working With HTML

A typical HTML document can be very complex with many nested HTML tags.  Precise placement of controls and manipulation of the HTML can sometimes be a challenge with poor tools. VWD provides excellent design-time tools for working with complex HTML elements.

1.  In VWD click the Authors.aspx tab and ensure that you are in the Design View.  You will now add an HTML table below the Label control.  Place your cursor below the Label and then select the Layout | Insert Table menu command. In the Insert Table dialog, modify the settings to add a table with a single row and two columns; then click OK.

2.  Below the Code Editor window, notice that when you place the cursor within the HTML table that you just created, HTML formatting buttons appear.

This HTML navigation bar allows you to make quick work of complex HTML documents.  Many times you can become easily lost in complicated HTML documents.  The navigation tool allows you to select specific tags and their contents.  Drop down one of the tags to view the options as shown in the above figure.  Click on the HTML tag on the navigation bar to select the tag and its contents.

VWD also has a Document Outline tool that provides a tree view of all of the HTML elements in your Web page.

3. Click Source and then select the View | Document Outline menu command. A tree view of your HTML document displays.  When you click on a tag within the outline, the corresponding tag is highlighted in the Design or Source views. In the Document Outline window, select the <TR> tag.

Previous versions of Visual Studio would automatically "re-format" your HTML when switching from Source to Design view.  For example, in the screenshot below the HTML text "Select State" has been entered purposely with a line break in between "Select" and "State".  When switching to Design view, the line break would have been removed.

4.  Enter the HTML text just as it appears below.  Click Design and you will see the words appear as one phrase without a line break, just as it should.  Click Source and you will see that your HTML looks exactly the way that you left it.

To manage complex HTML documents, it is sometimes advantageous to collapse pieces of your HTML document so that you do not have to wade through the entire document every time you need to modify it.  With VWD you can collapse large sections of your HTML document to "hide" them until needed.

5.  Highlight the <tr> tags and all the HTML content they contain. Now right-click and select Collapse Tag.

The HTML text is now temporarily "hidden" from view so you can concentrate on the parts of the HTML document that you need to.

6. Hover over the ellipsis to show the hidden HTML in a pop-up.

7. To prepare for the next lesson, highlight the <table> tags and their content and then press Delete. Finally, press CTRL+S to save your work.