スケルトンハウス‐きまぐれCafe

生活とビジネス

そのときの思いや状況で、いろいろなことを話し合ってきた喫茶店。きまぐれに、思いつくままに・・・

点滅ボタンの作成/HPBでWebページ作成

2013-08-17 10:24:50 | デジタル・インターネット

 Webページを作成するとき、閲覧者に強調したい部分に『点滅ボタン』を付けると、分かりやすくなります。



 ホームページビルダー・フルパッケージ版では、付属の「ウェブアニメータ」で作成することができます。



<手順>

1.ペイントで、ボタンの大きさや文字が全く同じ、濃い色と薄い色の二種類の画像を作成しておく



 文字の高さと同じ位の小さなボタンだと、幅29px、高さ14px位かな?



2.ウェブアニメータでの作業

①HPBを起動

②メニューバーから「ツール」→「ウェブアニメータの起動」の順にクリック

03_webanimater

③「スタートアップダイアログ」が表示される

04_startUp-1

④「アニメーションウィザード(w)」ボタンをクリック

05_startUp-2

⑤「アニメーションウィザード(アニメーションの選択)ダイアログが表示される

05

⑥「複数の画像ファイルを使用してアニメーションを作成」ボタン→〔次へ(N)〕をクリック

06_animewizard-1

⑦「アニメーションウィザード(ファイルの指定)ダイアログが表示される

07_animewizard-2

⑧〔画像の追加(A)〕ボタンをクリックし、最初に作成しておいた二つの画像を読み込み、〔次へ(N)〕ボタンをクリック

08_fail

⑨「アニメーションウィザード(ファイルの指定)ダイアログが表示される。
 中央のアイコンをクリックし、〔次へ(N)〕ボタンをクリック

09_flam

⑩「アニメーションウィザード(繰り返し/表示時間の指定)ダイアログが表示される。
 「無限」を選択→「表示時間」に“100”と入力→〔次へ(N)〕ボタンをクリック

10_time

⑪「アニメーションウィザード(アニメーションのプレビュー)ダイアログが表示される。
 プレビューを確認して〔完了〕ボタンをクリック

11_prevew

⑫ウェブアニメータ編集画面に戻る
 「ファイル」→「名前を付けて保存(A)」の順にクリックし、ファイル名を入力し、HTMLファイルと同じフォルダーに保存する

12_hozon

⑬ウェブアニメータ編集画面の右肩の〔×〕ボタンをクリックして終了する

13_hozon2

3.HTML編集画面「ナビメニュー」の「写真や画像の挿入」で、作成したボタンを挿入する

14_HPBsose

 アニメーションはWebでのみ表現されるので、編集画面では挿入したはずの「点滅ボタン」が表示されません。プレビュー画面で確認します。






  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする