ホームページビルダー・グレート初心者講座

　レイアウト枠を使って標準モードからダイナミックHTMLを利用する

画像や文字をHTMLだけで動かすダイナミックHTMLでレイアウト枠を使いさまざまな動きをさせる事をやってみます。

　ダイナミックHTML（DHTML）とは？

ダイナミックHTMLとは、CGIプログラムやGIFアニメーションなどを利用しなくても、HTML文章だけで動きのあるページを表現する技術で、下のサンプルのような動きをさせる事ができます。
この技術を使うと、メニューの上にマウスを乗せた際に詳細メニューを出すなどの動作をさせることも可能です。


	サンプル

　設定してみる

１．　レイアウト枠を挿入する
ダイナミックHTMLは「レイアウト枠」を使うことで設定することができます。
メニューバーの「挿入」から「レイアウト枠」を選択し、出てくる設定画面はそのままOKして飛ばします。

すると四角い枠が挿入され、これがレイアウト枠です

２．　レイアウト枠に画像を挿入する
レイアウト枠に画像を挿入するには、画像をドラッグ、ドロップでレイアウト枠の中に入れる事ができるようになっています。

３．　設定する
とりあえず表示位置はそのままで色々な動きをさせてみます。
レイアウト枠を右クリックし、「レイアウト枠の属性」を選択し、その中の表示されているサイズの「取得」ボタンをクリックし、次に設定画面の上のタブで「エフェクト」に切り替えます。　ここでさまざまな動きを設定する事ができます。

４．　エフェクトの設定
ここで表示されている「エフェクト」と「パターン」を選択する事で設定する事ができます。

「スピード」と「ループ」はプレビューで見ながら好みで設定します。

エフェクトなし	エフェクトを加えない時に指定します。これを非表示にしておいて、JavaScript で何らかの動作の時だけ表示させたりする動きを加えることが可能です。
フェードイン	画面の中にレイアウト枠が移動し、入ってきます。入ってくる方向や繰り返しなどを設定する事ができます。
フェードアウト	フェードインとは逆に画面の中から外へ出て行く効果を付けることができます。
ワイプ	動きは固定で、隠れていたものがスーッと表示される効果です。
クレジット	クレジットは映画などのスタッフスクロールなどによく使われる効果で、上下にレイアウト枠を流します。
ジャンプ	ジャンプは下から上に向かってジャンプしているような効果を出します。上下の動きは毎回同じ動きをします。
バイブレーション	バイブレーションは左右にブルブルと震えているような効果です。
回転	回転は上のサンプルの３番目で使っている効果です。レイアウト枠をグルグル回すことができます。これを使えば、何かの近くを蝶などが飛んでいるような演出ができます。
バウンド	上のサンプルの２番目で使っている効果です。ボールが地面に跳ね返っているようにジャンプさせることができ、だんだんと収まっていきます。
浮遊	レイアウト枠がふわふわと浮遊しているかのような効果をします。
静止	静止は、画面がスクロールしても同じ位置を保つ効果です。縦、横に画面がスクロールしたとしても、常に同じ表示位置で追尾して表示されます。

これらの設定をしていくことで、色々な効果を与えることができます。
実際に色々な動きをさせてプレビューで確認していくのが良いでしょう。

表示位置の設定
このレイアウト枠、ホームページビルダーで設定すると絶対位置となってしまい、ページが小さなディスプレイで表示されたりした場合、画面を標準モードで作っているとずれてしまいますので困ります。

ホームページビルダーの機能でレイアウト枠を操作する時は、固定にするしかありませんので、画面全体を「どこでも配置モード」でつくり、それぞれの部品を絶対位置指定で作ることで正しい位置に表示する事ができますがどうしても標準モードでやりたいという人は下の項目を参考にして下さい。
ソースの修正が必要ですが、表の中などにレイアウトする事ができます。

　標準モードでレイアウト

標準モードで表の中などにレイアウトしたい時は、ソースの修正が必要になってきますので、したに手順を説明していきます。

１．　まずはレイアウト枠を作り、設定する
まず表示位置はどこでもいいので、レイアウト枠を作成し、その中に画像を入れ、効果を加えますが、この方法を使うと後で修正する時はまたこの１番の手順からやり直すことになりますので、ここでどんな動きにするかをきちんと決めておきます。

２．　レイアウトしたい表を用意する
表の位置やサイズ、色などは後で修正できますので、とりあえずレイアウトしたい部分に表を作ります。　レイアウト枠を入れるのでサイズは指定しないようにしましょう。

３．　レイアウト枠のタグを切り取る
ページ編集モードから「 HTMLソース」に切り替え、レイアウト枠の部分のソースを切り取ります。
レイアウト枠をクリックし、そのままHTMLソースに切り替えるとレイアウト枠周辺のソースが表示されますので、下のような部分を探し、
<DIV style～から </DIV> までの部分を切り取ります。

※注意事項
必ず指定部分だけを切り取り、対象のレイアウト枠かを確認して下さい。
挿入した画像のファイル名などできちんと確認して下さい。　違う部分を
切り取ったりしてしまうと自動的に意図しないような形に修正されてしまう
ので注意し、間違えたら「元に戻す」コマンドで戻し再度作業して下さい。

「レイアウト枠の部分のソース」　（この部分全体を切り取ります）

４．　レイアウトしたい表のタグ間に貼り付ける
次に「ページ編集」画面に戻りレイアウトしたい表のセルをクリックします。
これでカーソルが表示されましたのでまた「HTMLソース」画面に戻ります。

すると、カーソルの表示位置が表のセルのタグ「　<TD>　と　</TD>　」の間にあると思いますので、その位置に先ほど切り取ったレイアウト枠のソースを貼り付けます。

※注意事項
カーソルの位置がおかしいときは再度セルをクリックし、HTMLソースに
戻って下さい。これも変な所に貼り付けるとエラーになったりして修正す
るのが大変です。

５．　貼り付けたソースを修正する
貼り付けたソースのままでは表示位置は変わっていませんので、ソースを修正します。

下の「修正前」と「修正後」をよく見比べて間違えないように削除、修正していきます。

削除箇所は赤色、修正箇所は青色で表示しています。
間違えて；などを削除してしまわないように注意して修正して下さい。

修正前のソース　（削除箇所は赤色　修正箇所は青色で表示しています）

修正後のソース

ソースの削除、修正が終わったら完了です。　プレビューで見てみましょう。
下はバウンドするレイアウト枠を作り、それを表の中に入れているサンプルです。
停止してしまっている場合は、ブラウザの更新を押し、確認してみて下さい。