フリー素材をダウンロードしましょう（著作権について）
インターネット上のフリー素材をダウンロードしてみましょう。 IE を開きます。
Google の検索ページ（http://google.ne.jp）から検索欄に「学校の素材集」を入力します。 出てきたリストから、今回は「School Icons CLUB」をクリックして開きます。
画面をスクロールさせて、「ホームページ素材」でク リックします。 最初に「利用規定」についての説明があるので、必 ずよく読んでください。 見たい画像のジャンルを選択し、画像を探し ます。 気に入った画像が見つかったら、画像の上で 右クリックし、でてきたメニューから「名前 をつけて画像を保存」をクリックします。 保存の画面が出るので、保存場所を「素材」 フォルダにして適当な名前をつけて保存しま す。 ここでは、学生生活のページ用に「壁紙」の「方眼紙」の緑色のものをダウンロードしておいて下さい。 他の素材サイトからも探してみましょう。
・「School Icons CLUB」 http://www.schoolicons.com/ ・「D-Project フリーイラスト集」
※ 著作権について
著作権については公的機関のHP ということで、責任のある対応をお願いしています。最近は著作権フリーの 場合、文化庁が指定した「自由利用マーク」をつけているサイトもありますので、参考にして下さい。
「学生生活」のページを作成しましょう。（フリー素材の利用、ロゴの作成）
「ホームページビルダー」を起動します。 ※ 編集スタイルは「スタンダード」 ※ 「ファイル」−「標準モードで新規作成」にします。 最初に「ページの属性」でページタイトルを「学生生活」と入力し、カラーギャラリーで基本色（黄色の上左 から2 番目）に設定します。 一行目に「学生生活」と入力し位置を中央にし、「見出し1」のサイズにします。 下記のように水平線を挿入し、2×2 の表を作成します。表の位置は中央揃え、枠表示は無しにします。 左上のセルと右下のセルに色を設定します。今回は をクリックしてカラーパレットを表示させます。 色を付けたいセルをクリックし て、パレットから色をクリック します。 「適用」をクリックするとセル の色が設定できます。 ここでは左上のセルに#ff6666 右下のセルに#0000cc の色を設 定しました。次に、「行事」のロゴを作成します。 左上のセルでクリック、ロゴの挿入 をクリックします。 ロゴの作成の画面で文字を「行事」と入力しま す。下のプレビューで確認しながら文字のデザ インを決定します。 ここでは010 番のデザインを使っています。 決まったら「完了」をクリックします。 同様に左下のセルの中にも「クラブ」という文 字のゴロを挿入します。 ここでは012 番のデザインを使っています。 ※ 一度決定したロゴを編集したい場合は、右 クリックで「ロゴの編集」をクリックします。 空いているセルに画像を挿入してみましょう。 左の素材ビューから「画像」−「イラスト」をクリックします。 画像の一覧が出るので、気に入った画像をセルの中にドラッグします。 ここで、自分でダウンロードした画像を使いたい場合は「フォルダタブ」をクリックして下の ツリーから目的のフォルダ（素材フォルダ）を表示させます。 画像を挿入したら、好みの位置、サイズに設定します。 画像を縮小した場合は右ク リックの「画像の編集」で「表 示サイズで保存」にチェック をいれておきましょう。 ※素材ビューで確認したい 画像の上で右クリック「原寸 大で表示」で実際のサイズで 見ることができます。（この 画面を開いたまま他の画像
下に画像の線を入れます。素材ビューから「画像」−「区切り線」をクリックします。 「u004line.gif」の画像を表の下にドラッグし、「中央揃え」 に設定します。 さらに下に下記のようにメニューを入力します。 ここでは、背景に画像を使ってみましょう。 画面の下のほうでクリックして、右側に「ページの属性」を表示させます。 背景画像の「参照」をクリックし、でてきた画面 から「素材」の「方眼紙」を選択し「開く」をク リックします。 下記のように表示されました。
「ファイル」−「名前をつけて保存」しましょう。 保存場所は「gakusei」フォルダ、ファイル名は「gakusei.htm」とします。 「素材ファイルをコピーして保存」の画面が出るので、画像ファイルを確認しながら、一つずつ名前を変更し ておきます。（ファイル名は半角のアルファベット数字を使用します。） ここで、「ファイル管理」資料に画像 ファイル の情報を記録しておきまし ょう。 できたものを確認してみましょう
「行事」のページを作成しましょう。
（ウェブアートデザイナーでの画像の加工、リンクの応用）
撮影した写真を利用して年間行事のページを作成しましょう。 必要な素材はすべて「素材」フォルダにコピーしておきましょう。 「ホームページビルダー」を起動します。 ※ 編集スタイルは「スタンダード」 ※ 「ファイル」−「標準モードで新規作成」にします。 最初に「ページの属性」でページタイトルを「行事」と入力し、カラーギャラリーから基本色を設定します。 背景画像を「学生生活」のページと同じ壁紙に設定にします。 また、ページタイトルを「行事」と入力します。 一行目に「行事」と入力し位置を中央にし、「見出し1」のサイズにします。 表を作成します。（最初は1×4 の表を作成して、後から追加・削除して調整しましょう） 一番上のセルに「入学式」と入力し、2 行目のセル上でクリックしておきます。 写真を編集しましょう。 「ツール」−「ウェブアートデザイナーの起 動」をクリックします。「ウェブアートデザイ ナー」が起動します。ここではデジカメの写真を加工します。 左の素材ビューから「フォルダ」をクリック、自分の「素材」フォルダの内容を表示させます。 使いたい写真をドラッグして右のキャンバスに持ってきます。 そのままではサイズが大きすぎるので、オブジェクトの編集 でサイズを横300 ピクセルに設定します。 （ドラッグしてハンドルにマウスカーソルを合わせて、 サイズの調節をすることもできます。） 下記のようになります。 サイズの調整は範囲選択のハンドル（黒いポチ）にマウ スカーソルを合わせてドラッグします。 左のメニューから四角形で切り抜き をク リックします。 範囲を変更したい場合はハンドルにカーソル を合わせてドラッグします。 輪郭 の右下の三角にマウスを合わせ て、出たバーをスライドさせて輪郭をぼかす 設定にします。（ばかしの強さは10 に設定） 「切り抜き」をクリックします。 元の画像とは別にぼかしがかかった画像がで きます。重なっている場合はドラッグして移 動させましょう。
ここで、左の「オブジェクトスタック」に二つの画像が並 んで表示されていることを確認しておきましょう。 作成した画像はハンドルでドラッグするか、「オブジェク トの編集」を使って、もうひとまわり小さいサイズにして おきましょう。（横200 ピクセル程度） さらに、ここにイラストを追加します。 左の素材の「イラスト」から、または「素材」フ ォルダから適当な画像を選択し、キャンパスにド ラッグします。 右記のように重ねたら、2 つ目からは「Ctrl」キー を押しながら 2 つの画像を選択します。左の「オ ブジェクトスタック」の２つの画像に青枠が付い ているのを確認します。 画像の順序は「オブジェクトスタック」の上の画像が前面になります。（ドラッグして入れ替えができます） 「ファイル」−「Web 用 保存ウィザード」をクリ ックします。 保存形式はJPEG を選択 します。 ファイルサイズが小さく なっているのを確認し、 保存方法は「ホームペー ジビルダーに貼り付け」 を選択して「完了」をク リックします。
ホームページビルダーであらかじめ指定しておいたセル内に画像が貼り付けられています。 画像の右にコメントを入力しセル の色を設定します。 （ここでは写真のセルは白、タイ トルはピンク#ff99ff を設定、さら にタイトルの文字色を白に設定し ました） 「ウェブアートデザイナー」にもどって、 「ファイル」―「名前をつけてキャンバ スを保存」をクリックします。 保存場所を「素材」フォルダ、ファイル 名を「入学式画像」として保存します。 （拡張子mif は自動で付きます） 保存したら「ウェブアートデザイナー」 は閉じておきます。 同様に「運動会」「修学旅行」「卒業式」を作成します。 ※ タイトルセルの色 「入学式」#ff99ff 「運動会」#ff0033 「修学旅行」#339933 「卒業式」#cc00cc ※ 写真のセルの色 白 ※ 写真の画像の「位置揃え」を「左寄せ」に設定 ※ それぞれの画像に「代替テキスト」を設定する。 「桜の写真」「リレーの写真」「東照宮陽明門の写真」「卒業式の写真」
外部サイトへのリンクを作成しましょう。 修学旅行の説明の欄に「日光の観光案内」という文字を入力し。ドラッグして、リンクをクリックします。 リンクの設定画面で「URL へ」のタグをクリック します。 URL の欄に http://www.nikko-jp.org/index.shtml と、入力し ます。 ターゲットを「新しいウィンドウ」にします。 （これで、別ウィンドウが開いてサイトを表示しま す） 「OK」をクリックします。 さらに、画面の一番下に「学 生生活のページへもどる」と いう文字を入力し、「中央揃 え」、「gakusei.htm」へリン クの設定をする。（同一ウィ ンドウに設定） プレビューにしてリンクの 確認をしましょう。 保存して終了します。
ページが長くなってしまう場合は上に見出しを作成しページ内の目的の場所にリンクの設定をします。 リンク先に目印となるラベルを付けます。 表題の「入学式」の文字をドラッグして 選択します。 リンク の挿入 をクリック し ま す。 「ラベルを付ける」タグをクリックしラ ベルの欄に「nyuugaku」と入力して「OK」 をクリックします。 同様に「運動会」「修学旅行」「卒業式」 の表題にもラベルの設定をしておきま す。 次に下記のように、見出しを作成し、「入学式」の文字をドラッグし、 リンクの挿入 をクリックします。 ラベルをメニューから選択し、「ＯＫ」 をクリックします。（「nyuugaku」を選 択します） 同様に「運動会」「修学旅行」「卒業式」 の文字にもラベルへのリンクの設定を しておきます。 保存してプレビューでリンクの確認を しておきましょう。
ページ内にリンクの設定をした場合は、上の見出しにもどるリンクも作成します。 ここでは、タイトルの「行事」にラベルを設定し、そこにもどるリンクを各項目から設定しましょう。 最初に「行事」をドラッグして、ラベルの設定をしておきます。 「入学式」の文字が入っているセル内でクリックし、セルの横分割 をクリックします。 右のセルの背景色を白に、セルの幅 40 ピクセルに設定しておきます。さらに「上へ」と入力します。そこから、 「行事」のラベルへリンクの設定をします。 「運動会」「修学旅行」「卒業式」のセルも同様に分割して、「行事」へのリンクを設定します。 下記を参照しながら作成してください。 できたら保存して、プレビューまたはIE で確認しておきましょう。
次に「学生生活」のページを開き、そこの「行事」のロゴにリンクの設定をします。 「行事」のロゴをクリックし、リンクの設定画面を開 きます。 リンク先を「gyouji.htm」にし、ターゲットを「同一 ウィンドウ」に設定「OK」をクリックします。 できたら、プレビューさらにIE でリンクの確認をしま しょう。 保存して終了します。
「校歌」のページを作成しましょう。（背景画像の作成、音声の設定、HTML 編集）
「素材」フォルダ内の写真を使って背景用の画像を作成します。 「ホームページビルダー」を起動します。 ※ 編集スタイルは「スタンダード」 ※ 「ファイル」−「標準モードで新規作成」にします。 「ページの属性」でページタイトルを「校歌」と入力し「カラーギャラリー」から基本色の設定をします。 ここで、「ツール」−「ウェブアートデザイナーの起動」をクリックします。 「素材」フォルダ内の建物の画像を右のキャンパスにドラッグして表示させます。 画像の上でクリックしてからオブジェクトの編集をクリックします。設定画面がでたら、サイズの幅を「900」 透明度を「70」％にします。設定画面は閉じておきます。このままでは、画像が大きくて作業がしにくいので、「編集」−「キャンパスの設定」で幅「1000」高さ「800」 に設定します。 次に画像の上でクリックしてから「表示」−「縮小表示」− 「1/2 倍」を選択します。 キャンパスが下記のようになります。 次に効果 をクリックし、設定画面から「セピア」を 選択し「適用」をクリックします。 「表示更新」をクリックすると、実際の画像で効果を確 認できます。
画像の上でクリックして「ファイル」−「Web 用保存ウィザード」を開きます。 保存形式をJPEG に設定し「次へ」をクリック。 背景色を白に設定します。 最後の画面で保存方法を「ファイルに保存」を選択 して「完了」をクリックします。 名前を付けて保存の画面がでるので、保存場所を「kouka」、ファイル名を「back.jpg」とつけて保存します。
ホームページビルダーにもどって、右の属性ウィンドウから背景画像を「back.jpg」に設定します。 さらに下記のようにタイトル、校歌の歌詞を入力します。 校歌の文字色を変えたい場合はドラッグして、文字を選択して からカラーパレットを出して変更します。 次にBGM の設定をします。 校歌の下でクリックしてから「挿入」−「BGM」−「素材集から」をクリックします。 （※音源ファイルが用意されている場合は「ファイルから」をクリックし、音源ファイルを選択します。） 左 の 画 面 が 出 る の で 、 「history.mid」を選択して「開く」 をクリックします。 BGM 挿入のアイコン が表示 されます。 これは実際のページには表示さ れません。プレビューで確認しま
このままでは、ページが表示している間中、音楽が何回も流れてしまいます。 そこでＨＴＭＬソースを編集して、見ている人が音の操作ができるようにします。 「ＨＴＭＬソース」のタブをクリックして、タグを表示させます。
下線のところを編集します。
autostart=”false” hidden=”false” loop=”0”と変更させます。 できたらプレビューで確認してみましょう。 操作パネルが表示されました。音を出してみましょう 編集モードにもどして音源のアイコンを「右揃え」にしましょう できたら、一番下に下記のよう にメニューを作成しておきま す。 保存して終了します。
