Web技術実習
	戻る〔２６．Webプログラミング〕　次へ〔２８．フォーム〕　目次

２７． ナビゲーションメニュー�T □□□□□□□□□□□□□□□□□□□■■□■■

27-1 ナビゲーションメニュー

　デパートのように、たくさんの商品をフロアごとに扱っているところでは、利用する人に便利なように、何がどこにあるかを知らせる案内板が必ずある。同じように、Webサイトもコンテンツがたくさんになってくると、この案内板が必要になってくる。Webサイトでは、コンテンツの説明とリンクをセットにして、メニュー形式で示すことが多い。
　Webサイトに盛り込む情報を「基本設計」でしっかりと分類・整理しておくと、自然とメニューの内容になってくる。あとは、誰が見てもわかりやすい形のメニューにするための工夫だけである。

よくある形式のメニュー

タイトル メニュー1 メニュー2 …

タイトル メニュー1 メニュー2 …

本文（コンテンツ）

　トップページをメニューにする。　　　　フレームでメニューを常に表示する。

27-2 グローバルナビゲーションとローカルナビゲーション

　大きなWebサイトでは、すべてのコンテンツをメニューに表示すると膨大な量になり、閲覧者にとって探しやすいものではなくなる。類似した情報をグループ化して、Webサイト全体がおおよそ理解できるようにしておく方がよい。これは基本設計で検討する。
　次の図は、左側のメニューを右側のように、フォントと色彩に関する情報について、それぞれまとめた例である。これで、「このWebサイトはフォント、画像、表と色彩の4つのコンテンツがあるのだな」とわかる。

　トップページのメニューなど、Webサイト全体の構造がわかるようなものを「グローバルナビゲーション」といい、ある種の情報グループに関するものを「ローカルナビゲーション」という。

・パンくずリスト

　リンクをたどっていくと、自分（閲覧者）がWebサイトのどこにいるのかわからなくなることがある。一番簡単な対処方法としては、「すべてのWebページにトップページ（メニュー）に戻ることができるリンクを設定しておくこと」であるが、工夫された例として「パンくずリスト」と呼ばれるものがある。上図のメニューやWebページの上部にある「トップ ＞ フォント ＞ フォント装飾2」である。リンクでたどってきた道筋を表示したもので、さらにリンクが張られているので戻ることができる。パンくずリストの名前の由来は、童話「ヘンゼルとグレーテル」からである。
　パンくずリストは垂直方向（より深く）のナビゲーションであるから、水平方向（より広く）のナビゲーションと組み合わせると効果的である。

27-3 クリッカブルマップ形式

　クリッカブルマップ(clickable map)とは、1枚の画像の中に複数のリンク先を設定する機能である。また、その機能を持つ画像のことである。画像の一部分を指定して、その部分に対してリンクを設定する。地図の画像を利用したWebサイトのメニューなどに利用できる。イメージマップ(image map)とも呼ばれることがある。

　クリッカブルマップには大きく分けて2種類ある。
　一つはサーバサイドのクリッカブルマップで、Webサーバ上にマップを置く方式である。マップはHTMLファイルとは別のファイルに記述する。Webサーバによって記述方法が異なる。HPBでは、NCSAとCERNという形式が作成できる。
　もう一つはクライアントサイドのクリッカブルマップ（以下では CSIM (Client-Side Image Map) と呼ぶ）といい、Webページ内部にマップを記述する方式である。CSIMは図形やURLなどの情報がHTMLの文法で記述され、ブラウザ側で処理される。

実習２４　トップページ(index.htm)にクリッカブルマップを追加する。
　HPBは「Web」のサイトを開いておくこと。
　Webページは「index.htm」を開いておくこと。

　操作１　フォント(moji.htm)と色彩(iro.htm)のメニューページを作成する。（上例を参照）

　操作２　クリッカブルマップ用に画像を用意して、トップページ(index.htm)に配置する。画像のサイズは450×250ピクセル程度とする。

・クリッカブルマップ（イメージマップ）設定

　操作３　画像を右クリックして、メニューから次のように選択する。

［編集を編集(J)］　→　［イメージマップの編集(M)...］

　→ 「イメージマップ エディタ」が表示される。

　操作４　「イメージマップ エディタ」で範囲やリンク先を設定する。

�@　［マップ(M)］はクリッカブルマップに付ける名前である。ファイル名を元に入力されているので、そのままにしておく。
�A　ボタンの左3つが範囲を指定する形で、左端から"多角形"、"円形"、"長方形"の順に並んでいる。それぞれ一つずつ使う。
�B　範囲指定すると、属性（リンク）のダイアログが開くので、リンクを設定して［OK］ボタンをクリックする。これを4回行って、イメージマップエディタの［OK］ボタンをクリックする。

※をクリックするとマップリストの表示・非表示が切り替わる。マップリスト下の代替えテキストの入力欄に文字を入力すると、画像のときと同じようにマウスが上に乗るとテキストが表示される。

　操作５　上書き保存して、Webブラウザでリンクの確認をする。

　次に、クリッカブルマップ設定のHTMLソース（タグ）の一部を示す。座標は範囲設定で変わる。

<P align="center"> <IMG src="fig/clickablemap.png" width="450" height="250" border="0" usemap="#clickablemap1" alt="clickablemap"></P> <MAP name="clickablemap1"> 　　　　<AREA href="moji1.htm" shape="circle" coords="63,138,55" alt="FONT"> 　　　　<AREA href="hyou1.htm" shape="poly" coords="236,57,237,129,277,157,323,120,318,57,280,39,238,53" alt="TABLE"> 　　　　<AREA href="iro1.htm" shape="circle" coords="386,164,54" alt="COLOR"> 　　　　<AREA href="gazou1.htm" shape="rect" coords="126,31,216,114" alt="IMAGE"> 　　　　<AREA shape="default" nohref> </MAP>

27-4 ロールオーバー形式

　Webブラウザの画像上にマウスを移動させると、画像が別のものに切り替わり、マウスを画像上から外に移動すると元の画像に戻る、このような機能をロールオーバー(rollover)という。
　画像にロールオーバーの機能を設定するには、最低、通常時と切り替え時の2枚の画像が必要である。ロールオーバーの機能はプログラム(javascript)によって実現する。

実習２５　トップページ(index.htm)にロールオーバーを4つ追加する。
　HPBは「Web」のサイトを開いておくこと。
　Webページは「index.htm」を開いておくこと。

　操作１　メニューバーから次のように選択して、ウェブアートデザイナーを起動する。

［ツール(T)］　→　［ウェブアートデザイナーの起動(D)］

　操作２　元になる画像をキャンバスに配置する。

�@　ウィンドウ左側のビューの［ウェブアート素材］タブをクリックする。
�A　［ロールオーバー］ボタンをクリックする。
�B　下部のリストから適当な画像を選んでダブルクリックする。
　→　2つの画像が配置される。また、ロールオーバー作成のダイアログも表示される。

　操作３　画像の色や大きさ、文字などを修正する。
　変更しようとする部品をダブルクリックすると、編集のダイアログが開く。このダイアログで必要な変更を行う。変更後は、閉じるボタンでダイアログを閉じる。

　操作４　ロールオーバーの画像2つをロールオーバー作成のダイアログに登録する。
　画像を選択して、［登録］ボタンをクリックすると画像が表示される。

　操作５　ロールオーバーの画像を保存する。

�@　ロールオーバー作成のダイアログの右下にある［ロールオーバー保存(S)］ボタンをクリックする。ロールオーバー作成ウィザードが表示される。
�A　ロールオーバー作成ウィザード（位置の設定）の設定はそのままで、［次へ(N)］ボタンをクリックする。
�B　ロールオーバー作成ウィザード（保存形式の選択）の設定もそのままで、［次へ(N)］ボタンをクリックする。
�C　ロールオーバー作成ウィザード（保存方法の選択）は、［○ホームページ・ビルダーに貼り付ける(P)］を選択して、［完了］ボタンをクリックする。
　→　HPBのカーソル位置にロールオーバーの画像が貼り付けられる。

　操作６　ロールオーバーの画像にリンクを設定する。

�@　HPBに切り替えて、貼り付けられた画像の上で右クリックして、メニューから［画像のロールオーバー効果の設定(H)］を選択する。設定のダイアログが表示される。
�A　画像のロールオーバー効果の設定のダイアログで、［その他］タブをクリックして、リンク先を設定する。「フォント」のリンク先はmoji.htmである。設定後、[OK]ボタンをクリックする。

　操作７　Webページを保存する。
　画像を所定のフォルダにコピーするため、素材ファイルをコピーして保存のダイアログが表示される。ファイル名が自動的に付けられているが、わかりやすいファイル名に変更する方がよい。

　操作８　残り3つのロールオーバーも同じように操作して追加する。
　リンク先は次の通りとする。

フォント　…　moji.htm 画像　　…　gazou1.htm
表　…　hyou1.htm 色彩　…　iro.htm

　操作９　上書き保存して、Webブラウザでリンクの確認をする。

　操作１０　ウェブアートデザイナーを終了する。
　終了時に保存確認のダイアログが表示されるが、保存しなくてもよい。ロールオーバーの画像はHBPでfigフォルダに保存しているからである。また、ウェブアートデザイナー専用のデータファイルはfigフォルダ内の__HPB_Recycledフォルダに保存される。

　次に、ロールオーバーのHTMLソース（タグ）の一部を示す。

<A href="moji.htm" id="_HPB_ROLLOVER1" onmouseout="HpbImgSwap('_HPB_ROLLOVER1', 'fig/rbfont1.jpg');" onmouseover="HpbImgSwap('_HPB_ROLLOVER1', 'fig/rbfont2.jpg');"> <IMG src="fig/rbfont1.jpg" width="100" height="50" border="0" name="_HPB_ROLLOVER1"></A>

　onmouseoutはマウスが外にあるとき、onmouseoverはマウスが上にあるときの設定である。
　javascriptのプログラムは［HTMLソース］の先頭にある。自動的に挿入される。

27-5 プルダウン形式

　HPBをはじめとする、いろいろなアプリケーションソフトウェアで、メニューバーをクリックすると、メニューの一覧が垂れ下がったように表示される。このような形式のメニューをプルダウンメニュー(pull-down menu)、またはドロップダウンメニュー(drop-down menu)という。この機能はプログラム(javascript)によって実現する。

フォントサンプル

→ → → → → → クリックする ← ← ← ← ← ←

フォントサンプル 　フォントのサンプル 　フォントサイズのサンプル 　フォント装飾のサンプル 　フォント装飾のサンプル2

プルダウン 　　　メニュー

　「フォントサンプル」の部分をクリックするとプルダウンメニューが表示され、もう一度クリックすると非表示になる。

27-6 タブ形式

　1つのWebブラウザ内で、タブメニューによって複数の画面を切り替えて表示させる機能のことである。HPBにある［ページ編集］、［HTMLソース］や［プレビュー］のタブと同じような機能である。

戻る〔２６．Webプログラミング〕　次へ〔２８．フォーム〕　目次
Web技術実習	Copyright © 2006,2007 Hiroshi Masuda