ホームページをつくろう！

津市教育研究会情報教育部会レポート
ホームページをつくろう！
１．
【ホームページ・ビルダー2000】の起動
（１） [スタート]−[プログラム]−[ＩＢＭホームページ・ビルダー]−[ホーム
ページ・ビルダ−]を選択する。
（左クリック）
２ツールバー・アイコンの説明
３．文字の入力と編集
不要な文章や画像は、Ｄelite キーやＢackspace キーで消す。インターネットでは、
半角のカタカナは正しく表示されないことがあるので、使わないほうがよい。
（１）文字のサイズ、色、書体を変更する。
① 変更したい文字列を選択する。
② [フォント属性変更]アイコンをクリックする。または、右クリックして、[
属性変更]をクリックする。
③ [サイズ]、[色]、[書体]の項目の下向き矢印ボタンをクリックして、選択する。
④ ＯＫボタンをクリックする。
（２）文字を斜体にする。
① 変更したい文字列を選択する。
② [斜体]アイコンをクリックする。
（３）背景色を変更する。背景の色を自由に変更することができる。
① [カラーパレット]アイコンをクリックする。
② 好みの色を背景にドラッグ＆ドロップする。
４．背景イメージを変更する。背景を模様などに変更することもできる。
① 画面左側の[コンテンツ]をクリックする。
② 上のボックスの下向き矢印ボタンをクリックして[サイトフォルダ]を選択する。
③ [Ｍy Ｄocument]−[‘server’の読み書き]−[素材集]と順に＋マークをクリ
ックする。
④ [壁紙]の＋マークをクリックし、好みの背景イメージを選ぶ。
⑤ サンプルの壁紙の上で右クリックをし、ポップアップメニューを表示させ、[
壁紙テストモード]をクリックして選択する。
⑥ その他の壁紙アイコンの上をクリックして、背景イメージをプレビューしな
がら、気にいったイメージを探す。
⑦ 決まったら、その壁紙のイメージを編集中のページに右ボタンでドラッグ＆
ドロップする。
⑧ ［背景イメージとして挿入］をクリックする。
５．ロゴオブジェクトの挿入
ここでは、
『津市の歴史』の文字を挿入することを例として行う。
（１）
【ウェブアートデザイナー】を起動する。
メニューバーの中から、[ツール]−[ウェブアートデザイナー]を選択する。
（２）ロゴオブジェクトの作成
① [ロゴ]タブをクリックする。
（現在[ロゴ]タブが選択されている場合はその
まま）
② 画面左側の領域の[文字]の欄に『津市の歴史』と入力する。
③ 好みの文字効果を選択し、画面右側の編集領域のドラッグ＆ドロップする。
④ 文字の大きさを変えるには、文字の上を左クリックして、□マークを出す。
□の上にポインタを合わせて、矢印になったら左ドラッグする。
⑤ ロゴの編集をするには、
（文字、色、効果などを変える）□マークを出して
おいてから、右クリックし、[オブジェクトの編集]をクリックし、好みに
編集する。
（３）ロゴオブジェクトの保存
① メニューバーから[ファイル]−[Ｗeb 用保存ウィザード]を選択する。
② [次へ]ボタンをクリックする。
③ [ＧＩＦ]を選択し、
（チェックがついていることを確認）[次へ]ボタンをク
リックする。
④ [プロパティ]の[透明化]にチェックがついていることを確認して、[完了]ボ
タンをクリックする。
⑤ 保存する場所は、[3.5 インチＦＤ]、ファイル名に『logo』と入力（必ず半
角英数で）し、[保存]ボタンをクリックする。
（４）ロゴオブジェクトの使用
① タスクバーから【ホームページ・ビルダー】をクリックする。
② 画面左側の[コンテンツ]をクリックし、上のボックスから、保存したフォ
ルダ[3.5 インチＦＤ]をダブルクリックする。
③ 下のボックスから[logo.gif]をドラッグ＆ドロップする。
④ ドラッグ＆ドロップ下文字をクリックし、■マークが出たら、大きさを
調節する。
（５）
【ウェブアートデザイナー】の終了
① タスクバーから【ウェブアートデザイナー】をクリックする。
② メニューバーから[ファイル]−[アプリケーションの終了]をクリックする。
６．デジカメで撮った写真の挿入
①
②
③
④
⑤
画面左側（サイトマネージャー）の上のボックスの下向き矢印ボタンをクリ
ックして[サイトフォルダ]を選択する。
[Ｍy Ｄocument]−[‘server’の読み書き]−[’011 年総合学習]−[○組]と
順に＋マークをクリックする。
[(自分たちの撮影した場所名)]をクリックする。
サイトマネージャーの下のボックスから、写真を選択し、編集領域の挿入し
たい場所にドラッグ＆ドロップする。
ドラッグ＆ドロップした写真をクリックし、■マークが出たら、右下の■マ
ークの所で大きさを調節する。
７．写真や図などの横に文章を入力する。
① [表の挿入]アイコンをクリックする。
② [列数]ボックスに“２”
、[行数]ボックスに“１”と入力する。
③ [ＯＫ]ボタンをクリックする。→2 列 1 行の表が作られる。
④ 「６．デジカメで撮った写真の挿入」の方法で、左側の増すに写真をドラッ
グ＆ドロップして貼り付け、大きさを調節する。
⑤ 右側のマスに文章を入力する。
表のわくが表示されないようにするには…
①
表全体にフォーカスをあて、
（外枠がピンクになるようにする）[属性変更]ア
イコンをクリックする。または、右クリックし、[属性変更]をクリックする。
② [表]タブを選択し、[レイアウト]の[枠表示]をクリックしてオフにする。
③ [ＯＫ]ボタンをクリックする。→表のわくが点線で表示される。これは、表
のわくが表示されないことを表す。
８．作成したホームページを保存する
はじめて保存するときは
① メニューバーの[ファイル]−[名前をつけて保存]をクリックする。
② [保存する場所]ボックスで保存先の[3.5 インチＦＤ]を選択する。
③ ファイル名を半角英数で入力する。
④ [保存]ボタンをクリックする。
2 回目からは
① [保存]アイコンをクリックする。
② または、メニューバーの[ファイル]−[上書き保存]をクリックする。
ファイル名には半角の英数字を使う。全角の英数字・漢字・ひらがな・カタカ
ナは正しく扱えないことがある。
９．
【ホームページ・ビルダー２０００】の終了
① メニューバーの[ファイル]−[終了]をクリックする。
② または[×]ボタンをクリックする。
10．技術家庭科での情報教育
１年生
今後の情報化社会に対応するための第一歩として１学期に各学級週１時間でマイクロソ
フト社の「ワード」「エクセル」の基本的な使い方、インターネットの使用法について学
習した。
コンピュータがＬＡＮで結ばれているため、サーバーとの接続から始めることになる。
まずはキーボード入力が最初の課題となる。生徒の大半はコンピュータをゲーム機として
利用する場合がおおく、コンピュータには慣れているはずだが、キーボード入力は困難な
生徒が多い。
まず始めにワードパッドを使い、ローマ字入力で５０音の入力の練習を始めた。生徒の
中にはローマ字の理解できない生徒も見られた。「あいうえお」「あかさたな∼」の練習を
重ねるに従い、短時間で入力のできる生徒も増えてきた。次にワードを使用し簡単な例文
の練習を行い、簡単な文章の加工も行った。
ペイントソフトでは直線の記入、着色、文字の入力を練習した。
エクセルでは数値の入力、簡単な計算、関数の使用法の順に学習しデータ処理の基本を
学習した。その後グラフの作成・加工へと進める。
総合的な学習を進めるにあたり、インターネットを情報収集の一つの手段とするために、
技術家庭科においてもインターネットの使用法についても学習した。
２・３年生
１年生での技術家庭科・総合的な学習の時間の学習をもとに、電子メールの使用法、エ
クセルとインターネットを利用してのカレンダーつくりを行った。
電子メールでは最近の迷惑メールの問題にもふれた。また、インターネットから入手し
た情報利用については著作権の問題についてもふれ、情報発信・活用のモラルについても
学習を進めた。
課題
情報技術の発展はめざましいものがあり、教師自身の研修を進めていかないと生徒のニ
ーズにこたえ切れない部分が増えてくる。そして、情報発信では情報モラルの徹底・大切
さをどう教えていけばよいかが課題である。