Web技術実習 | |
戻る〔21.色彩(色のイメージと配色)〕 次へ〔23.レイアウト〕 目次 |
22-1 バナー
バナー(banner)とは、Webページに配置されている四角形の見出し画像である。バナーをクリックするとそのWebページが開くようなボタン的な使い方がされている。企業などのバナー広告(banner
advertisement)が中心である。
バナーサイズには、IAB(Internet Architecture Board)による国際標準のサイズがあるので、それにあわせて作成する方がよい。
(日本のCG系では200x40のバナーが多いようであるが、日本のローカルサイズである。)
◆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
バナーのサイズ・サンプル
ウェブアートデザイナー
実習20 Web技術実習用のバナー(88 x 31)をHPB付属のウェブアートデザイナーで作成する。
HPBは「Web」のサイトを開いておくこと。
Webページは「index.htm」を開いておくこと。
操作1 HPBのメニューバーから次のように選択して、「ウェブアートデザイナー」を起動する。
[ツール(T)] → [ウェブアートデザイナーの起動(D)]
操作2 バナーの背景になる素材をキャンバスに配置する。
@ ウィンドウ左側のビューの[素材]タブをクリックする。
A 素材ビューのツリーリストから[バナー]を選択する。
B 下部のリストから適当な素材を選んでダブルクリックする
操作3 素材(オブジェクト)のサイズを88 x 31に変更する。
@ オブジェクト上で右クリックして、メニューから[編集(O)...]を選択する。
A 編集のダイアログで幅(W)を88に、高さ(H)を31に変更する。縦横比保持のチェックは、はずしておくこと。
B ダイアログは閉じるのボタンで閉じる。
操作4 文字「Web技術実習」を配置する。メニューバーから次のように選択する。
[オブジェクト(O)] → [ロゴの作成(L)...]
ロゴ作成のウィザードが開くので、文字「Web技術実習」を入力して、必要な設定をする。
・[文字(T):]の入力欄に「Web技術実習」と入力する。
・[フォント名(F):]と[サイズ(S):]を適当に変更する。
・そのほか、スタイルなどを設定する。
・文字の色を設定する。
・縁取りの[種類(T):]から「なし」以外を選択すると、その下にオプションが表示される。
・文字効果の[種類(T):]から「なし」以外を選択すると、その下にオプションが表示される。
オブジェクトの設定はいつでも変更できる。
画像や文字をクリックすると枠線が表示されて選択状態になる。このとき、右クリックのメニューで編集を選択すると設定のダイアログが開く。
画像や文字の一つ一つがオブジェクトである。
今回、背景のサイズを88 x 31に設定したので、そのほかのオブジェクトが背景オブジェクトの枠線をはみ出さないように注意すること。
操作5 自分の名前(文字)を配置する。(今回は実習ということで)
名前は、ローマ字、漢字どちらでもよい。
操作6 バナーをWebページに配置する。(HPBのカーソル位置に配置される。)
@ すべてのオブジェクトをドラッグして選択する。(バナーの右下から左上に向かってドラッグするとよい。)
A メニューバーから次のように選択する。
[ファイル(F)] → [オブジェクトを送る(T)] → [ホームページビルダーへ(H)]
操作7 バナー(画像)にリンクを設定する。リンク先はこのWebページ(index.htm)とする。
操作8 Webページ(index.htm)を上書き保存する。バナーのファイル名は「banner1.gif」とする。
※ Webページを保存するときに素材保存のダイアログが表示され、素材のファイル名を入力(変更)することができる。拡張子は変更しないこと。
※ Webページを保存すると、ウェブアートデザイナーで作成したデータ(*.mif)が「__HPB_Recycled」フォルダに保存される。今回は、figフォルダの中に作成される。(ウェブアートデザイナー終了時に保存しなくてもよい。)
22-2 アニメーション(動画)
マルチメディア(9-5動画)で学習したように、静止画を連続して表示することで動いているように見せる手法である。
アニメーションの一つの手法として、アニメーションGIF(animation GIF)がある。静止画のGIF形式の拡張仕様で、一つのファイルの中に複数のGIF画像を保存して、それらを順に表示していくことで動画を表現している。ただし、音声は扱えない。また、複雑な動画、大規模な動画にも向かない。GIF形式は表示できてもアニメーションGIFは表示できないWebブラウザもあるので注意が必要である。
ウェブアニメータ
実習21 Web技術実習用バナー(banner1.gif)をHPB付属のウェブアニメータでアニメーションにする。
HPBは「Web」のサイトを開いておくこと。
Webページは「index.htm」を開いておくこと。
操作1 HPBのメニューバーから次のように選択して、「ウェブアニメータ」を起動する。
[ツール(T)] → [ウェブアニメータの起動(R)]
操作2 スタートアップのダイアログから[アニメーションウィザード(W)]をクリックする。
アニメーションウィザードはメニューバーから次のように選択しても表示される。
[ファイル(F)] → [アニメーションウィザード(W)...]
操作3 アニメーションウィザードのダイアログから[一枚の画像ファイルから、…]のボタンを選択して、[次へ(N)]ボタンをクリックする。
操作4 [参照(B)...]ボタンをクリックして、Web技術実習用バナー(banner1.gif)のファイルを選択する。
操作5 アニメーションの効果を設定して、[OK]ボタンをクリックする。
効果はリストから選択する。時間(T)は2秒以内、作成するフレーム(N)は20枚以内で設定すること。
操作6 ウィザードの[完了]ボタンをクリックする。
フレームごとの画像が表示される。フレーム上で右クリックして、メニューから[フレームのプロパティ(A)]を選択するとフレームごとに時間などが設定できる。
操作7 バナーをWebページに配置する。メニューバーから次のように選択する。
[ファイル(F)] → [送る(D)] → [ホームページビルダーへ(B)]
操作8 Webページ(index.htm)を上書き保存する。バナーのファイル名は「banner2.gif」とする。
※ ファイル「banner2.gif」をウェブアニメータで開くと、フレームごとの画像が表示される。(ウェブアニメータ終了時に保存しなくてもよい。)
戻る〔21.色彩(色のイメージと配色)〕 次へ〔23.レイアウト〕 目次 | ||
Web技術実習 | Copyright © 2006,2007 Hiroshi Masuda |