Top 3 New Features in Adobe Dreamweaver CS4
November 20, 2008 by Victoria Barton · View Comments
So what has changed from Adobe Dreamweaver CS3 to CS4? Here’s a list of the top three features you should pay attention to.
1. Smart Objects
Photoshop integration, which began in Dreamweaver CS3, has been enhanced in CS4 to offer the use of Adobe’s Smart Objects technology. A Photoshop file can be imported directly into Dreamweaver and will automatically come in as a smart object.
Photoshop images are can be inserted using the same techniques as inserting any other image file: Insert – Image; dragging from the Files panel; dragging from the Assets panel; or using the Insert toolbar. A 
Photoshop-style Optimise window automatically appears and you can choose the settings appropriate for that particular image usually GIF, JPEG or PNG.
The fact that the image is a smart object means that if we resize it in Dreamweaver, it will automatically be re-optimised and a new version of the image will be generated with the new dimensions. (In previous versions, resizing an image would mean that the browser was responsible for resizing which led to poor image quality.
2. CSS Improvements
HTML is a notoriously sparse environment which relies on files created with other technologies to add functionality to web pages. Typical examples of related files are server-side includes, CSS, JavaScript and XML. Dreamweaver now includes a feature called “Related Files” which enables you to edit the content of such files, without having to open them separately, and to instantly see the effect of your changes on the main file.
Whenever you open a file which contains linked files, Dreamweaver displays each of the linked files in the Related Files Bar. To access a related file just click on its name. If you make any changes to a related file, an asterisk appears next to its name in the Related Files Bar to remind you to save your changes. When you do, the impact of the changes are immediately visible in the main file.
3. Related Files
The Property Inspector can be used to change the attributes of any element you select on an HTML page. In previous versions of Dreamweaver, changing the attributes of highlighted text would cause the program to create CSS classes with names like “Style1″, “Style2″, etc. in the head area of the current page. This random creation of styles was often responsible for getting new web developers into bad habits.
In Dreamweaver CS4, the Property Inspector contains buttons which allow you to switch between HTML and CSS options. When working in the CSS options, you can now target a specific CSS rule before choosing an attribute or, if necessary, create a new rule.
The writer of this article is a developer and trainer with Macresource Computer Solutions, an independent computer training company offering Adobe Dreamweaver training courses at their central London training centre.
Using Dreamweaver To Add JavaScript To Your Web Pages
September 28, 2008 by Victoria Barton · View Comments
A Dreamweaver behavior is an automatically generated JavaScript function which is activated by a given user or browser action. To use behaviors, choose Window > Behaviors. Before attaching a behavior, you must highlight one of the elements on your page such as a hyperlink or image. Then you need to choose a behavior by clicking on the plus sign in the top left of the Behaviors window.
Whenever you attach a behavior to a web page element, Dreamweaver attempts to guess what event you want which should trigger the JavaScript (mouse click, rollover, etc.). If Dreamweaver fails to assign the event that you actually want, simply choose a different event from the drop-down menu next to the event name.
bridge on the river kwai the dvd
Dreamweaver’s behaviors fall into four main categories: manipulation of images, alerts and windows, form field handling and CSS handling. To get a feel for how behaviors work, let’s take an example of a behavior in each of these categories.
There was a time when almost every website featured the rollover effect on its navigation buttons. With the development of CSS, this is no longer the case. However, the facility of having an image change appearance when the mouse passes over it is still useful. Dreamweaver achieves this effect with the “Swap Image” behavior which can either be added to an image or can be created automatically by inserting a rollover image (Insert > Image Objects > Rollover Image) rather than a static one.
Dreamweaver’s “Open Browser Window” behavior allows you to create the controversial JavaScript pop-ups. Due to its extensive misuse, many people have developed an extreme intolerance of this feature. However, there are situations where it is useful. For example, if a user is in the middle of filling out a form and clicks a help icon next to a certain item, a pop-up window is an ideal method of displaying the help topic.
The key behavior relating to forms is called “Validate Form”. It performs simple checks on any text field within a given form. (It ignores any fields other than text fields.) To use it, select a field (the validation will then occur when the user leaves the field) or select the entire form (the validation will then occur when the form is submitted). Choose “Validate Form” form the Behaviors panel menu and specify the type of validation you wish to perform, for example, ensuring that a field has not been left blank.
Dreamweaver contains a couple of very useful behaviors which manipulate the content of HTML elements. To use these, you need to give the element and ID for example,
The DIV element offers the greatest flexibility when using this behavior since it can contain just about anything you want. You highlight the element which will trigger the behavior and then choose Show/Hide Elements from the Behaviors panel menu. Click on any listed element then click either the Show or Hide button.
download toy story divx Each behavior that you choose will create one or more JavaScript functions within the head area of your page. Part of the process of optimising your website (both in terms of accessibility and search engine compatibility) is to transfer this code to an external JavaScript file and then link the web page to the JavaScript file. To do this, you need to be in Code view and locate the function(s) generated by the behavior(s) you have used on your page. Cut all of the code between the opening and closing SCRIPT tags and place it in a text file which needs to be saved with a .js extension. Next, enter an src attribute inside the opening SCRIPT tag, for example .
, a UK IT training company offering Adobe Dreamweaver Classes at their central London training centre.
