（画像の上にマウスを乗せると画像が変わります。）
| WAN Will Way ＞ 素材集TOP ＞ パーツ素材作成講座 ＞ |
|
ホームページ・ビルダー（原稿制作時バージョン8）を購入すると、もれなく付いてくるウェブアートデザイナーを使って、ロールオーバーのボタンを作ってみましょう。ホームページ・ビルダーとウェブアートデザイナーの組み合わせで、初心者でも簡単に動きのあるホームページが作れます。 |
| 今回作る作品はこれ！
（画像の上にマウスを乗せると画像が変わります。） |
STEP 1 新規作成をするホームページ・ビルダーを起動し、メニューバーから[ツール-ウェブアートデザイナー]を選択します。ウェブアートデザイナーが起動し、次のような画面が表示されます。  |
STEP 2 ボタンを作りますメニューバーの[オブジェクト-ボタンの作成]、またはツールバーの をクリックします。 [一覧]から「quadra22」ボタンを、選んで、[次へ]ボタンをクリックします。  [種類]からボタンを1つ選択した後、[一覧]から色を1つ選択して（今回は淡いクリーム色を選択しています）、[完了]ボタンをクリックします。キャンバス上にボタンが現れました。 もうひとつ[一覧]から「quadra25」ボタンを、選んで、同様の作業をします。2つのボタンがキャンバス上に現れたと思います。（下図）  ボタンの画像をクリックすると、選択出来ます。 選択したボタン（2つとも）を、それぞれ60×60ピクセルにリサイズします。  ウェブアートデザイナーの画面左下に、つかんでいる際のサイズが表示されます。ここをみながらリサイズすると便利です。  |
STEP 3 ボタンの模様と文字を作ります次に[編集-素材集から貼り付け]、またはツールバーの をクリックします。
|
STEP 4 ボタンに模様と文字を重ねます と  をシフトを押しながら2つとも選択し、[オブジェクト-整列-中央揃え]をクリックします。  ができます。2つとも選択したまま、[オブジェクト-グループ-グループ化]します。 と  をシフトを押しながら2つとも選択し、[オブジェクト-整列-中央揃え]をクリックします。 の完成です。同様に  と も中央揃えにしますが、少し を右下にずらすことでボタンを押した感じを強調できます。 の完成です。 |
STEP 5 2つのボタンにロールオーバー効果を加えます[オブジェクト-ロールオーバーの作成]または、 をクリックします。まず「通常時の画像」を指定します。ボタンを選択し、登録ボタンをクリックします。  そして「マウスポインタが上にきたときの画像」を指定します。ボタンを選択し登録ボタンをクリックします。  プレビューの画面上にマウスを置くと画像が変わるので動作を確認して、[ロールオーバー保存]をクリックします。 |
STEP 6 完成[ロールオーバー保存]をクリックすると下図が出てきます。 [位置設定]を選択した後、[次へ]をクリックします。  次に[保存形式]を選択した後、[次へ]をクリックします。今回はGIF形式を選択しました。  最後に保存方法を選択して、保存します。 [ホームページ・ビルダーに貼り付け]を選択すると、編集中のホームページ・ビルダーのページにそのまま貼り付けられます。編集中のページがない場合は、白紙のページが作られ、そのページ内に貼り付けられます。 [ファイルに保存]を選択すると、PCのファイル内に、通常時の画像と、マウスポインタが上にきたときの画像ファイルが2つと、それらをコントロールするHTMLファイル1つを保存できます。マイドキュメントの中に新しいファイルを作り、そこに保存しておくのがよいでしょう。 メモ帳や、他のエディターで編集する場合には、ロールオーバーのソースへのリンクを参考にしてください。 [パーソナルフォルダに保存]を選択すると、ホームページ・ビルダー内のパーソナルフォルダに[ファイルに保存]と同様に3つのファイルを保存します。 |
本記載内容は「IBM ホームページ・ビルダー Version 8」に基づいています。
IBM、ホームページ・ビルダーは、IBM Corporationの商標です。 |
| by ちいた |
をクリックし、書体を「Impact」文字サイズ「10」を選択します。今回の文字は「E N T E R」を「Impact」の10ポイントで、作ってみました。