Quickly edit webpage tags using Dreamweaver

Source: Internet
Author: User
Tags dreamweaver

I wonder if you have the habit of writing code. For example, if you want to insert a piece of CSS code or Javascript code into a cell, how can this be done quickly and conveniently?

Although Dreamweaver has provided us with a code view, we have to manually find it and switch back and forth. Although Code View and editing view can also coexist, it takes up half of the screen space to make the editing area less crowded. Is there a better way? The answer is yes.

The following uses Dreamweaver MX as an example. Assume that all the layout of the Dreamweaver panel is the default layout mode. Check whether there is a small label in the top of the property panel. (If you are not using MX, the tag is in the status bar.) for example, if you create a blank HTML document, the small tag above should be <body>. See the following figure:

The place in the red box is the main character of today. Let's take a look at the "surround tag" first ". Enter a few words on the page, select them, select "surround tag" from the right-click menu, and enter "<strong>" (excluding quotation marks) in the pop-up surround tag dialog box ), then press Enter. The selected text has been changed to bold. Check the source code to see if the selected text is surrounded by the <strong> label? You can try to add other labels, such as <a >,< p>. You can also enter attributes directly here. For example, <p style = "color: # CC0000">. Here, I will only explain it. If you have any questions, please refer to the Dreamweaver Help.

The following describes how to apply the tag selector.

Move the cursor to the bold text, and you will find that <strong> is added after <body>. This means that the text where the cursor is located has the <strong> label and the <body> label outside the <strong> label. Next, we will add another table, move the cursor to the table, and see the structure of the tag. I believe that some basic HTML friends should be easy to understand.

Suppose we want to insert a table and use CSS to move it down to 10 pixels. Insert a table and move the cursor to the table. In this case, you can see the <body> <table> <tr> <td> in the tag selector. Right-click the table label and you will see four options. Delete tags, edit tags, set classes, and set IDs.

Delete tags: delete tags. (Some special tags cannot be deleted. Example: <table>, <tr>, <td>, <body> ......)

Edit tags: add and modify tags.

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

Set ID: attach an ID to this tag (that is, the css id)

Here, we select to edit the tag, and then add the attribute style = "margin-top: 10px" to it. The method for writing source code is the same. Press Enter. The editing is complete. If you cannot see the effect in Dreamweaver, use a browser to preview it.

There is another method you may like. Select window → Tag checker when you select a tag, all attributes of the selected tag are displayed. You can also edit it quickly here. The attribute entered here does not contain quotation marks. After editing, press enter to confirm.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.