ファーストルック：Creative Suite プレビュー：Dreamweaver CS3

編集者注：Adobeは、クリエイティブプロフェッショナル向けアプリケーションの大幅な刷新となるCreative Suite 3を発表しました。4月のソフトウェアバンドルの出荷開始に先立ち、Creative Suite 3を構成するアプリケーションの一部を詳しく見ていきます。今回はDreamweaver CS3のプレビュー版をご紹介します。

Dreamweaver CS3は、この強力なWebデザインプログラムが新たな所有者であるAdobeの指導の下で初めてリリースされただけでなく、IntelベースのMacでネイティブに動作する最初のバージョンでもあります。Dreamweaver CS3は、デザイナーにとって便利な新しいツールを提供するとともに、Adobe Creative Suiteの他のプログラムとの統合がDreamweaverユーザーにどのようなメリットをもたらすかを垣間見ることができます。

新着情報

Dreamweaver CS3 は、他の Adobe 製品との統合、カスケーディングスタイルシートの作成、管理、修正の新機能、ポップアップナビゲーションメニューの構築、高度なフォーム検証、インタラクティブなテーブルでのデータ表示を行うための新しい JavaScript 駆動型ツールセットという、3 つの主要領域で新機能を提供します。

現在 Photoshop と Dreamweaver を使用している場合は、Photoshop から Dreamweaver に画像を転送するために必要な手順の数 (および Photoshop ファイルを編集するたびに繰り返さなければならない手順の数々) にうんざりしていることでしょう。Dreamweaver CS3 では、Photoshop からの直接コピーアンドペーストがサポートされるようになりました。Photoshop CS3 では、1 つのレイヤーを選択して「スライス」したり、ドキュメント内のある領域を囲むマーキーを描画してそのセクション内のすべてのレイヤーをコピーしたりできます。次に、その選択範囲をコピーし、Dreamweaver ドキュメントに切り替えてペーストします (この操作をすべて省略して、PSD ファイルを Dreamweaver ページに直接ドラッグすることもできます)。新しい画像最適化ウィンドウを使用すると、Dreamweaver で直接圧縮設定を適用し (Photoshop から「Web 用に保存」する必要はなくなりました)、ファイルを Web サイトに保存して、最適化された新しい画像を Web ページに配置できます。

さらに便利なのは、Photoshopを起動して元の画像ファイルをDreamweaver内で直接開き、編集できることです。Photoshopで必要な変更を加えた後、Photoshopファイルのレイヤー、スライス、または一部をコピーし、編集した新しい画像をDreamweaverに貼り付けて、古い画像を置き換えます。以前に適用した最適化設定はすべて記憶され（最適化されたファイル名も含む）、再適用されるため、編集作業は迅速かつ簡単に行えます。残念ながら、DreamweaverはDreamweaverスイートに完全に統合されていないため、スマートオブジェクトや、IllustratorファイルをWebページに取り込むための同様のシンプルなワークフローはサポートされていません。

このプログラムの最も魅力的な新機能は、Webページに動的なレイアウト要素と視覚効果を追加するためのツールセットです。「Spry Framework」（Adobeが開発したJavaScriptプログラムのコレクション）をベースにしたこれらの新機能により、ポップアップナビゲーションメニューの追加、HTMLフォームの検証、複雑なアニメーション付き視覚効果の適用、インタラクティブなデータテーブルの追加などが簡単に行えます。

Dreamweaver CS3 を使用すると、クロスブラウザのドロップダウンメニューを数分で作成できます。また、ここに示したタブ付きパネルのようなその他の新しいレイアウトツールでは、コンパクトなスペースに多くのページコンテンツを表示するための、スペースを節約するウィジェットが提供されます。

Spry の機能には、効果、ウィジェット、データセットの 3 種類があります。効果とは、フェードアウト、縮小、拡大、シェイクなどの派手な視覚効果で、画像やその他のページコンテンツに注意を引くことができます。ウィジェットは、インタラクティブなレイアウト要素を追加します。たとえば、Spry メニューバーは、2 レベルのポップアップメニューをサポートするナビゲーションバーで、コンパクトなスペースに多くのリンクを詰め込むのに最適です。フォーム検証ウィジェットを使用すると、Web フォームへの入力内容をフォームの送信前に検証できるため、エンドユーザーが適切な形式の日付を入力したかどうかを確認できます (このウィジェットは、何年も Dreamweaver に付属している使い古された「フォームの検証」動作よりもはるかに強力なソリューションを提供します)。他のいくつかのページウィジェットを使用すると、多くのコンテンツを小さなスペースに簡単に表示できます。たとえば、タブ付きパネルウィジェットを使用すると、コンテンツを個別の「タブ付き」領域に配置できます。タブをクリックすると、追加のコンテンツが表示されます。

Spryデータセット機能を使用すると、XMLファイルからデータを取得し、表に表示できます。Webページを閲覧しているユーザーは、列見出しをクリックして表を並べ替えたり、表のセル内の項目の詳細情報を確認したりできます。これらの操作は、Webサーバーに新しいページを要求することなく実行できます。

改善された点

Dreamweaverには、カスケーディング・スタイル・シート（CSS）の作成と編集のための強力なツールが常に搭載されています。CSSは、Webデザイナーが通常のHTMLから美しく複雑なWebページを作成できるようにします。しかし、CSSは複雑で扱いにくい技術でもあります。Dreamweaver CS3では、CSSの扱いを容易にする新しいCSSツールが追加されています。

新しいCSS管理機能により、スタイルシート内のスタイルの順序変更、スタイル名の変更、スタイルシート間のスタイルの移動など、スタイルシートの並べ替えが簡単になります。新しいCSSテンプレートは、基本的なHTMLとCSSで構成された、一般的なページレイアウト（2列、3列、リキッド、固定幅など）を作成するための既成のページレイアウトを提供します。これらのデザインは、現在すべてのWebブラウザで適切に動作します。テンプレートは単なる「スケルトン」であるため、付属のCSSファイルを変更したり追加したりすることで、独自の外観や雰囲気を作成できます。

新しい「ブラウザ互換性チェック」ツールを使えば、ページが一般的なウェブブラウザすべてで動作するか確認するためのテストや調整に費やす時間を節約できます。このツールはウェブページをスキャンし、特定のブラウザで動作しない可能性のあるCSSやHTMLコードを特定します。潜在的なエラーにはフラグが付けられ、ワンクリックでAdobe.comの詳細な情報にアクセスでき、問題とその解決策が説明されています。