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

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

別のHTMLファイルを用意して、「Spryデータセット」を挿入してみよう。HTMLファイルを開き、「挿入」メニュー→「Spry」→「Spryデータセット」を選択する。

「Spryデータセット」の画面が開くので、「データセット」から「HTML」、「検出」から「テーブル」を選択します。「データセットの指定」の「参照」ボタンをクリックし、テーブルデータを指定する。

上の領域に、選択したテーブルデータが表示される。黄色いマーカーをクリックすると、下の領域にプレビュー画像が表示されるので、「次へ」ボタンをクリックする。

「データオプションの設定」画面が表示された。日付のデータをソートして、降順に並べ替えるように設定する。「その他のオプション」の「列のソート」から「Date」、並び順から「降順」を選択し、「次へ」ボタンをクリックすれば「挿入オプションの選択」画面が表示される。ここでは、上から2番目にある「マスター/詳細レイアウトの挿入」を選択し「セットアップ」ボタンをクリックする。

マスター列と詳細列を指定。ここでは、マスター列を「日付」とし、残りの3つを詳細列とする。「挿入オプションの選択」画面に戻ったら、「完了」ボタンをクリック。「Spryデータセット」のコンテンツが挿入される。データが入る場所には、プレースホルダーが表示されている。

ライブビュー/ライブコードで表示を確認する

「ライブビュー」は、Webブラウザと同様の表示をDreamweaverで再現する機能。この機能を使うことにより、いままでブラウザでプレビューしなければならなかったJavaScriptやCSSの動作が、Dreamweaverのドキュメントウィンドウで確認できるようになった。

「Spryデータセット」で作成したコンテンツを、ライブビューで確認してみたい。まずはドキュメントツールバーにある「ライブビュー」ボタンをクリックする。

ブラウザで開いたときの表示内容が、Dreamweaverのドキュメントウィンドウで再現された。Spryデータセットのプレースホルダーには、データが表示されている。日付をクリックすれば、右列の内容が更新される。

さらに、コードの変化を確認したいときは、「ライブビュー」ボタンが押された状態で「ライブコード」ボタンをクリックする。これでマウスカーソルを別の日付に重ねたり、クリックすると、コードが変化する。