Due to the "visualization" and easy operation, many friends write CSS in DW. Today we introduce some "best habits" for writing CSS in DW, hoping to be helpful to everyone.
CSS is changing the process 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. CSS can be used in your pages in three different ways:
Inline: a one-time style written into the 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 are based on These three methods need to be used in combination.
An important fact to consider when working with CSS is 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 lifespan of the site
Non-standard style sheets may be 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
When used properly, CSS can allow adjustments you make in one page to be quickly applied to all pages.
Your first choice is which style sheet to use. When it comes to best practices, here’s a breakdown of the different style sheets:
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 is also not ideal because it can only affect 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 Document (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 linked 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.
Linking 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:
All browsers that support CSS support the connection option. 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 the property inspector of DW MX. 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 also easily switch back to HTML mode.
Ready-made CSS style sheets
One of the exciting CSS features in DW MX is that it includes 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 use the above method to attach CSS to your document.
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 to the server (such as ASP, PHP, or ColdFusion) or to access it on the client 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 style sheet, 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.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
