Use Dreamweaver to quickly edit web page tags

Author：Eve Cole Update Time：2009-06-01 01:02:43

I wonder if you have the habit of writing code by hand. For example: If you want to insert a piece of CSS code or a piece of Javascript code into a cell, how can you do it quickly and conveniently?

Although Dreamweaver has provided us with the code view, we still have to find it manually and switch back and forth. Although you can also use the code view and the editing view to coexist, it will take up half of the screen space, making the already small editing area even more crowded. Is there a better way? The answer is yes.

Let's take Dreamweaver 8 as an example, assuming that everyone's Dreamweaver panel layout is the default layout. Check if there is a row of small labels above the properties panel. (If you are not using MX, the tag is in the status bar) For example: if you create a new blank HTML document, the small tag above should be <body>. Please look at the picture below:

The place marked with a red frame on the picture is our protagonist today. Let's take a look at "wrap tags" first. Type a few words on the page, select them, select "Wrap Tags" in the right-click menu, enter "<strong>" (excluding quotation marks) in the pop-up Wrap Tags dialog box, and then press Enter. Has the previously selected text been made bold? Go to the source code and take a look. Is the selected text surrounded by <strong> tags? You can try to add some other tags, such as: <a>, <p>. You can also enter attributes directly here. For example: <p style="color:#CC0000">. Here is only a general explanation. If you have any questions, please check Dreamweaver's help.

Let’s talk about how to apply the tag selector.

When we move the cursor to the bold text just now, we will find that there is an additional <strong> after <body>. This means that there is a <strong> tag outside the text where the cursor is located, and a <body> tag outside the <strong> tag. Next, let's add another table, move the cursor into the table, and see the structure of the tags. I believe that friends with some basic knowledge of HTML should be able to understand it easily.

Suppose we now want to insert a table and use CSS to move the table down 10 pixels. First insert a table, and then move the cursor into the table. At this time, you should see the words <body><table><tr><td> on the tag selector. Then right-click the table label and you will see four options. Delete tags, edit tags, set classes, and set IDs.

Delete tag: delete the tag. (There are some special tags that cannot be deleted. For example: <table>, <tr>, <td>, <body>...)

Edit tags: attach attributes to tags, modify attributes, etc.

Set class: Attach a class to this tag. (i.e. categories of CSS)

Set ID: Attach an ID to this tag. (i.e. CSS ID)

Here, we choose to edit the tag, and then add the attribute style="margin-top:10px" at the end, which is the same as the normal way of writing source code. Then press enter. The editing is complete. If you cannot see the effect in Dreamweaver, please use the browser to preview.

There is another way that you might like. Select Window → Tag Inspector. When you select a tag, all attributes of the currently selected tag will be displayed here. You can also quickly edit here. The attributes entered here do not need to include quotation marks. Press Enter after editing to confirm.

Here we only tell you the method and hope that everyone can benefit from it.