ウェブ制作者にとってコーディングを行う際に必ずと言っていいほど現場で使用されている
Adobeのオーサリングソフト「Dreamweaver(ドリームウィーバー)」。
前回の編集可能領域についての投稿からさらに1歩進んで
テンプレートの機能「オプション領域」について説明します。
これを利用するのは一般的にグローバルナビゲーションで使われることが多いようです。
どのように使うかと言いますと、
今見ているページがどこなのか分かるようにそのページのナビゲーションのボタンが
マウスカーソルがボタンにのっている状態（ロールオーバー）にしておき
他のボタンは通常（ロールアウト）にしておきます。
それによって今どこのページ（カテゴリー）にいるのか分かり、
ユーザーが迷わずサイトを閲覧できます。
つまりユーザビリティーの向上に一役買うといったところでしょう。
それではオプション領域の設定に移ります。
まずは設定前のデザイン
ここのコードは
|
1 2 3 4 5 6 7 8 |
<div id="g_navi"> <div id="gnavi_div"> <ul> <li><a href="../"><img src="shr/img/base/gnav_home_rollout.jpg" width="156" height="55" alt="ホーム" /></a></li> <li><a href="blog/index.php"><img src="shr/img/base/gnav_blog_rollout.jpg" width="155" height="55" alt="ブログ" /></a></li> </ul> </div> </div> |
ブログのページに行った際にこのナビゲーションの「BLOG」ボタンが
ロールオーバーの状態にします。
通常（ロールアウト）
ロールオーバー
ではオプション領域を設定してみます。
上記のナビゲーション部分のコードをコピーし、
さらにその下にペーストします。
こんな感じでナビゲーションが連続します。
そして先程のコード
繰り返し部分の「BLOG」のボタンをロールオーバー状態に変えます。
このロールオーバーの設定のやり方はひとそれぞれです。
CSSでする人もjavascriptでする人もj-queryでする人もいますが
私は今回rollover2.jsというものを使って設定しています。
このjavascript説明は割愛しますがとても便利なので是非検索してみてください。
rollover2.jsでロールオーバーを設定すると
gnav_blog_rollout.jpg（通常のボタンの方）を
gnav_blog_rollover.jpg（ロールオーバーの方）と変えるだけで画像に切り替えてくれます。
そしてロールオーバーの状態にしたものがこちら
前提としてこのファイルは.dwt（つまりテンプレートファイル）で、この状態で下記のように
上のナビゲーションのコードを選択します。
そして「挿入」タブの「テンプレートオブジェクト」からオプション領域を選択
すると下記のようなウィンドウがでてきますので名前の欄に任意の名前を付けます。
同じように下のナビゲーションも選択しオプション領域にします。
名前はhomeとblogにしました。
Dreamweaver(ドリームウィーバー)上では崩れてしまいましたが問題ありません。
設定すると「If home」「If blog」と条件分岐ができるようになります。
このテンプレートを使い新規のhtmlファイルをつくります。
そのファイルを開き「修正」から「テンプレートプロパティ」をクリックすると
下記のようなウィンドウがでてきます。
blogを表示のチェックボックスをクリックし、
homeの部分を選択し、homeを表示のチェックボックスのチェックを外すと
「真」「偽」の条件分岐が変わります。
すると最初からブログのボタンがロールオーバーの状態のファイルに変わります。
これは応用がきくので是非押さえておきたいDreamweaver(ドリームウィーバー)の機能の１つです。
