Category Archives: Dreamweaver

4T.23 Code View Toolbar

If you’ve never noticed them before, there are a set of buttons that run down the left side of the window in Dreamweaver’s code view; I meet a lot of people that either glanced at them but paid them no attention or haven’t noticed them at all, and they’re really useful!
Probably because of the dominance of CSS, an increasing number of designers (I’m mainly talking graphic designers who do web work here)away from the WYSIWYG interface and into the code environment, so if you fall into that category, then you might be surprised at just how useful this toolbar is.

4T.12 Box Model Basics

This episode is the most requested topic lately – the CSS Box Model – and how to get started working with it in Dreamweaver. This is just the ‘tip of the iceberg’ however and I really recommend reading this book which is an excellent resource for understanding CSS (check out the 4T Recommended Reading list for more books).

If you are a registered user of this site, you can comment on podcasts and posts, as well as request future topics using the links on this page. You can also contact me directly using the contact page.

DreamWeaver CS4 Beta

The new public beta releases for Dreamweaver and Fireworks are available now on the Adobe Labs website. DWCS4 sports a great new interface (OWL) that’s a bit less in-your-face and very, very cool (not to mention suitably neutral). There are some cool new features such as Live View which allows you to live preview your pages directly inside DW and Code Navigator which shows you (in a pop-up window) all of the code sources affecting your current selection. DWCS4 has even more integration with Photoshop and now supports Smart Objects; there is Subversion integration – file versioning, rollback and more – There’s even more support and help with CSS, plus HTML data sets and even more Spry/Ajax features.

A fantastic update to the world’s best web-authoring package.

The public beta of Fireworks CS4 is also available now.

Add a ‘Save All’ shortcut in Dreamweaver

This DW shortcut disappeared from the ‘factory set’ quite a while ago but I find it so useful, especially when I’m doing something like making modifications to CSS properties in a bunch of html pages, and DW is updating the CSS file at the same time, for example. Fortunately it is really easy to add and modify shortcuts though so adding it takes less than a minute.

dreamweaver menu dreamweaver menu

On the Mac, go to the Dreamweaver menu and select Keyboard Shortcuts – Windows users will find the same option at the bottom of the Edit menu – and you will be presented with the keyboard shortcuts dialog box. Before adding or modifying anything, duplicate the existing set (1, below) and name it, then navigate through the menu options to locate and select Save All (2 and 3, below).

Dreamweaver keyboard shortcuts dialog Dreamweaver keyboard shortcuts dialog

Now all you need to do is click in the Press key: input field (4, above) and then press the key combination you’d like to use (I use Cmd+alt+shift+s on the Mac and Ctrl+alt+shift+s on Windows); if you choose one that is already in use, Dreamweaver will tell you – simply double click on the input field and choose another combination. All you need to do then is click OK, and your shortcut is added to the menu ready for use.

Dreamweaver menu