「Dreamweaver CS4」の新機能をマスターする(前編)

「Photoshop」で編集された内容を反映する(1)

次に、「Photoshop」との連係機能を紹介したい。前バージョンから、Photoshop形式の画像ファイルを直接読みこめるようになった（Dreamweaverに配置されるのはPhotoshop形式から書き出されたWeb用画像）。さらに新バージョンでは、元のPhotoshopファイルに編集が加えられると、Dreamweaver上のWeb画像に通知される機能が追加されている。

Dreamweaverのドキュメントウィンドウに、Photoshopファイルを読み込ませてみたい。「挿入」メニュー→「イメージ」を選択し、「イメージソースの選択」画面で読み込みたいPhotoshopファイルを選択。「画像プレビュー」画面が表示されたら、「オプション」タブで保存形式や画質を指定し、「OK」ボタンをクリックする。「Webイメージを保存」画面で、保存場所とファイル名を指定し、ファイルを保存。

「イメージタグのアクセシビリティ属性」画面で代替テキストを入力し、「OK」ボタンをクリックすれば、Dreamweaverのドキュメントウィンドウに、Photoshopファイルから作成されたWeb画像が挿入される。Web画像には、Photoshop画像とのリンクを示すアイコンが表示される。

Photoshopで編集された内容を反映する(2)

Photoshop CS4を使って、元のPhotoshop画像に変更を加えてみたい。下図では、画像に「粗いパステル画」というフィルタを実行している。変更後、上書き保存してファイルを閉じる。

Dreamweaverに戻ると、リンクを示すアイコンの下側の矢印が緑色→赤色に変わっている。これは、元のPhotoshop画像に何らかの変更が加えられたことを示している。この時点ではまだ、挿入されている画像に変更は反映されていない。

Dreamweaverのドキュメントに挿入された画像に、Photoshop画像の変更を反映する。画像を右クリックし、表示されるメニューから「オリジナルから更新」を選択。Photoshop画像の変更が反映され、Dreamweaver上の画像もフィルタが実行されたものになった。

後編では、「Spryデータセットでコンテンツ作成」と「ライブビュー/ライブコード」で表示を確認する方法について紹介していきたい。