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

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