Tips for writing CSS in Dreamweaver

CSS is changing the course of web design. To cater to the growing demand of CSS-prone designers, Macromedia DW MX introduces new and improved CSS-related features. With these new features, you can plan for future updates and develop sites that are more compatible with the standards of the consortium. This article discusses some suggestions for using CSS in DW MX and highlighting a particular CSS feature.

Generally speaking, a style sheet (type sheet) is a collection of rules that control the appearance of Web page content. You can use CSS in three different ways on your page:

Code type (Inline): A one-time style written to code.

Inline (Embedded): A style sheet that controls all elements of a page

External (External): A style sheet that controls elements on many pages

In fact, many sites combine these three approaches as needed.

One important thing to consider when using CSS is that different browsers and different versions of the same browser parse the CSS in different ways. In addition to the differences in Web browsers, you should also realize that there are many other browsers, such as listening browsers, browser-based browsers, and handheld devices such as Palm Pilot and TTY (Teletypewriter, remote typewriters).

What does the best habit mean?

Most technologies have their own established standards. CSS is no exception. While not all CSS on the Web is standard, using CSS in accordance with existing standards can be beneficial. In general, developers should isolate content from reporting as much as possible. The advantage of doing this is:

1: Increase the life of the site

The nonstandard stylesheet might have been handy at the time, but when a new version of the browser comes out, compatibility issues are likely to occur. The time to modify the site by page is a very time-consuming task and also makes the use of CSS meaningless.

2: Make your site applicable to all users and browsers.

In some places, governments have legislated to require websites to be accessible to people with disabilities. Browsing devices designed for disability awareness, such as listening browsers, are highly restrictive to the requirements of CSS.

3: Make the site update and maintenance more relaxed.

Using the right way, CSS allows you to quickly apply the adjustment to all pages in one page.

The first choice you have to make is which style sheet to use. When it comes to best practices, the analysis of the different stylesheets is as follows:

Inline CSS; Simply put, you should try to avoid using it. In addition to some of the other drawbacks, using inline CSS means you don't take advantage of the real benefits of CSS, which is that you don't separate content from formatting. DW MX uses inline CSS primarily to locate page elements, which are called "layers (layer)" In the DW MX user interface, or to use inline-style JavaScript to change the properties of an object in order to work with a DHTML effect.

Embedded CSS: It's not ideal, because it only exerts influence on the current page. In the process of updating, if a page is lost, the style of the site will be inconsistent; In addition, when the user browses to your site, each page will have to download the style sheet information.

External CSS: This is your first choice. External CSS allows all pages connected to it to maintain a consistent look-and-feel style; sketchy, change once, easily update all related pages, make your pages smaller, and browse faster. Some of the other best practices will be mentioned below when analyzing specific CSS features.

Creating a CSS style sheet in the DW mx

When you create a CSS style sheet in DW mx (Text CSS style New style sheet), in the pop-up dialog box, you have two choices: the new style sheet document (novel style sheet File) and only for the current page (this Document )。 When you select New Style Sheet File You begin the process of creating external CSS. This option requires you to name the style sheet and select a save location before the actual creation process, and the other option, this Document, will write the relevant code directly to the section of the page.

You can also edit or add new definitions by selecting an existing style sheet in the New Style dialog box.

Should I connect to external CSS or import?

After you create an external style sheet, you need to attach it to each page (or template). To do this, you can do this in the off-season "Attach style sheet (Attach style Sheet)" button on the CSS panel, which will pop up the connection to the external style sheet (link External style Sheet) dialog box, where you can browse to the name of your target style sheet, and find out later You can choose to connect (link) or import this external style sheet.

Connection is the most common way, select "link" to connect the style sheet to the page. It will add the following tag to your page:

All CSS-enabled browsers support connection options. If you want some older browsers (such as Netscape 4.x) to "see" the style sheet, use the following method.

If you select the "Import" option, the tag used is:

NetSscape4 will completely ignore the imported CSS and follow the attached CSS to interpret the page. This allows us to safely use the new features in CSS without worrying about browser compatibility issues.

CSS Property Inspector

In the DW MX property inspector, you can easily switch to CSS mode. By default, the property inspector displays the original HTML mode font label. Click on the small "A" next to the Font dropdown menu, and you'll see the CSS style sheet currently available, not the Font label list.

At the same time, you can easily cut back to HTML mode.

out-of-the-Box CSS style sheets

One of the exciting CSS features in DW MX is that it contains the CSS stylesheets that have been made. New users of CSS can experience it first. Select File > New to select the CSS style sheets in the New Document dialog box that pops up, and all available CSS lists appear in the box on the right. In order to practice what we call the best habit, select a labeled "Accessible".

Save the document in the site folder, and then use the above method to attach the CSS to your document.

Designing Time style sheet (design times style sheets)

This feature of DW MX allows you to apply a stylesheet to a page when working in Design view, giving you a more intuitive view of the site's appearance. The design time style sheet will not appear in the site. This feature is very useful from the standpoint of our best practice. If you use two ways to import and connect at the same time (as described above), the additional design time stylesheet allows you to use any of these to develop your site. When you want to see how the page looks under another stylesheet, you can easily change it to another style sheet.

Designing a Time style sheet is also useful for developers who want to apply CSS to server-side (such as ASP, PHP, or ColdFusion) or to access the client through JavaScript. Server-side stylesheets are another way to handle the poor support of the client browser for CSS. But in a previous version of DW, this approach does not allow you to view the actual effects of CSS at design time. The design time style sheet lets you view the style sheet effect in real time, so you can work with the visual interface in the DW MX. Another advantage is that when you upload a site file, you no longer have to check the entire site for redundant stylesheets.

Verify

Whether you create a style sheet yourself or edit an existing style sheet, validation ensures that you don't misuse non-standard tags or bad code. DW MX itself does not contain a CSS validator, and you can use the authentication services provided by the Consortium site. Within the DW MX you can validate HTML or DHTML tags (File > Check page > Validate Markup (for HTML) or File > Check page > Validate as XM L for XHTML.). DW MX provides a number of assistive tools when developing a CSS based site. With the help of MW MX, coupled with a good understanding of CSS, you can develop a time to withstand the test site.