Dreamweaver How to insert a line with a color

Source: Internet
Author: User
Tags transparent image dreamweaver

In Dreamweaver, if you insert the horizontal rule (horizontal line), this is only gray by default, which in many cases does not meet our requirements. What if you want to insert a line of other colors (or even a pixel)?
first, in the appropriate position in document window (page Editing window), insert horizontal rule,
Press CTRL + F3 to pull up the property Inspector (Properties panel).

  
in this property panel, remove the shading (shadow) before the hook. You can set the length of the line by entering a pixel value (pixels) or a percentage in W. In h, enter 1 to make the line very thin and fine to a pixel. If you want a thick line, you can enter a larger value in H. So the lines are plugged in, but you'll find that the line is gray and in the property panel, you can't set the color. If you want to set other colors, you can use CSS to control. You can easily set CSS in Dreamweaver, and you don't even need to understand CSS syntax at all.
Select the CSS style under the Text menu | New Style.

  
In the New Style dialog box, enter a name in the Name column, such as "Colorline", and in the Define (definition) Radio box, select this document only (for this page only), and then click OK. The style definition for. colorline dialog box will then pop up:

  
in the type item, choose the color you want, such as red, then click OK, then click Done, and a new style is built. Select a thin line in the page Editing window, point Text | CSS Style | Colorline (Colorline is just the new style), in the page editing window, the line color is still gray, but press F12 preview, in the browser you can see the color of the inserted string has become the red you want.
There is also a way to insert a thin line of color, even to a pixel. First insert a row-by-column table in the page Editing window, and then insert a 1pixelx1pixel transparent image in the table ( The spacer image that is used to control page layouts in Dreameaver4 is exactly the same, so if you don't use software to make such an image, you can build it in Dreameaver4:


  
The object panel first chooses layout view (layout view) in the view of the Objiect panel, Draw layout table, and drag to create a layout table (layout table) in the page editing window. Add spacer Image in the Drop-down menu of the point table header.


  
creates and saves the spacer image, which is a spaceer image of 1 pixel x1 pixels. Then set the properties in the table to: H (height) is 1 pixel (1 pixels), W (width) is the desired width (can enter pixel value or percent), Cellpad, Cellspace, border, enter 0, and then in BG color (background color) to select the desired color , the colored horizontal thin line is inserted.

If you increase the H value, the line becomes thicker. If you want to insert a vertical thin line with a color, set H to the desired height value, W is set to 0, and the other settings are the same, so you can insert a vertical thin line. In the Web page editing window, this color is still gray, but by F12 preview, you can see in the browser that the color of the string you are inserting has become the color you want.

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.