family.htmをDWで開いて作業します。ここからはデザインビューでビジュアル操作を行いますが、同時にソースコードも見ながら作業して貰えると、ソースがどのように変化していくかが理解できると思います。デザイン、ソースの両方のモードで自在に操作できるように訓練しましょう！
まずは左の部分のナビゲーションテーブルをクリックします。

プロパティパネルで選択したテーブル--ナビゲーションテーブルの列幅をクリアしておきます。自動伸縮テーブルになりました。

ナビテーブルにロールオーバーボタンを増やすので1行7列の現在のテーブルを1行8列にしてファミリーボタンを挿入するセルを増やします。ナビテーブルを選択した状態でプロパティパネルの列を7から8に変更します。Enterで確定してください。

この様にセルが1列増えればOKです。増やしたセルの中にfamilyボタンを配置します。

増やしたセル内をクリックしてカーソルを入力状態にします。カーソルがセル内で点滅表示していればOKです。

ツールバーの一般からロールオーバーイメージをクリックします。もしくは、メニューから
挿入-イメージオブジェクト-ロールオーバーイメージ
をクリックすることでjavascript rollover操作パネルが開きます。

ロールオーバーイメージの挿入パネルです。ここでロールオーバーする画像を指定することで適切なJava scriptが書き出されます。DWのとっても便利な機能ですね。

左が挿入パネルの設定値です。イメージ名はImagefamilyとしておきます。元のイメージとはロールオーバーする前の画像のことです。imagesフォルダにコピーしたbtn_family.gifを指定します。参照ボタンでブラウズしていくと楽ですね。次にロールオーバーイメージを指定します。同じくimagesフォルダにコピーしたbtn_family_over.gifを指定します。代替テキストにファミリーと入れてクリックで移動するファイルfamily.htmを指定します。OKボタンをクリックして挿入されたか確認しましょう。

ちゃんとfamilyのナビボタンが挿入されました。

再びナビゲーションのテーブルを選択して自動伸縮テーブルから列幅を固定しておきます。

テーブルが選択できたらプロパティパネルのテーブル幅をピクセルに変換するボタンをクリックしてください。

テーブルと各セルの列幅が絶対値で指定されました。ｃｔｒｌ+Sでファイルを保存してF12でプレビューして見ましょう。ボタンのロールオーバーが完成しました。
でもこのページだけ適用しても意味がありませんので全部のページを変更します。
次のページへ続く…Next