• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 12. Editing the Code > Editing HTML in Code View

Editing HTML in Code View

You can edit the HTML by hand, and Dreamweaver will not overwrite those changes. If a change is made that appears to be wrong, however, Dreamweaver will highlight it to call the code to your attention. There may be many times when you need to adjust the code by hand, as demonstrated in the following steps.

In the lighthouse_history.html document, look at the numbered list from “Location” to “Relocation.” View the page in Microsoft Internet Explorer and Netscape Navigator. Look carefully at the font and size of the numbers in comparison to the text in the list. Compare between the Dreamweaver document window and each browser.

Notice how the font used for the numbers is different from the text in Explorer. The font for the numbers is the default browser font, not Verdana as is specified in the HTML. The size is also different; Explorer is using the default font size and not the –2 that is specified in the HTML. In Netscape, the font is displayed as expected, in the same font and size as the text contained in the list.

You can also see this difference in the Dreamweaver document window: The list numbers are displayed in the default font and size just like in Explorer.

In this exercise, you will change the placement of the font tags so that you get the same result in Internet Explorer and Netscape.

Switch to Code and Design View. Select the list and look at the HTML code. The list will be selected in Code View. You should see the following:

							<li><font size="-2" face="Verdana, Arial, Helvetica,
							<li><font size="-2"face="Verdana, Arial, Helvetica,
							<li><font size="-2" face="Verdana, Arial, Helvetica,

The <li> tag, which defines the list numbers or letters, is outside the <font> tag and, therefore, is not included in the font styling.

Select a single <li> tag in the Code View pane. In the document toolbar, click the Reference icon.

The Reference panel is located in the Code panel group and displays information about the tag that you have selected and its function. This feature is a good way to learn more about HTML while creating or working with documents in Dreamweaver. The material used for code reference is the O'REILLY HTML Reference.


You can read introductory information about the O'REILLY HTML Reference by using the Book drop-down menu at the top of the Reference panel to select a different book. Then use the Book drop-down menu to select the O'REILLY HTML Reference again. This will cause the HTML reference material to open up to the introductory information, without any tags selected.

To learn more about any of the HTML tags that you see in Code View, select the tag and click the Reference icon on the document toolbar. You can also choose a tag from the Tag drop-down menu at the top of the Reference panel. For example, selecting DIV from the Tag drop-down menu will present you with information about the <div> tag, which you may notice in the Tag Selector at the bottom of the document window when you choose an alignment for text or objects that are located in the cell of a table. An additional drop-down menu, located to the right of the Tag drop-down menu, indicates that the information presented about the <div> tag is a description of that HTML tag. You can use this menu to learn more about the attributes that are related to the <div> tag. For instance, you could choose align from this menu to learn more about how the <div> tag affects alignment.


Many of the tabs on the Insert bar contain code elements that can be inserted into the Code View pane of the document window. These code elements appear grayed-out when in Design View, or if the Design View pane is active.

In the Code View pane, move the first <li> tag from the left of the <font size="-2" face="Verdana, Arial, Helvetica, sans-serif"> tab to the right of that tag so that <li> is placed just in front of the text “Location.” Click in the Design View pane to refresh the document.


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

Yellow highlighting now appears on the portion of the code that defines the font. If you make a mistake while editing HTML code, Dreamweaver does not correct the mistake, but it does highlight in bright yellow the code that appears to be invalid. 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 there may be times when 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 that are not standard HTML. Dreamweaver will leave them alone. The Invalid Markup highlight will only appear in Dreamweaver and will not affect what is seen in the browser.


You can prevent the Invalid Markup highlight from displaying in the Code View by choosing View > Code View Options > Highlight Invalid HTML to remove the checkmark and turn the option off. You cannot turn the Design View highlight of invalid markup off.

In the Design View pane of the document window, click the highlighted </font> tag that appears to the right of “Location.”

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.

In this case, you will complete the following steps in this exercise to continue editing the code—not follow Dreamweaver's suggestion.

In the Code View pane, select and move the </li> tag at the end of the line that contains “Locations” so that it is located in front of the </font> tag. Click the Refresh button on the Property inspector.

The yellow highlighting disappears, and the Design View displays the first number in the list in the same font and size as the term “Location.”


The Code View pane will display with a heavy line around the edges of the pane (Macintosh) or a highlighted margin (Windows) to indicate that it is active.

Move the <li> and </li> tags for the terms “Construction” and “Relocation” inside the respective <font> and </font> tags.

The result should look like this:

							<font size="-2" face="Verdana, Arial, Helvetica,
							<font size="-2"face="Verdana, Arial, Helvetica,
							<font size="-2" face="Verdana, Arial, Helvetica,

Preview your page in the Internet Explorer browser to see the results.

The Dreamweaver document window will now also display the numbers in the Verdana font at the –2 size.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint