かんたん！DreamWeaver 自由配置の小技

DreamWeaverMX 操作説明

初期画面です。4.0とのいちばん大きな相違点はやはりパネルの配置場所でしょうか。「オブジェクト（挿入）」パネルがメニューバーのすぐ下に配置され、「プロパティ」パネルも画面下に固定されています。
※できればこの時点でメニューバーの左端にある「ファイル」から「保存」を選び、あらかじめ作っておいたホームページ用のフォルダにドキュメントを保存してしまいましょう。

DreamWeaverMX 操作説明

これから画像や文字を入れるための空間を作ります。これをレイヤーといいます。空間というより透明なフィルムと例えたほうがいいかもしれません。これからする作業は、透明なフィルムを作り、それを紙の上で自由に動かすようなかんじです。
メニューバーの下、「挿入」パネル「一般」の左から５番目（初期設定の場合）、「レイヤーを描画」をクリックしましょう。
そして画面の上でドラッグして描画してください。大きさは後で調整するので適当でかまいませんよ。

DreamWeaverMX 操作説明

レイヤーの中に画像を挿入しましょう。レイヤーの中をクリックして、ポインタを移動しておいてください。
メニューバーの下、「挿入」パネル「一般」の左から６番目（初期設定の場合）、「イメージの挿入」をクリックしましょう。
「イメージソースの選択」パネルが現れるので、挿入したい画像を選んでください。

画像の挿入が終わったら、レイヤーの上にポチっと出ているタブをクリックしてレイヤーを選択してください。そして画面下のプロパティパネルで「幅」と「大きさ」を任意の大きさに変えてください。「左」と「上」はそのままでいいですよ。
後でテーブルに変換するのですが、その時レイヤーの大きさ＝セルの大きさとなります。もちろんテーブルに変換してからも微調整できますが、いま簡単に出来るうちに済ませてしまいましょう。余白など必要ない場合は画像の大きさに合せてくださいね。

ここまで終えたら、後はレイヤーの上のタブをクリック＆ドラッグして、お好きな位置に配置してください。とっても簡単に動きますよね。わたしもこの操作方法を知った時は感動しました（笑）。

※文字を入れる場合も同じ手順です。

DreamWeaverMX 操作説明

同じ手順で新しくレイヤーを描画し、画像や文字を入れ、お好きな位置に配置しましょう。

それぞれのレイヤーを自由に配置したままでもホームページとして充分成り立ちますが、レイヤーのままだとブラウザによって表示のされ方が多少違ってきます。せっかくベストな位置に配置したのに、お友達のパソコンで見たらぐちゃぐちゃ、なんて悲劇が無きにしも有らずなんです。

※ホームページビルダーの「どこでも配置モード」は、このレイヤー機能のみを使うものです。

DreamWeaverMX 操作説明

レイヤーの配置を終えたら、テーブルに変換してみましょう。
メニューバーの「修正」→「変換」→「レイヤーをテーブルへ」をクリックしてください。すると「レイヤーをテーブルへ変換」パネルが現れます。
以下はここでの設定です。

テーブルレイアウト：
最も正確に　／
透明ＧＩＦの使用　／sparcer.gif という透明な画像で、セル幅などが変わらないよう「つっかえ棒」のような役割をしてくれます。あとでセルの大きさを変える必要がないときは、あったほうがいいと思います。
ページ中央に揃える　／レイヤーの配置を保ったままページの中央に揃えてくれます。

DreamWeaverMX 操作説明

完成しました♪ブラウザでプレビューして確認してみましょう。
メニューバーの「ファイル」→「ブラウザでプレビュー」→「iexplore」、またはキーボードの「F12」をクリックしてください。
サンプルはこちら→Click!

思い通りの配置になっていますか？
便利な機能なので活用してくださいませ☆