⑤CSSを使ってフッターメニューを作成する。
フッターメニューには、Javascriptを使用しませんが、全ページに設置する方がSEO対策上有利に働き、
検索ロボットは、各ページを見逃すことなくしっかりと読み込んでくれるようになるということなので復習しておきましょう。
まず＜div id="foot"＞の前に挿入パネルを使って、Divタグを挿入を選びます。
「id "footer_menu" の内容がここに入ります」の文字を削除してプロパティパネルのリストボタンをクリック。
＜li＞＜/li＞のリストタグをコピーして５つに増やし、下図のように文字を記述します。
リストに入力した文字をドラッグしてプロパティパネルのリンク欄に#（ダミーリンク）を設置します。
Style.cssにフッターメニュー用のCSSを記述して横並びにし、縦棒を表示しましょう。
#footに設置している「clear:both」は、#footer_menuに移動しています。
⑦プロパティの変更で文字のサイズを変更する。
まず置く場所を決めます。#right h2の右端に設置してみたいと思います。
＜div id="right"＞の下に＜p id="size"＞Font-size｜Ｓ｜Ｍ｜Ｌ｜＜/p＞を記述。
「Ｓ」「Ｍ」「Ｌ」の文字にそれぞれダミーリンク（"#"）を張りましょう。
style.cssの#rightに「position:relative」を追加します。（親ボックスの指定。）
#sizeを絶対配置指定します。そのほかCSSで装飾を追加してで見た目を整えます。
配置が完了したら、文字サイズを変更したい箇所を＜div id="change"＞＜/div＞でくくります。
今回は＜h2＞イタリア料理とは＜/h2＞～終了の＜/div＞直前の＜/p＞までです。
次にプロパティを変更します。まず「S」の文字の横にカーソルを置きビヘイビアーパネルを確認します。
タグ＜a＞が選ばれていることを確認して、「＋」アイコン→プロパティの変更をクリックします。
「Ｍ」「Ｌ」の横にもカーソルを置き同じように設定します。新規の値は「Ｍ」が110%、「Ｌ」を120%にします。
ブラウザで文字サイズが変更されるか確認してください。
⑧Lightbox2を設置する。
最新版の「lightbox2」をダウンロードしましょう。
http://lokeshdhakar.com/projects/lightbox2/
教科書のバージョンとは少し内容が変更されています。
解凍するとjsの数が減っていて、JQueryが同梱されてました。
ひとまず３つのフォルダをサイト管理している「00_start」フォルダに移動します。
そのままでも結構ですが、サンプル用の不要なファイルは削除しても構いません。
使うファイル
cssフォルダ内
・lightbox.css
・screen.css 計2点
imagesフォルダ内
・close.png
・loading.gif
・next.png
・prev.png 計4点
jsフォルダ内
・jquery-1.7.2.min.js
・jquery.smooth-scroll.min.js
・jquery-ui-1.8.18.custom.min.js
・lightbox.js 計4点
またstyle.cssをcssフォルダに移動したい時や画像フォルダを１つにしたい時などは、必ずDW上で行います。
（DWが設置されたリンクなどの設定を自動的に修正してくれます。）
試しにstyle.cssを「css」フォルダに移動してみましょう。ファイルの更新の表示が出たら必ず更新を選んでください。
用意ができたら、htmlファイルに外部CSSファイルと外部JSファイルを関連付けします。
次に拡大画像へのリンクを設定します。#rightの「food1.jpg」「food2jpg」に設定しましょう。
元画像をクリックして、プロパティパネルのリンク欄で拡大画像を選択します。（今回は「imgs」フォルダ内の「italian01.jpg」「italian02.jpg」）
次に「lightbox」を呼び出す属性をhtmlファイルの拡大画像のリンクに追加します。画像のグループ化も同時に設定しましょう。
＜a href="imgs/italian01.jpg" rel="lightbox[food]" title="「コースメニューのご予約も承ります。」"＞
＜a href="imgs/italian02.jpg" rel="lightbox[food]" title="「豊富なパスタメニューもご用意しております。」"＞
設定ができたらブラウザーで確認しましょう。
⑨外部javascriptへの書き出し。
DWで自動的にhtmlファイルのhead内に生成されたJavaScriptのコードを外部ファイルに書き出します。
外部ファイルにするメリットは、html修正時にJavaScriptの部分を壊す心配がなくなることと
複数のhtmlファイルで共有することができるようになり、修正も１つのファイルで済むということでしたね。
では、新規JavaScriptファイルを作成します。（Ctrl＋N→空白ページ→JavaScrip→作成）
Ctrl＋Sで保存先を「js」フォルダに変更し、「kadai.js」で保存します。
index.htmlに戻り、＜script type="text/javascript"＞～＜/script＞の部分をカットします。
削除した場所で改行し、先に外部JavaScritファイル「kadai.js」へのリンクを記述しておきましょう。
先ほど作成した「kadai.js」ファイルにそのままペーストします。そのままではエラーの表示が出ていますね。
不要なhtmlのタグ＜script type="text/javascript"＞と＜/script＞を削除して保存します。
同じように上の図のcssの部分も「style.css」に移動してみましょう。
移動できたらブラウザで移動する前と同じように動くかを確認してみてください。
⑩oveflowプロパティでスクロールバーを表示。
ほぼ完成したのですが、プロパティの変更で文字が大きくなると#leftの画像とのバランスが悪くなってしまいました。
そこでcssにoverflowを追加してスクロールバーを表示してみました。
overflowプロパティは、ボックスの範囲内に内容が入りきらない場合に、はみ出た部分の表示の仕方を指定する際に使用します。
overflowプロパティは、デザインやインターフェースの好みで、 擬似フレームや擬似テキストエリア的な表現にしたい場合に用いるケースが多いようです。
http://www.htmq.com/style/overflow.shtml
#right{
width:410px;
height:560px;
overflow:scroll;
margin:0px 10px 10px 0px;
float:right;
display:inline;
position:relative;
}
スクロールバーの表示分幅を狭くしました。
#size{
position:absolute;
top:12px;
left:250px;
background-color:#F99;
padding:2px 0px 2px 4px;
}
絶対配置指定のせいでサイズメニューが改行されてしまうので位置を変更。
ブラウザで確認してみてください。
最終的に完成見本のページの分は、#leftと#rightの高さを合わせてCSSで微調整してみました。
TOPボタンにスワップイメージを重ねがけしてみました。コレがまたビヘイビアーパネルがなかなか言うこと聞かない。（笑）
文字サイズのメニューが隠れてしまうのが気になります。（汗）まだまだ改良の余地ありですね。
http://win201202.aikotoba.jp/13/index.html#
以上で課題は終了です、おつかれさまでした。
