全2回でお届けしている「Adobe Dreamweaver CS4」の新機能紹介と操作ガイド。前編では、「コードナビゲータで定義したCSSをすばやく調べる」、「ビューの表示方法を切り替える」を紹介した。後編では、「Spryデータセットでコンテンツ作成」と「ライブビュー/ライブコード」で表示を確認する方法を紹介したい。

Spryデータセットでコンテンツ作成(1)

「Spryデータセット」は、取得したデータをソートしたり、指定したデータを呼び出して表示するSpryコンテンツだ。「Dreamweaver CS3」から搭載された機能だが、CS4から読み込み用データとしてHTMLのテーブルを扱えるようになり、コンテンツ作成がより容易になった。「Spryデータセット」を使って、日付をクリックすると記事が更新されるコンテンツを作成してみよう。

日付を変えるとコンテンツが更新される。写真は完成後のイメージ

まずは、読み込み用データを準備する。ここでは、シンプルなテーブルデータを使う。

このテーブルを読み込み用のデータとして使う

このテーブルに、ID名を付ける。「CSSスタイル」パネルの「新規CSSルール」ボタンをクリックし、「新規CSSルール」画面を図のように設定してIDセレクタを作成し、テーブルの外枠をクリックして、テーブル全体を選択する。

セレクタを作成

外枠をクリックしてテーブルを選択する

「CSSスタイル」パネルの「#traveldata」セレクタを右クリックして、メニューから「適用」を選択。これで、テーブルに対してID名が付けられる。ソースコードを見ると、tableタグの中に「id="traveldata"」の一文が追加されているのを確認でき、HTMLファイルを上書き保存して閉じる。

ID名を適用する