Archive for the 'Dreamweaver' Category

Dreamweaver CS4 Offers Game Changing Features

Get Adobe Dreamweaver CS4 Beta

If you have been following through the last few versions of Dreamweaver, you would have noticed that Dreamweaver jumped version after version without any revolutionary, ground-breaking changes. And it’s nearly understandable, since the demand for the Flash platform drives Adobe to focus and develop more and more tools based for it, making the platform the centre of their game.

With Flash, Flex, AIR, Thermo, and other legacy products like Photoshop to focus on, IMHO I felt Dreamweaver was somewhat neglected?

Even as a web developer myself, the maximum use I used to have for Dreamweaver was just to centralise my Flash movie at the centre of the html page (using tables to layout). After I picked up CSS skills, I could do this and a lot more in any text editor (e.g. FlashDevelop), with Firefox (and Firebug) being my first mate to check my latest changes. Dreamweaver no longer was of any use to me!

As CSS support increases across the various browsers, and AJAX becoming increasingly popular and amazingly easier to write (e.g. jQuery) compared to traditional JavaScript, and alternate IDEs (e.g. Aptana) springing up to compete for the same pie of business, Adobe realises that their acquired product needs a lot more attention and work.

What Dreamweaver CS4 offers is really game changing, and is making me as a web developer, excited over Dreamweaver again. :D Personally I’m really psyched over these 3 features:

  1. It gets live preview, which uses Webkit, so you can see how your site looks like straight in the IDE (e.g. no more F12 and countless refreshes!)
  2. When it’s live previewing, you can see at runtime how the generated DOM changes, and see how your design interacts with the code (e.g. no more Firebug!)
  3. Code completion for JavaScript and Ajax libraries

I’m really excited with the code completion by the way. Being an entry level JavaScript coder, I find myself relying on a lot of help because of unfamiliarity with the syntax. After the code completion, if Adobe makes it as easy as the way it is to get syntax help like Flash and Flex (e.g. moving your cursor in between the code and pressing F1), I will say that Dreamweaver will become my editor of choice again. ;)

Here is the screencast where Andre Charland caught up with Scott Fegette from the Dreamweaver product management team to get a demo of the new features (view original post).

Give Dreamweaver CS4 beta a roll today!

AddThis Social Bookmark Button

Tutorial: How To Add .chm Files To Dreamweaver’s Help

Objective

To add a .chm file to Dreamweaver’s Help

Files Required

Any .chm file (I’ve used PHP’s documentation)

Tested With

Dreamweaver 8 on Windows (If anyone tested this on a Mac, please leave a comment!)

Little Bit Of Background

I recently began to learn PHP, and wasn’t very happy to find that Dreamweaver had no language support for PHP natively. Googled for methods to “add .chm files to the Dreamweaver Help” did not yield any useful results as well. Closest that I got was this article on Adobe livedocs, which I had tried to implement but failed :( . So here’s my own step by step tutorial to anyone who wants to add .chm files to Dreamweaver’s drop down Help. :)

Let’s Get Started!

Step 1
Navigate to the following folder:
C:\Program Files\Macromedia\Dreamweaver 8\Help

Step 2
Place a copy of your .chm file there. (For this example, I’ll be using php_manual_en.chm)

Step 3
Open help.xml

Step 4
Add the following:

<book-id id="DW_PHP" win-mapping="php_manual_en.chm" mac-mapping="PHP Manual (English)"/>

to your code with reference to line 4 in the code snippet below.

1
2
3
4
5
<help-books>
    .
    .
    <book-id id="DW_PHP" win-mapping="php_manual_en.chm" mac-mapping="PHP Manual (English)"/>
</help-books>

Here’s the explainations for book-id’s attributes

  • id: A unique identity. Just make sure that no other text in this xml file clashes with what you entered and you should be safe.
  • win-mapping: The name of the .chm help file in Windows
  • mac-mapping: The name of folder that contains the html files in Macintosh.

Step 5
Navigate to the following folder:
C:\Program Files\Macromedia\Dreamweaver 8\Configuration\Menus

Step 6
Open menus.xml

Step 7
Add the following:

<menuitem name="PHP Manual (English)" enabled="true" arguments="'PHP'" file="Menus/MM/CSHelp.htm"  id="DWMenu_Help_PhpManual" />

to your code with reference to line 13 in the code snippet below. You can find it at the bottom of the whole xml file (add separators to beautify. :D ):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<menus xmlns:MMString="http://www.macromedia.com/schemes/data/string/">
    .
    .
    <menubar name="Main Window" id="DWMainWindow">
        .
        .
        <menu name="_Help" id="DWMenu_Help">
            <menuitem name="_Dreamweaver Help" enabled="true" arguments="'DWHelp'" file="Menus/MM/CSHelp.htm" id="DWMenu_Help_DWHelp" />
            <menuitem name="_Getting Started with Dreamweaver" enabled="true" arguments="'DWTutorial'" file="Menus/MM/CSHelp.htm"   id="DWMenu_Help_GettingStarted" />
            <menuitem name="Dreamweaver _LiveDocs" enabled="true" command="dw.browseDocument('http://livedocs.macromedia.com/go/livedocs_dreamweaver')" id="DWMenu_Help_LiveDocs" />
            <menuitem name="What's _New in Dreamweaver 8" enabled="true" arguments="'DWWhatsNew'" file="Menus/MM/CSHelp.htm"   id="DWMenu_Help_WhatsNew" />
            <separator />
            <menuitem name="PHP Manual (English)" enabled="true" arguments="'PHP'" file="Menus/MM/CSHelp.htm"  id="DWMenu_Help_PhpManual" />
            <separator />
            .
            .
        </menu>
    </menubar>
</menus>

Here’s the explainations for menuitem’s attributes:

  • name: The text that will be shown in the Dreamweaver’s Help.
  • enabled: Of course we want it enabled! :D
  • arguments: This is important. Take note of what you entered here, for we’ll be needing it in a very short while.
  • file: This is the file with the JavaScript to launch our .chm file. We’ll take a look into it next.
  • id: A unique identity. Just make sure that no other text in this xml file clashes with what you entered and you should be safe.

Step 8
Navigate to the following folder:
C:\Program Files\Macromedia\Dreamweaver 8\Configuration\Menus\MM

Step 9
Open CSHelp.htm using Dreamweaver (Note: this is the file that we had specified in the above file attribute.)

Step 10
Add the following:

} else if ( arguments[0] == 'PHP' ) {
        helpDoc = "DW_PHP:index.html";

to your code with reference to line 22 in the code snippet below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function receiveArguments() {
    if ( arguments[0] == 'DWUsing' ) {
        helpDoc = MM.HELP_mnuDWUsing;
    } else if ( arguments[0] == 'DWHelp' ) {
        helpDoc = MM.HELP_mnuDWHelp;
    } else if ( arguments[0] == 'CFUsing' ) {
        helpDoc = MM.HELP_mnuCFUsing;
    } else if ( arguments[0] == 'DWGuidedTour' ) {
        helpDoc = MM.HELP_mnuDWGuidedTour;
    } else if ( arguments[0] == 'DWTutorial' ) {
        helpDoc = MM.HELP_mnuDWGettingStarted;
    } else if ( arguments[0] == 'DWWhatsNew' ) {
        helpDoc = MM.HELP_mnuDWWhatsNew;
    } else if ( arguments[0] == 'UDGuidedTour' ) {
        helpDoc = MM.HELP_mnuUDGuidedTour;
    } else if ( arguments[0] == 'UDTutorial' ) {
        helpDoc = MM.HELP_mnuUDTutorial;
    } else if ( arguments[0] == 'Extending' ) {
        helpDoc = MM.HELP_mnuDWExtending;
    } else if ( arguments[0] == 'API' ) {
        helpDoc = MM.HELP_mnuDWAPI;
    } else if ( arguments[0] == 'PHP' ) {
        helpDoc = "DW_PHP:index.html";
    } else if ( arguments[0] == 'ConUsing' ) {
        helpDoc = "Con_Using:index.htm";
    } else {
        helpDoc = "DW_Using:index.htm";
    }
}

In the else if clause, the arguments[0] refers to the arguments attribute in the xml from Step 7. When assigning a value to helpDoc, the “DW_PHP” is referring to the id attribute in Step 4. And finally, we want the page to navigate to the index.html in the .chm file, so we have to add “:index.html” at the end. (Note: if you just assign “DW_PHP” to helpDoc, it will not work.)

Step 11
Save all files and restart Dreamweaver.

Step 12
When you launch the file from the Dreamweaver help menu, it might not show the intended index.html as we had expected. I can only assume that there’s some place that requires fixing, and frankly speaking, I have no idea where! :P As mentioned in Step 10, if you remove the “:index.html”, it will not even launch the appropriate .chm that you want as Dreamweaver has mapped the default to it’s own help.

Final Note

If anyone is able to fix the last issue, please drop a comment and let me know! Or if you have an easier method to make this work, I’ll be glad to hear from you and add a link here.

Hope this helps! ;)

AddThis Social Bookmark Button