J5A1

☆APPENDIX
1☆
ボタンの作成(ウエブアートデザイナーVer.8)
例題A1-1 ボタンの作成
「ウエブアート素材/ボタン」のテンプレート素材「btn404a」のテキスト文字,画像の色を次のように変えて,次のようなボタンを作
成せよ。また,作成した画像をホームページビルダーの文書に貼り付けよ。
⇒
(解答)
【ボタンの作成】
1.
「ウエブアートデザイナー」起動 → 表示 → テンプレートギャラリー
2.
ウエブアート素材 → ボタン → 「btn404a」を選択 → キャンバスの適当な位置にドラッグアンドドロップ
3.
オブジェクトスタック → 文字部分「index」を選択してダブルクリック
※「オブジェクトスタック」が表示されていない場合は,「表示→オブジェクトスタック」
4.
ロゴの編集 → 文字 → テキスト文字を入力,フォント名を選択 → 色,縁取り,効果を設定 → マウスで適当な
位置に移動
5.
ボタンのオブジェクトの一つを選択 → マウスで適当な大きさに拡大
6.
ボタンの編集 → 色 → 「単色」の場合は一覧から適当な色を選択 → 「グラデーション」の場合は一覧から
適当なグラデーションを選択
※「グラデーション」は「その他」で詳細に設定することができる。
【ボタンの貼り付け】
1.
作成したボタンの全ての部品を選択 → マウス右ボタンクリック → オブジェクトを送る → ホームページビルダーへ
※ホームページビルダーでファイルを保存するときに取り入れた画像のファイル名と保存場所を聞いてくる(
「素材ファイルをコピ
ーして保存」)。このとき,
「ファイル名」には適当な名前をつけ,「保存場所にファイルをコピーする」にチェックを入れる。
例題A1-2 ロゴの作成
次のようなロゴを作成せよ。作成した画像を背景色を透過にして,適当な名前の GIF ファイルに保存せよ。
(解答)
【ロゴの作成】
1.
オブジェクト → ロゴの作成
2.
ロゴ作成ウイザード(文字の指定-1/4) → 「文字」を入力,「フォント名」「サイズ」「スタイル」を指定 → 次へ
3.
ロゴ作成ウイザード(色の選択-2/4) → 「単色」
「グラデーション」
「テクスチャ」から 1 つを選び「一覧」から選択 → 次
へ
4.
ロゴ作成ウイザード(縁取りの選択-3/4) → 「種類」から選択 → 次へ
5.
ロゴ作成ウイザード(文字効果の選択-4/4) → 「種類」から選択,「オプション」から「影のぼかしの強さ」「影の色」
「影の位置」を指定 → 完了
※後で再度設定しなおすときはオブジェクトをダブルクリックすればよい。
【オブジェクトの保存】
1.
ファイル → Web 用保存ウイザード
※マウス右クリックでもよい。
2.
Web 用保存ウィザード(保存対象の選択-1/4) → 保存の対象を選んでください「選択されたオブジェクトを保存する」
→ 次へ
3.
Web 用保存ウィザード(保存形式の選択-2/4) → 保存の形式を選んでください「GIF」 → 次へ
4.
Web 用保存ウィザード(GIF 属性の選定-3/4) → パレット「最適化パレットを使用」256 色 → プロパティ「透明化」 →
背景色「背景の色」 → 次へ
5.
Web 用保存ウィザード(保存方法の選択-4/4) → 保存方法を選んでください「ファイルに保存」 → 完了
6.
名前を付けて保存 → 適当な名前を付けて保存
J5A1-1
例題A1-3 ボタンのロールオーバー効果
「ウエブアート素材/ロールオーバー」のテンプレート素材「17C」のテキスト文字を次のように変えよ。そして,上の画像を通常時の画
像,下の画像をマウスポインタが通過したときの画像とせよ。作成した画像をホームページビルダーの文書に貼り付けよ。
⇒
(解答)
1.
2.
3.
4.
5.
ウエブアート素材 → ロールオーバー → 「17C」を選択 → キャンバスの適当な位置にドラッグアンドドロップ
オブジェクトスタック → 文字部分「index」を選択してダブルクリック
ロゴの編集 → 文字 → テキスト文字を入力
※2 つの画像のテキスト文字を変える。
上の画像を全てのオブジェクトを含めて選択 → ロールオーバー作成 → 通常時の画像に登録 → 同様に下の画
像を全てのオブジェクトを含めて選択 → ロールオーバー作成 → マウスポインタが上にきたときのの画像に登録 → ロ
ールオーバー保存
ロールオーバー作成ウイザード(位置の設定 1/3) → 次へ → ロールオーバー作成ウイザード(保存形式の選択 2/3) →
保存形式「gif」 → 次へ → ロールオーバー作成ウイザード(保存方法の選択 3/3) → ホームページビルダーに貼り
付け → 完了
※ホームページビルダーでファイルを保存するときに取り入れた画像のファイル名と保存場所を聞いてくる(
「素材ファイルをコピ
ーして保存」)。このとき,「ファイル名」には適当な名前をつけ,「保存場所にファイルをコピーする」にチェックを入れる。
J5A1-2