Web技術実習
	戻る〔２１．色彩（色のイメージと配色）〕　次へ〔２３．レイアウト〕　目次

２２． バナー（バナー広告）とアニメーション □□□□□□□□□□□□□■□■■□

22-1 バナー

　バナー(banner)とは、Webページに配置されている四角形の見出し画像である。バナーをクリックするとそのWebページが開くようなボタン的な使い方がされている。企業などのバナー広告(banner advertisement)が中心である。
　バナーサイズには、IAB(Internet Architecture Board)による国際標準のサイズがあるので、それにあわせて作成する方がよい。

◆Banners and Buttons （バナー＆ボタン）	◆Rectangles and Pop-Ups （長方形＆ポップアップ）	◆Skyscrapers （スカイスクレイパー）
468x60 (フルバナー) 234x60 (ハーフバナー) 88x31 (マイクロバナー) 120x90 (ボタン1) 120x60 (ボタン2) 120x240(縦バナー) 125x125(正方形ボタン) 728x90 (リーダーボード)	300x250 (Medium Rectangle) 250x250 (Square Pop-Up) 240x400 (Vertical Rectangle) 336 x 280 (Large Rectangle) 180 x 150 (Rectangle)	160x600 　　(ワイドスカイスクレイパー) 120x600 　　(スカイスクレイパー) 300x600 　　(ハーフページAD)
	IABのURL http://www.iab.net/standards/adunits.asp

　（日本のCG系では200x40のバナーが多いようであるが、日本のローカルサイズである。）
バナーのサイズ・サンプル

ウェブアートデザイナー

実習２０　Web技術実習用のバナー(88 x 31)をHPB付属のウェブアートデザイナーで作成する。
　HPBは「Web」のサイトを開いておくこと。
　Webページは「index.htm」を開いておくこと。

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

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

　操作２　バナーの背景になる素材をキャンバスに配置する。

�@　ウィンドウ左側のビューの［素材］タブをクリックする。
�A　素材ビューのツリーリストから［バナー］を選択する。
�B　下部のリストから適当な素材を選んでダブルクリックする

　操作３　素材（オブジェクト）のサイズを88 x 31に変更する。

�@　オブジェクト上で右クリックして、メニューから［編集(O)...］を選択する。
�A　編集のダイアログで幅(W)を88に、高さ(H)を31に変更する。縦横比保持のチェックは、はずしておくこと。
�B　ダイアログは閉じるのボタンで閉じる。

　操作４　文字「Web技術実習」を配置する。メニューバーから次のように選択する。

［オブジェクト(O)］　→　［ロゴの作成(L)...］

　ロゴ作成のウィザードが開くので、文字「Web技術実習」を入力して、必要な設定をする。

・［文字(T):］の入力欄に「Web技術実習」と入力する。
・［フォント名(F):］と［サイズ(S):］を適当に変更する。
・そのほか、スタイルなどを設定する。

・文字の色を設定する。

・縁取りの［種類(T):］から「なし」以外を選択すると、その下にオプションが表示される。

・文字効果の［種類(T):］から「なし」以外を選択すると、その下にオプションが表示される。

　オブジェクトの設定はいつでも変更できる。
　画像や文字をクリックすると枠線が表示されて選択状態になる。このとき、右クリックのメニューで編集を選択すると設定のダイアログが開く。

　画像や文字の一つ一つがオブジェクトである。
　今回、背景のサイズを88 x 31に設定したので、そのほかのオブジェクトが背景オブジェクトの枠線をはみ出さないように注意すること。

　操作５　自分の名前（文字）を配置する。（今回は実習ということで）
　名前は、ローマ字、漢字どちらでもよい。

　操作６　バナーをWebページに配置する。（HPBのカーソル位置に配置される。）

�@　すべてのオブジェクトをドラッグして選択する。（バナーの右下から左上に向かってドラッグするとよい。）
�A　メニューバーから次のように選択する。

［ファイル(F)］　→　［オブジェクトを送る(T)］　→　［ホームページビルダーへ(H)］

　操作７　バナー（画像）にリンクを設定する。リンク先はこのWebページ(index.htm)とする。

　操作８　Webページ(index.htm)を上書き保存する。バナーのファイル名は「banner1.gif」とする。

※　Webページを保存するときに素材保存のダイアログが表示され、素材のファイル名を入力（変更）することができる。拡張子は変更しないこと。
※　Webページを保存すると、ウェブアートデザイナーで作成したデータ(*.mif)が「__HPB_Recycled」フォルダに保存される。今回は、figフォルダの中に作成される。（ウェブアートデザイナー終了時に保存しなくてもよい。）

22-2 アニメーション（動画）

　マルチメディア(9-5動画)で学習したように、静止画を連続して表示することで動いているように見せる手法である。
　アニメーションの一つの手法として、アニメーションGIF(animation GIF)がある。静止画のGIF形式の拡張仕様で、一つのファイルの中に複数のGIF画像を保存して、それらを順に表示していくことで動画を表現している。ただし、音声は扱えない。また、複雑な動画、大規模な動画にも向かない。GIF形式は表示できてもアニメーションGIFは表示できないWebブラウザもあるので注意が必要である。

ウェブアニメータ

実習２１　Web技術実習用バナー(banner1.gif)をHPB付属のウェブアニメータでアニメーションにする。
　HPBは「Web」のサイトを開いておくこと。
　Webページは「index.htm」を開いておくこと。

　操作１　HPBのメニューバーから次のように選択して、「ウェブアニメータ」を起動する。

［ツール(T)］　→　［ウェブアニメータの起動(R)］

　操作２　スタートアップのダイアログから［アニメーションウィザード(W)］をクリックする。

　アニメーションウィザードはメニューバーから次のように選択しても表示される。

［ファイル(F)］　→　［アニメーションウィザード(W)...］

　操作３　アニメーションウィザードのダイアログから［一枚の画像ファイルから、…］のボタンを選択して、［次へ(N)］ボタンをクリックする。

　操作４　［参照(B)...］ボタンをクリックして、Web技術実習用バナー(banner1.gif)のファイルを選択する。

　操作５　アニメーションの効果を設定して、［OK］ボタンをクリックする。
　効果はリストから選択する。時間(T)は2秒以内、作成するフレーム(N)は20枚以内で設定すること。

　操作６　ウィザードの［完了］ボタンをクリックする。
　フレームごとの画像が表示される。フレーム上で右クリックして、メニューから［フレームのプロパティ(A)］を選択するとフレームごとに時間などが設定できる。

　操作７　バナーをWebページに配置する。メニューバーから次のように選択する。

［ファイル(F)］　→　［送る(D)］　→　［ホームページビルダーへ(B)］

　操作８　Webページ(index.htm)を上書き保存する。バナーのファイル名は「banner2.gif」とする。

※　ファイル「banner2.gif」をウェブアニメータで開くと、フレームごとの画像が表示される。（ウェブアニメータ終了時に保存しなくてもよい。）

戻る〔２１．色彩（色のイメージと配色）〕　次へ〔２３．レイアウト〕　目次
Web技術実習	Copyright © 2006,2007 Hiroshi Masuda