September 24, 2008, Beijing - Today, Adobe (Nasdaq: ADBE) announced the launch of an industry milestone product – the Adobe® Creative Suite® 4 product family. The product can be used in all creative workflows and is the industry's leading design and development software. Through a fundamental breakthrough in workflow, the barriers between designers and developers are eliminated. The new Creative Suite 4 product line includes hundreds of innovative features to comprehensively advance the creative process of print, web, mobile, interactive, audio and video production. This product elevates the entire product line's Flash technology to a new level of integration and expression. It is Adobe's largest software version to date, including Adobe Creative Suite 4 Design editions, Creative Suite 4 Web editions, and Creative Suite 4 Production Premium. , Adobe Master Collection and 13 basic products, 14 integrated technologies and 7 services.
So I downloaded the official PreRelease version of DreamWeaver CS4 for testing. There is not much to say about decompression and installation. I just feel that the installation speed is much faster than the earlier DreamWeaver CS3. After the installation is completed, I find that the interface is better than before. certain changes.
In addition to interface changes, this version serves as an important milestone version and has many updates, such as:
code tips for Ajax and JavaScript frameworks
Adobe InContext Editing
HTML data set
Subversion® integration
CSS best practices, etc., you can check the official features page for more information.
Here I will mainly introduce you to some new features of JavaScript.
1. JavaScript code external links.
We know that for various purposes, we generally do not write JavaScript code directly on the page, but place it in an external js file. The benefit of doing this is not only to facilitate the management of JavaScript on the entire site, but also to help a lot of people. With the help of the client's caching of js files, the waste of network transmission traffic of js files that rarely change is reduced.
In addition, for reasons such as multi-person collaboration and easy management, agile changes and code layering, we should try to separate structure-performance-behavior as much as possible. In normal code writing, you may use a lot of words such as
< a onclick="alert_me('this is a link')" href="#">Click to alert me</a>
Such code, however, does so by coupling the behavior into the basic code structure. We advocate adding events to completely separate it into JavaScript code. This operation can also be completed by DreamWeaver CS4.
In DreamWeaver CS4, this function is provided for us. You can find this function in [Commands]->[Externalize JavaScript].
In order to test these two features, we wrote the following code:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD /xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function alert_me(msg)
{
alert(msg);
}
</script>
</head>
<body>
<a href="#" onclick="alert_me('this is a link')">Click to alert me</a>
</body>
</html>
You can see that in this code, not only does the JavaScript function appear on the page, but the behavior is also directly bound to the HTML tag. At this time, use [Commands]->[Externalize JavaScript] to open DreamWeaver CS4 as As you can see from the tools we provide, there are two options, which respectively correspond to separating only the JavaScript code blocks in the page into external files and at the same time separating the JavaScript in the HTML code:
We choose "Externalize JavaScript and attach unobtrusively ", that is, the separation of code blocks and codes in tags is completed at the same time. After the command execution is completed, the code of the page is as follows:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www .w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="SpryAssets/SpryDOMUtils.js" type="text/javascript"></script>
<script src="Untitled-15.js" type="text/javascript"></script>
</head>
<body>
<a href="#" id="a1">Click to alert me</a>
</body>
</html>
In this way, the corresponding work is completed automatically.
2. JavaScript code tips.
There has always been no particularly convenient IDE for developing JavaScript. Aptana is a JavaScript development tool based on Ecplise, which provides code highlighting and code prompt functions. Now, DreamWeaver CS4 also provides this function. When we build JavaScript built-in objects, It is already available for code hinting.
In addition, DreamWeaver CS4 also provides prompts for code errors. When an error occurs in the code, there will be a yellow prompt bar at the top of the window and the line number on the left side of the code.
3. Support for third-party JavaScript libraries.
The Aptana mentioned above also provides support for a variety of JavaScript third-party libraries, such as Prototype, jQuery, YUI, ExtJS, etc. DreamWeaver CS4 also provides support. We first introduce a Prototype library, and then enter new Ajax. When trying to build an Ajax application, DreamWeave CS4 gives code hints for Ajax class member methods.
Article source: http://www.hanguofeng.cn/archives/web-client/dreamweaver-cs4-new-feture-javascript