Editing HTML in Code View

You can edit code by hand, and Dreamweaver does not overwrite those changes. If a change is made that appears to be wrong, however, Dreamweaver highlights it to call the code to your attention. Sometimes you might need to adjust the code by hand, as demonstrated in the following steps.

1.	In the training.html document, place the insertion point anywhere within the form and click the <table> tag in the Tag selector. The nested table is now outlined with a thick black line to indicate that it is selected.
2.	Switch to Split view. Find the beginning of the table in the code. It should appear as follows: <table width="90%" border="0" align="center" cellpadding="0" cellspacing="10"> Because the table is selected in the Design view of the Document window, the corresponding code in the Code view is also highlighted. To find the opening table tag, look at the beginning of the selection in the Code view. This table doesn't have a summary describing the purpose of the table. When you insert a table, there are a number of accessibility features available, including the option to create a summary for the table. However, after a table has been inserted, you can't add a summary unless you do so through the code or the Tag inspector.
3.	In the Code view pane, place the insertion point just before the > character at the end of the opening table tag. Note The Code view pane displays with a heavy line around the edges of the pane (Macintosh) or a highlighted margin (Windows) to indicate that it is active. To learn more about any of the HTML tags that you see in Code view, place your insertion point anywhere inside a tag and press Shift + F1. The Results window's Reference tab opens, which automatically displays information on a currently selected attributethat is cellspacing because it is the last attribute defined in the opening table tag where the insertion point is. You can choose other tags from the Tag menu at the top of the Reference panel. For example, selecting TABLE from the Tag menu presents you with information about the <table> tag. An additional menu, located to the right of the Tag menu, enables you to select a specific attribute of the <table> tag or to read a detailed description of the <table> tag itself by choosing Description. For instance, you could choose Summary from this menu to learn more about the summary attribute that you will be creating in the following steps. Note You can read introductory information about the O'REILLY HTML Reference by using the Book menu at the top of the Reference panel to select a different book. Then use the Book menu to select the O'REILLY HTML Reference again, which causes the HTML reference material to open up to the introductory information, without any tags selected.
4.	In the Code view pane, press the Spacebar and you will see a list of attributes for the <table> tag. When you are using Code view Dreamweaver provides a feature known as Code Hinting. Code Hints display attributes of a tag as you are typing. You can type in letters and it will match your typed string until you find the attribute you desire.
5.	Type su and it will match your keystrokes with the summary attribute. After the summary attribute is selected, press Enter (Windows) or Return (Macintosh). The summary="" string is added to the tag, and your insertion point will be left between the double quotes. Type "Please enter your contact information and information about your experiences with yoga" within the double quotes. Click in the Design view pane to refresh the document.

Tip

You can also click the Refresh button that appears on the Property inspector after you make a change to the code.

If you make a mistake while editing HTML code, Dreamweaver does not correct the mistake. Dreamweaver does have a feature called Highlight Invalid HTML (which is off by default) that highlights the code that appears to be invalid in bright yellow. You have to make the corrections yourself. This feature is one of Dreamweaver's advantages, known as RoundTrip HTML. The fact that Dreamweaver does not change the code is important because sometimes Dreamweaver comes across code that appears to be invalid that you used for a reason. For instance, you can add special tags that your Web server recognizes but are not standard HTML. Dreamweaver leaves them alone. The Invalid Markup highlight appears only in Dreamweaver and does not affect what is seen in the browser. The Property inspector informs you that the selection is Invalid Markup and lists the problematic tag, along with additional information concerning why the code is invalid and a suggestion for how to remedy the problem.

You can turn the Invalid Markup highlight on or off in the Code view by choosing View > Code View Options > Highlight Invalid HTML. You cannot turn the Design view highlight of Invalid Markup off.

Although you won't see any outward sign of the change that you made, the page is now more accessible. You can add summary tags or otherwise edit code when you need to make a change that is not provided for within Dreamweaver's visual interface.

Note

You can also right-click or Ctrl-click (Macintosh single button mouse) on a tag in the Code view pane to pull up the context menu and then choose Edit Tag. The Tag Editor dialog box will open and give you a number of categories and options for editing the tag. The number of categories and options depends on the tag selected.