Css|dreamweaver today the layout of the Web page is becoming more and more complex, many effects need to be implemented through CSS, Dreamweaver MX 2004 has made a great improvement in the design of CSS functions. Let's take a look at these improvements here.
an improvement of the property panel Dreamweaver MX 2004 adds the "style" option to the Properties panel, and the styles that we do when we design the page, such as fonts, colors, sizes, and so on, "style" will automatically remember these designs as "Style1", "Style2" styles. You can apply a style directly to "style" the next time you reuse it. With this function, we can greatly improve our work efficiency when we do web design.
If you apply a CSS style that is not text, but a table, you can also set CSS in the Properties panel. There is a category (class) in the Properties panel where you can design CSS styles for the table.
second, the page CSS properties You can see a "pgae properties" option in the Dreamweaver MX 2004 Properties panel.
Click this option to open the Settings dialog box for page Properties directly.
In the category to the left of the dialog box you can see the appearance, links, title text, title/encoding, Web page pictures, and so on, select one of the categories, and the appropriate settings appear on the right. For example, in Figure 4, "link" is selected to design a CSS style for links in this page, including the text size of the link, the color of the mouse over the display, the underline, and so on. Other categories of CSS settings, you can try it yourself.
After the CSS settings for page Properties, all text, links, and so on are applied to this style when editing the page.
third, the application of CSS style panel At the far right of the Dreamweaver MX 2004 is a list of Options Panel settings dialog boxes, including CSS Style.
The old version of DW also has this CSS style panel, Dreamweaver MX 2004 only retains the editing function of CSS style, removing the Apply mode (Dreamweaver MX 2004 applies CSS styles directly to the property panel). Dreamweaver MX 2004 provides more CSS functionality in the Rules panel.
After you select a style in the CSS rule panel, it automatically switches to the options for that style, which we can examine and modify on the panel. This panel divides the CSS style into several broad categories, with detailed parameters or options for each style to help us with the settings. So even if we are not familiar with the use of CSS, you can easily use its functionality.
Below the rules panel is the relevant CSS panel, which contains the CSS detail settings for each part of the page. Select an area in the Web page, relevant CSS panel on the relevant CSS settings options, as well as its previous layer of CSS style, and even the CSS is applied to which HMTL tags are displayed very clearly, if there is a covered place, will use special colors and strikethrough to hint.
Four, CSS syntax hints When we edit CSS in source code view, just type in a CSS style name and colon, and then click the mouse in a blank place, Dreamweaver MX 2004 automatically pops up a menu listing the parameters that the style can use. We just select the CSS style we want to edit in the pop-up Pull-down menu, so we can save ourselves the trouble of entering the code.
v. Example Experience Below we use CSS rule and the relevant CSS panel to set the CSS style of the page.
1. In Dreamweaver MX 2004, you provide a page template with CSS already set up, select the first template style "Two-columm left Nav" in the page Designs (CSS) template, and then save it as a site.
2. Below we find in the page "Feature title" title text, in the right function module to find and open the "Relevanet CSS" this interface.
3. In "CSS rule" to find the CSS category to work with, here we find "
4. Change this "font-size" font size. The original size is "100%" and we change it to a value of 36 pixels. The text immediately becomes larger.
With CSS These new features, we are more efficient in editing the Web page, the effect is better.
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.
