コンピュータを活用した学習指導法講座

－特にホームページを作成講座－

（社）静岡県出版文化会　花井延三
静岡市立城内小学校
キーワード　小学校，中学校，インターネット，ホームページ作成ツール，ホームページ作成

講座の企画目的
　コンピュータ(特にインターネット・マルチメディア)を活用した学習指導法を研修するとともに，「総合的な学習の時間」での「情報教育」についても研修することにより情報化に対応した指導法の向上を図る。
　具体的には下記のようなカリキュラムを設定し，一回に２時間30分をかけ10回の講義で目的を達成できるようにした。

カリキュラム

１．「総合的な学習」の時間と情報教育	・「総合的な学習」の時間のあり方・情報教育のあり方
１．コンピュータとマルチメディア	・コンピュータ活用・マルチメディア活用
２．ソフトウェアと教材作成	・ソフトウェア活用のあり方・統合ソフトウェアの活用と教材作成
３．インターネットの活用	・インターネット活用の基本・電子メールの活用
４．ホームページの作成	・ホームページ作成の基礎・ホームページ作成支援ツールの利用

実施内容
　実施内容の全体を記述すると項目数が多くなるため，ここでは特に「ホームページの作成」にかかわる内容のみを記述する。

１　ホームページの作成についての講義
(1) ねらい
　「総合的な学習時間」での情報教育においては，インターネットによる情報の収集・発信は重要な手段であることは言をまたない。
　ところでネットサーフィンや電子メールのやりとりによる情報の収集方法については，これらの操作方法を習得すれば学習に導入することはそれほど問題なくできるものである。しかし，ホームページを作成して積極的に情報を発信し，他と交流を図るとなると多くの課題があるのが実態である。
　たしかに，最近の教育現場ではこれらに取り組み成果を上げている教師も見受けられるが大半の教師にとっては，ホームページ作成に関わる技術的なことはもとより，目的に沿ったホームページを構想し的確に学習に位置づけていくまでには，まだまだ解決しなければならない課題を抱えているのが現状であろう。
　そこで，本講座ではホームページ作成にかかわる技術的なことを習得できるようにすることはもとより，子どもたちの問題解決に必要な情報の収集や発信に役立つホームページの構成のあり方も習得できるような講義内容を実践することにしたのである。
(2) 講義内容

講義項目

講義目標

ホームページ作りの基礎
１　ホームページの画面と構成しているもの

２　HTMLについて

３　HTMLファイルの書式について

簡単なホームページの作成と表示（演習）
１　ホームページの作成から保存までを演習

２　ブラウザ上へのファイルの呼び出しから表示までの操作を演習

ホームページを作成し公開するまでの概要について説明する。
１　ホームページの全体構成をする
２　各HTMLファイルを作成する

３　WWWブラウザにより作成したHTMLファイルの表示と内容を確認する
４　FTPによりプロバイダのサーバへ転送する

ホームページの全体構想をする
１　目的に沿ったページ（ファイル）を構成する
（例）「○○学校のホームページ」

ホームページ作成アプリケーションによる作成を体験する
１　Super Tag 32とは

２　インストールの仕方を演習

３　スーパータグプロの画面を説明する

演習「○○学校のホームページ」の作成
１　ホームページの全体構成の立案と作成をする

２　作成のための準備作業をする

３　各ページのファイルを作成する
(1) トップページ

(2) schoolページファイルの作成
基本はTopページファイルの作成と同じ

(3) townページファイルの作成
基本はTopページファイル作成と同じ

より効果的なフレームの作成
１　フレームとは

２　２分割するフレームの構成

ホームページを作成にかかわる基礎的なことを説明し全体をイメージ化させる。
・ブラウザ上でのホームページの画面
・タグで記述してあるHTMLファイルを交互に提示して，実際のホームページがHTMLで構成されていることを押さえる。
・HTMLがWWWブラウザで表示するファイルを作るためのテキスト編集用言語である。
・タグと言われる<>で囲まれた用語でテキストの文章構造指定するものであることおさえる。
・HTMLファイルの定型的な書式を示して
・見出し部
・本体部
<BODY>本体</BODY>で構成されていることをおさえる。
・簡単な自己紹介ページを演習し，作成の概要を体験させる。
・「メモ帳」を開く
・タグとテキスト文でHTMLのファイルを作成する。
・「メモ帳」の「ファイル」を選択する。
・「名前を付けて保存(A)」を選択する。
・名前を付けて保存する
　・保存する場所　：3.5インチFD(A:)
　・ファイル名　　：自己紹介.HTML
　・ファイルの種類：すべてのファイル(*.*)
・ブラウザ上の「ファイル」を選定する。
・「開く」を選定する。
・画面を表示する。

・ホームページを作成し，公開するまでの概要を説明し，イメージ化を図る。

・ページ構成とリンク構成をおさえる。

・タグを直接記述して作成する場合とホームページ作成アプリケーション（スーパータグプロなど）を利用して作成する場合とをおさえる。

・WWWブラウザ上で表示された内容との関係をおさえる。

・転送（アップロード）をしなければ公開できないことをおさえる

・トップページで表記するもの
　・タイトル，トップ画面，メニュー，メールアドレスなど
・学校紹介ページ（school.HTML）で表記するもの
　・タイトル，開校日，所在地，学級と人数，学校自慢（映像を含む）など
・地域紹介ページ（town.HTML）で表記するもの
　・地域自慢（映像を含む）など

・作成支援ツールにより簡単に作成できることを体験させる。

・HTMLによるホームページを作成するためのフリーの支援ツールであることを説明する。
・ソフトをインストールする方法を説明し入力させる。

・スーパータグプロの画面を表示し画面構成をおさえる。

・スーパータグプロを立ち上げる。
・文章（テキスト）をBODYと/BODYnoの間に入力する。
・タグによる編集をする方法。
(1) タグで修飾する対象となるテキスト文をドラッグする
(2) 「タグ(T)」をクリックしタグ入力一覧（ダイアログボックス）を開く
(3) 目的のタグを選定する
(4) 複数の修飾をする場合は，テキスト文に近い順に１つずつ順に選定することをおさえる
(5) 修飾状況を確認する
(6) Web上で画面が正しく表示されたか確認する

・まずページ全体構成をイメージし各ファイルの設定とリンク関係を図に表示する。

(1) 各ページ毎のファイルの設定と保存をする。
(2) 画像（イメージ）の取り込みと保存をする。
(3) 「Jtrim」（画像処理ソフト）により画像の編集をする。
　大きさ，明るさ，色相などを編集する。

(1) top.HTMLファイルを呼び出す。
(2) 文章（テキスト）を入力する。
　見出し，メニュー，メールアドレスなど
(3) タグによる編集をする
　(a) 背景とテキスト
　(b) 見出し
　(c) 罫線
　(d) 文字のスタイルとフォント
　(e) イメージを貼る
　(f) イメージにテキストを回り込ませる
　(g) リンクを作る
　(h) 電子メールのアドレスを入力
　(i) その他のタグを利用する
(4) ファイルの保存を上書き保存する
(5) WWWブラウザにより表示画面内容を確認する

(1) school.thmlファイルを呼び出す。
(2) 文章（テキスト）を入力する。
(3) HTMLファイルの編集をする。
　・新規にテーブル（表）を作成する。
(4) 以下は省略

(1) town.HTMLを呼び出す。
(2) 以下は省略

・画面を分割表示できる
　フレームについて説明する

・２分割の構成図を提示し，画面の構成と各ファイルの関連をおさえる。
・左フレーム→メニュー画面
・右フレーム→Top画面
・分割用フレームは画面に出ない

２　成果と課題
(1) 成果
(a) インターネットについて授業への活用ができるようになった。また，ホームページの作成もできるようになった。(受講生:下田小学校　鈴木眞教諭作成のホームページ)
(b) 統合ソフトが活用でき，教材作成もできるようになった。
(c) 「総合的な学習の時間」での「情報教育」の位置づけ，目標，内容など基本的なことが理解できた。
(d) 「総合的な学習の時間」での「情報教育」の授業を構築できるようになった。
(2) 課題
　限られた時間(土曜日の14:00～16:00)と10回の講座では，理論と演習を行うには時間不足であり，充分に深めることは容易ではない。しかし，時間延長を図るには現状では難しい状況である。

ワンポイントアドバイス
　昨今ではホームページ作成にかかわる作成支援アプリケーション（支援ツール）が各種のものが出回っていて，ホームページの基本となっているHTMLのことをあまり知らなくても，容易に作成できるようになってきている。
　しかし，作成したホームページを絶えず新しい内容で維持していくことや，内容の向上を図っていくためには，多少難しいようであるがHTMLの基本的な原理や構造を知っていることが有利である。
　そこで，当講座HTMLの主要なタグや構成の仕組みなどを知った上でいちいちタグを直接記述する代わりに記述してくれる支援ツール(SuperTag32Pro)を利用することにした。
　なお，この支援ツールはフリーソフトであるため入手も容易である。　

参考文献
・やさしいホームページの作り方（ナツメ社）川西朝雄・川西雄一著
・実践インターネット講座（NHK）監修永野和男

利用したURL
　文部省(http://WWW.monbu.go.jp/)
　大津市立平野小学校(http://WWW.hirano-es.otsu.shiga.jp/)
　東京都江東区立大島第四小学校(http://WWW4.justnet.ne.jp/~ogano/4-OHJIMA.HTM)