Dreamweaver easy to edit page labels

I wonder if you have the habit of writing code. For example: To insert a piece of CSS code in a cell, or a section of JavaScript code, how to do it faster and more convenient?

Although Dreamweaver has provided us with a code view, we will have to manually find, and to switch back and forth. Although you can also use Code view and edit view, but also to occupy half of the screen space, so that the original size of the editing area is more crowded. Is there a better way? The answer is yes.

Let's take Dreamweaver 8 for example, assuming that everyone Dreamweaver panel layout is the default layout. Check to see if there is a row of small labels above the property panel. (If you are not using MX, the label is in the status bar) For example: You create a new blank HTML document, and the small label above should be . Take a look at the picture below:

The place where the red box is painted is the protagonist of our day. Let's take a look at the Wrapping tab first. Type a few words on the page, select them, select Surround tabs in the right-click menu, enter "" (excluding quotes) in the Pop-up Surround tab dialog box, and then enter. Before the selected text has become bold, to the source code to see if our selected text is already surrounded by the tag? You can try adding some other tags, such as: ,

. You can also enter properties directly here. such as:

Here is only a general explanation, if you have questions, please check the Dreamweaver help.

Here's how to apply the tag Selector.

We'll move the cursor to the text that we just added, and we'll see a lot more in the back of . This means that the text outside the cursor has a label, and a label outside the label. Next you add a table, move the cursor to the table, and look at the structure of the tag. I believe that some of the basics of HTML friends should be easy to understand.

Let's say we're going to insert a table now and use CSS to move the table down 10 pixels. First insert a table and then move the cursor to the table. You should see the typeface

on the label selector. Then click the right mouse button on the Table tab and see that there are four options. Delete labels, edit labels, set classes, set IDs.

Delete Label: That is, delete the label. (There are some special tags that can't be deleted.) For example:

, ,

, ...)

Edit Tags: attach attributes to tags, modify attributes, and so on.

Set class: Attach a class to this label. (That is, the category of CSS)

Set ID: Attach an ID to this label. (That is, the ID of the CSS)

Here, we choose to edit the tag, then add the attribute style= "margin-top:10px" and the normal writing source code in the same way. Then press ENTER. The editor is finished. If you don't see the effect in the Dreamweaver, preview it in your browser.

There is another way, maybe you will like it. Select window → tag checker When you select a label, all the properties of the currently selected tag are displayed here. It can also be edited here very quickly. The attributes entered here do not include quotation marks, and are determined by entering the editor.

Here we will only tell you the method, I hope you can benefit from it.