Due to the "visualization" and ease of operation, many friends write CSS in DreamWeaver. Today we introduce some "best habits" for writing CSS in Dreamweaver, hoping to be helpful to everyone.
CSS is changing the course of website design. To cater to the growing number of CSS-inclined designers, Macromedia DW MX introduces a number of new and improved CSS-related features. With these new features, you can plan for future updates and develop sites that are more compliant with W3C standards. This article discusses some suggestions for using CSS in DW MX and highlighting a specific CSS feature.
Generally speaking, a style sheet is a collection of formatting rules that control the appearance of web content. You can use CSS in your pages in three different ways:
Inline: One-time styles written into code.
Embedded: A style sheet that can control all elements in a page. External: A style sheet that can control elements in many pages.
In fact, many sites use a combination of these three methods as needed. .
An important thing to consider when working with CSS is the fact that different browsers and different versions of the same browser parse CSS in different ways. In addition to the differences in web browsers, you also need to realize that there are many other browsers, such as hearing browsers, TV-based browsers, and handheld devices such as the Palm Pilot and TTY (teletypewriter, remote typewriter).
What are best practices?
Most technologies have their own agreed-upon standards. CSS is no exception. While not all CSS that exists on the web is standardized, it is helpful to use CSS according to existing standards. In general, developers should separate content from reporting as much as possible. The benefits of this are:
1. Increase the life of the site. Non-standard style sheets may feel convenient at the time, but after the new version of the browser comes out, compatibility issues are likely to occur. At that time, modifying the site page by page will be a very time-consuming task and it will also make the use of CSS meaningless.
2. Make your site accessible to all users and browsers. Some local governments have legislated that websites must be accessible to people with disabilities. Browsing devices designed for disability awareness, such as hearing browsers, have extremely strict CSS normative requirements.
3. Make site updates and maintenance easier If used properly, CSS can allow adjustments you make on one page to be quickly applied to all pages.
The first choice you have to make is which style sheet to use. Here’s a breakdown of the different stylesheets when it comes to best practices:
Inline CSS: Simply put, you should try to avoid using it. Among other disadvantages, using inline CSS means that you don't take advantage of the real advantage of CSS, which is that you don't separate content from formatting. DW MX uses Inline CSS mainly to position page elements (these elements are called "layers" in the DW MX user interface), or to use a certain DHTML effect, which requires using Inline style javascript to change an object. properties.
Embedded CSS: It’s also less than ideal because it only affects the current page. During the update process, if a page is lost, the style of the site will be inconsistent; in addition, when users browse your site, style sheet information must be downloaded for each page.
External CSS: This is your first choice. External CSS allows all pages connected to it to maintain a consistent appearance and style; outline it, change it once, and easily update all related pages; make your page smaller and browse faster. Other best practices are discussed below when analyzing specific CSS features.
Create a CSS style sheet in DW MX
When creating a CSS style sheet in DW MX (Text 》CSS Style 》New style sheet), in the pop-up dialog box, you have two options: New Style Sheet File ) and only for the current page (This Document Only). Select "New Style Sheet File" and you begin the process of creating External CSS. This option requires you to name the style sheet and select a save location for it before the actual creation process; the other option, This Document Only, will write the relevant code directly to the page.
You can also select an existing style sheet to edit or add new definitions in the New Style dialog box.
Should it be connected to External CSS or imported?
After creating an external style sheet, you need to attach it to each page (or template). To do this, click the "Attach Style Sheet" button on the CSS panel. The Link External Style Sheet dialog box will pop up, where you can browse to your target style sheet. After finding the name, you can choose to link or import this external style sheet.
Connection is the most commonly used method. Select "link" to connect the style sheet to the page. It will add the following markup to your page:
The connection option is supported by all browsers that support CSS. If you want some older browsers (such as Netscape 4.x) to "see" this style sheet, you need to use the following method.
If you select the "Import" option, the tags used are:
NetSscape4 will completely ignore the imported CSS and interpret the page according to the connected CSS. In this way, we can use the new features in CSS without worrying about browser compatibility issues.
CSS Property Inspector
You can easily switch to CSS mode in DW MX's property inspector. By default, the Property Inspector displays font tags in raw HTML mode. Click the little "A" next to the Fonts drop-down menu and you'll see the currently available CSS stylesheets instead of a list of font tags.
At the same time, you can easily switch back to HTML mode.
Ready-made CSS style sheets
One of the exciting CSS features in DW MX is the inclusion of ready-made CSS style sheets. New users of CSS can try it out first. Select File > New, select CSS style sheets in the pop-up new document dialog box, and a list of all available CSS will appear in the box on the right. To practice what we call best practices, choose one marked "Accessible."
Save the document in the site folder, and then append the CSS to your document using the method described above.
Design Time style sheets (Design Time style sheets)
This feature of DW MX allows you to apply style sheets to pages while working in Design view, giving you a more intuitive understanding of the appearance of your site. Design time stylesheets will not appear within the site. This feature is very useful from the perspective of our best practices. If you use both import and link methods (as described above), attaching design-time stylesheets allows you to develop the site using either one. You can easily change to another style sheet when you want to see how the page will look under another style sheet.
Design-time stylesheets are also useful for developers who want to apply CSS on the server side (such as ASP, PHP, or ColdFusion) or on the client side through JavaScript. Server-side style sheets are also another way to deal with poor CSS support in client browsers. But in previous versions of DW, this method did not allow you to view the actual effect of CSS during the design stage. Design-time stylesheets let you view stylesheet effects in real time, so you can work visually in DW MX. Another benefit is that when you upload site files, you no longer have to go through the entire site looking for redundant stylesheets.
Validation
Whether you create your own style sheet or edit an existing one, validation ensures that you don't misuse nonstandard tags or incorrect code. DW MX itself does not include a CSS validator, you can use the validation service provided by the W3C site. Within DW MX you can validate HTML or DHTML tags (File > Check Page > Validate Markup (for HTML) or File > Check Page > Validate as XML for XHTML.). DW MX provides many auxiliary tools when developing CSS-based sites. With the help of MW MX, coupled with a good understanding of CSS, you can develop a site that will stand the test of time.