 |
画像処理ソフトで追加するナビボタンを作成します。DWと共に使用しているマクロメディアのFireWorks（以下FWと略します。）での作り方です。別のボタン画像のエイリアスをコピーして（Ctrl+Shift+D）移動した後に文字をfamilyに入れ替えます。 |
 |
FWではその部分だけ切り出すスライス領域を作成します。やはりこの部分もお隣のボタンのスライス領域をコピーしてスライドさせます。ボタンのサイズが大きいのでスライス領域の長さを大きくして他のボタンと同じ間隔が空くように調節します。スライス領域上で右クリックして選択スライスの書き出しを行います。書き出すボタン名はbtn_familyとします。 |
 |
同様にロールオーバーさせる画像もつくりますね。上の作業時に非表示にしていた薄ピンク色の画像をonにして表示させます。スライス領域上で右クリックして選択スライスの書き出しを行います。書き出すボタン名はbtn_family_overとします。 |
  |
書き出した画像は左の2点となりますのでlittlemomさん、このボタンを使用してください。この画像をコピーしてlittlemom.netローカルサイトのimagesフォルダにコピーします。 |
 |
ここからはDWの作業に入ります。family.htmをDWで開いて下さい。F12キーでこのファイルをIEブラウザで表示させてみるとkittenのボタン上で画像がロールオーバーしていませんね？まずはこのボタンをロールオーバーさせてみます。 |
 |
DWで開いたfamily.htmファイルでkitten画像をクリックします。プロパティパネルでImagekittenとボタンに名前を付けます。 |
 |
Alt属性でボタン名を表示させるためプロパティパネルの代替表示にkittenと入れてください。 |
 |
他のボタンのJavaScript命令をソースコードからコピーします。お隣のJava記述をソースコード上でドラッグしてコピーしましょう。画面のようにデザインとソースコードを同時に表示させて作業するとhtmlソースにも目が慣れて作業しやすくなると思います。同時表示させる方法はパネルの分離タブをクリックすることです。もしくはメニューから 表示-コードとデザイン をクリックします。コピーするソースは以下の部分です。
onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image
museum','','images/btn_museum_over.gif',1)" |
 |
コピーしたソースをkittenボタンのリンク先コード
<a href="kitten.html" の後に貼り付けます。 |
 |
貼り付けて挿入したソースコードのImagemuseumの部分を、 |
 |
imagekittenに変更します。 |
 |
同様にその後の images/btn_museum_over.gif の部分を、 |
 |
images/btn_kitten_over.gif と書き換えます。書き換えが出来たらCtrl+Sでファイルを上書き保存することを忘れずに！
ココまでの作業はすべてソースコードの画面で作業して下さい。 |
 |
F12ボタンを押してブラウザでプレビュー表示させて動作を確認します。マウスをkittenボタンの上に持ってくるとボタンがロールオーバーしますか？
ロールオーバーしてクリックするとkittenページに移動すればOKです。動作しないときはもう一度ソースコードを見直して下さい。
familyボタンの作り方は次のページへどうぞ！！ |
| |
|
