ご参考資料
株式会社ＮＴＴぷらら
＜本ガイドのご利用にあたって＞ 「アカデミックサーバ」は、ご利用される学校様が、ご自身で、 コンテンツの作成、FTP によるファイル転送などを行っていただくことが前提です。 従いまして、上記に関するサポートや本説明書の記載内容に関するサポートは、 弊社では致しかねますのでご了承ください。アカデミックサーバ用
雛形ホームページ
ご利用ガイド
目次
第１章 はじめに...2 第２章 利用環境及び利用条件...3 第３章 雛形ホームページの内容...4 ３－１雛形ホームページの作成コンセプトとディレクトリ構成...4 ３－２トップページ（表紙）とそのソース...6 ３－３トップページの変更方法...9 ３－４ その他のページの変更方法... 12 ３－５背景色の選択... 16 ３－６注意事項... 16● Microsoft、Windows、Microsoft Internet Explorer は、米国Microsoft Corporation の米国およびその他の国におけ る登録商標です。
● Netscape, Netscape Navigator, Netscape の N ロゴおよび操舵輪のロゴは、米国およびその他の諸国の Netscape Communications Corporation 社の登録商標です。
● その他記載されている会社名および製品名は、各社の登録商標または商標です。
第１章 はじめに
～アカデミックサーバ用 雛形ホームページとは～
学校でインターネットを利用し始めると、インターネット上には子どもたちが活用できる様々な生の教材があることがお分かりい ただけるでしょう。また、インターネット上の情報を活用するだけでなく、自分たちでホームページを持ち、情報を発信している学校 が増えていることを実感していただけると思います。 インターネット上のホームページは、多くの人が共通で利用できるように、「サーバ」という端末に蓄積されています。全世界に多 数存在するこの「サーバ」を結ぶことで、インターネットは多量の情報を共有することができるしくみになっているのです。 この「サーバ」を１校で１台持つためには、多額の費用が必要であり、ネットワークに精通した管理者が必要であるなどの課題があ ります。「アカデミックサーバ」は、学校でホームページを持ちたいときに、低料金で学校ホームページ用のサーバの一エリアをお 貸しするサービスです。したがって、一からサーバを構築して管理するための難しい知識や、多額な初期費用は必要ありません。 「雛形ホームページ」は、ホームページを初めて開設する学校様などに、最低限の変更ですぐ学校のホームページを公開できるよ う電子データ（ホームページの内容：コンテンツと呼ぶ）を提供するものです。 「すぐにでもホームページの紹介をしたいけれども、公開するコンテンツを作っている時間がない」といった学校様、また「自分たち のオリジナルのホームページを作成したいけれども、まず手本となるようなホームページはないか？」といった学校様に、有効に ご活用いただけます。 この雛形ホームページでは、「小学校」を例として、生徒に紹介したい情報だけでなく、ＰＴＡや地域の方にも興味を持っていただ けるお知らせなどの項目も盛り込んでいます。 また、この雛型ホームページのコンテンツについては、自由に更新・変更していただいて構いせん。この雛形ホームページを元 に、学校オリジナルのホームページを作成し、発信していただければと思います。雛形ホームページのご活用方法
• ホームページ作成の初心者・初級者の方のためにご用意しています。 • ホームページのコンテンツ（要素）であるhtml ファイルや画像（gif ファイル等）とは何か、またそれら がどのように構成・配置されているかを実際に見ていただき、ホームページのしくみを理解するた めに役立てていただくことができます。 • 本コンテンツ（html、gif ファイル等）を、ご自分の学校ホームページにそのままご使用されたり、編 集・変更をしてご活用いただけます。 ※本マニュアルは、雛形ホームページのごく一部分の、基本的な変更方法を示したものです。 より個性的で柔軟なホームページをお作りいただくためには、市販されている「ホームページ作成」 に関する手引書（HTML辞典、HTMLタグ辞典 など）や、ホームページ作成用ソフトウェアをご用意い ただくことをお薦めいたします。第２章 利用環境及び利用条件
このマニュアルは、「アカデミックサーバ用雛形ホームページ」を利用してインターネットへホームページを公開するために必要な 各種設定方法や変更手順、アップロード方法などを示したものです。 （本マニュアルは、WindowsXP を例としています） 「雛型ホームページ」 フ ァ イ ル の 内 容 小学校向け 雛形ホームページコンテンツ一式 「elementary」 ・内容量 470KB～481KB ・全ファイル数 72 ファイル 接続に必要なもの パソコン （本マニュアルは、WindowsXP を例としています） テキスト（文章）用ソフト ： メモ帳、Notepad などWWW ブラウザ（ホームページ閲覧ソフト） ： Internet Explorer、Netscape Navigator など FTP（コンテンツアップロード）用ソフト） ： FTP Explorer、Fetch など 注 意 事 項 ホームページのアップロードは、インターネット接続環境のあるパソコンでご利用いただけます。 （LAN 環境からの接続される場合は、LAN のネットワーク管理者にご相談の上、ご利用ください。） お客様にご利用いただくFTPのログインID・パスワードにつきましては、ぷらら送付の別紙＜アカ デミックサーバご登録内容＞をご覧ください。 サーバ等の保守点検のため、随時システムメンテナンスを行っております。メンテナンス内容に より一時サービスを停止させて頂く場合がありますので、予めご了承ください。 ※管理責任者の方は、上記ページを WWW ブラウザにブックマークの上、最新情報をご確認くださ い。 お 問 合 せ 先 ★学校向けサービスに関するお問合せは・・・ ぷらら法人会員サービス担当 受付時間：月～金 10：00～18：00 （土日祝日、年末年始除く）
Tel ： 03-5954-7257 / Fax ： 03-5954-5357
E-Mail ： [email protected]
〒170-6024 東京都豊島区東池袋3-1-1 サンシャイン 60 24F ◆ぷららホームページ ： http://www.plala.or.jp/ ◆学校向けサービスホームページ ： http://biz.plala.or.jp/school/ ◆法人向けサービスホームページ ： http://biz.plala.or.jp/ 【 ぷらら学校サービスに関する最新の障害情報はこちら 】 最新メンテナンス・障害情報 ： http://biz.plala.or.jp/support/mainte/index.html第３章 雛形ホームページの内容
ホームページは、文章や画像を１つのページに同時に表示できる、「HTML」と呼ばれる簡単な言語を用いて作られています。 「雛形ホームページ」を御校のホームページとしてすぐお使いいただくための基本情報や、最低限の変更方法を示します。 ３－１ 雛形ホームページの作成コンセプトとディレクトリ構成 作成コンセプト 子どもたちが、自分たちの学校を積極的にＰＲできるホームページであること できる限り見た目がわかりやすく、学校で紹介したい基本事項を網羅した内容であること 変更が比較的容易にできるものであること 先生－生徒という学校内でのコミュニケーションに留まらず、学校からＰＴＡや家庭など地域の方に知らせたい項目を盛り込み、 子どもたちに身近な社会とのコミュニケーションが持てるホームページであること ディレクトリ構成 ホームページは何枚かのファイルのつながりでできていますが、どのページが何を示すのか簡易に管理できるよう、枝状の 構造を持っています（これを「ディレクトリ構成」と言います）。 トップページ（表紙）の項目や、各ホームページの変更・削除の際、この構造を知っておく必要があります。 ※ トップページのファイル名は、必ず 「index.html」 または 「index.htm」 とします。 ●ディレクトリ構造 elementaryindex.htm
（トップページ）ｉｎｄｅｘ1 index1.htm （What s new!） index1.htm2 （案２） What s New！ ｇｉｆｓ 画像フォルダ school.ｇｉｆ（学校の写真） title.ｇｉｆ（ぷらら小学校タイトル画像） back.ｇｉｆ（背景画像） goplala.ｇｉｆ（ぷららﾄｯﾌﾟﾍﾟｰｼﾞへのｱｲｺﾝ） gakuen.ｇｉｆ（ぷらら学園都市へのｱｲｺﾝ） index.ｇｉｆ，index1.gif，index10.gif～ index9.gif (絵付きｱｲｺﾝ) album.ｇｉｆ（ｱｶﾃﾞﾐｯｸｱﾙﾊﾞﾑへのｱｲｺﾝ） space.ｇｉｆ（空白用画像） ｉｎｄｅｘ1
～
ｉｎｄｅｘ10 (文字のみアイコン）色違い (背景用画像：blue, green, red）
ｉｎｄｅｘ10 index10.htm （リンク集）
ｉｎｄｅｘ7 ｉｎｄｅｘ8 ｉｎｄｅｘ9 index7.htm （アルバムの項目） アルバムのページ index8.htm （わたしたちのページ 項目） わたしたちのページ 先生教えて！ index9.htm （質問＆回答） index9.htm2 （案２） ｉｎｄｅｘ6 わたしたちの 生活 index6.htm （項目ページ） index6-1.htm （わたしたちのクラス） index6-2.htm （児童会からのお知らせ） index6-3.htm （クラブ活動の紹介） index6-4.htm （部活動の紹介） index6-5.htm （わたしたちの作品） index6-6.htm （こんなことしたよ！） ｉｎｄｅｘ2 ｉｎｄｅｘ3 ｉｎｄｅｘ4 ｉｎｄｅｘ5 イベントのお知らせ index2.htm （項目ページ） index2.htm2 （案２） index2-1.htm （今月のイベント） index2-2.htm （年間のイベントスケジュール） 学校の紹介 index3.htm （項目ページ） index3-1.htm （学校のあゆみ） index3-1.htm2 （案２） index3-2.htm （校長先生より） index3-3.htm （校歌） 学校からの お知らせ index4.htm （項目ページ） index4-1.htm （大切なお知らせ） index4-1.htm2 （案２） index4-2.htm （学年だより） index4-3.htm （きゅうしょくだより） index4-4.htm （ほけんだより） index4-5.htm （としょかんだより） index4-6.htm （お便りください＆お返事） index4-6.htm2 （案２） 入学案内 index5.htm （入学案内一括バージョン） index5-1.htm （入学資格） index5-2.htm （費用） index5-3.htm （お申し込み方法）
｝
別々バージョン３－２ トップページ（表紙）とそのソース インターネットのホームページを閲覧するには、ブラウザと呼ばれる閲覧ソフトが必要です。ご使用のパソコンにブラウザがイ ンストールされていない場合は、マイクロソフト社の「Internet Explorer」やネットスケープ・コミュニケーションズ社の「Netscape Navigator」等をご用意いただき、適宜インストールしてください。 ※ブラウザは、インターネット雑誌またはパソコン雑誌などの付録CD-ROM に収録されています。 お好みのブラウザをご用意ください。 お使いのパソコンにダウンロードしたサンプルコンテンツ（elementary フォルダ）を、ブラウザで表示します。 （ここでは、Internet Explorer での表示例を示します） １． パ ソ コ ン 上 に ダ ウ ン ロ ー ド し た 「elementary.exe」を ダブルクリックします。 ２． 解凍先フォルダを指定します。 （例：デスクトップ上に保存） ３． 自動的に「elementary」フォルダが作成さ れます。 ４． 「 elementary 」 フ ォ ル ダ を 開 き 、 「index.htm」（トップページ）をダブル クリックします。
トップページ（表紙）
ここで表紙の各項目（「今月の行事」や「大切なお知らせ」など）やアイコン（「新しい情報」や「先生教えて！」など）にマウスポイ ンタを合わせクリックすると、各ページがご覧頂けます。
トップページのソース 各ホームページは「HTML」という簡易なホームページ作成言語で記述されたもので、これを編集することで各ホームページの 内容を変更・更新をすることができます（各ページのこのHTMLのことを「ソース」と言います）。このソースはお持ちのブラウザ で、簡単に確認できます。 １． ブラウザのメニューバーの「表示」から「ソース」を選択します。 ２． ソース（html）が表示されます（テキスト編集ソフト『メモ帳』が自動的に起動します）。
３－３ トップページの変更方法 学校名や連絡先の住所など、トップページは最低限変更が必要なページです。 ホームページを作成する際、本来 HTML を構成する「タグ」という命令語を用いる必要がありますが、ここでは簡単に、「雛形ホ ームページ」の日本語部分を書き換える作業のみを紹介します。 それ以外のページについては、一度ホームページを公開した後、適宜変更していってください。 ※ 詳細な変更方法については、市販されている「HTML 辞典」「タグ辞典」などをご参照ください。 １． トップページのソースを表示します。（前ページ参照） ２． ソースの全文を確認し、「ホームページ名（学校名）」 「タイトル画像」 「更新日時」 「アクセスカウンター」 「学校の写真」 「学校の所在地」 「連絡先」の 7 点を修正します。 ●ソースの全文と解説 <html> <head> <!-- タイトル --> <title>ぷらら小学校ホームページ</title> </head> <!-- 背景画像の指定 --> <body background="gifs/back.gif"> <!-- ベースとなるフォントサイズ設定 --> <basefont size=4> <!-- ここから本文開始 --> <!-- テーブル１ --> <center>
<table width="640" height="" border="0" cellspacing="0" cellpadding="0"> <tr>
<td align="center" valign="middle"> <!-- タイトル画像 -->
<img src="gifs/title.gif" alt="タイトル画像" border="0"> </td>
</tr> <tr>
<td align="center" valign="middle"><p><br> <!-- テーブル２ -->
<table width="" height="" border="0" cellspacing="0" cellpadding="0"> <tr>
<td width="30" align="center" valign="top"> <img src="gifs/space.gif" alt="スペース" border="0"> </td>
<td width="190" align="left" valign="top"> <!-- 大項目１ -->
<a href="index1/index1.htm"><img src="gifs/index1/what.gif" alt="更新情報" border="0"></a> <ul>
</ul>
<!-- 大項目２ -->
<a href="index2/index2.htm"><img src="gifs/index2/event.gif" alt="行事のお知らせ" border="0"></a> <ul> <li><a href="index2/index2_1.htm">今月の行事</a> <li><a href="index2/index2_2.htm">年間行事ケジュール</a> <title> このホームページのタイトルです。 ご自分の学校のお名前等、任意の名前をお入れください。 学校名（画像）です。ここに文字で学校名を示すよう、下 記のように書き換えます。
<font size=+4 color="#0000ff">東京都豊島区立 ぷらら 小学校</font>
注：学校名は重複する場合がありますので、市町村名 から示すようにしましょう
<li><a href="index3/index3_2.htm">校長先生より</a> <li><a href="index3/index3_3.htm">校歌</a> </ul>
<!-- 大項目４ -->
<a href="index4/index4.htm"><img src="gifs/index4/oshirase.gif" alt="学校からのお知らせ" border="0"></a> <ul> <li><a href="index4/index4_1.htm">大切なお知らせ</a> <li><a href="index4/index4_2.htm">学年だより</a> <li><a href="index4/index4_3.htm">きゅうしょくだより</a> <li><a href="index4/index4_4.htm">ほけんだより</a> <li><a href="index4/index4_5.htm">としょかんだより</a> <li><a href="index4/index4_6.htm">お便りください＆お返事</a> </ul> </td>
<td width="5" align="center" valign="top">
<img src="gifs/space.gif" alt="スペース" border="0"> </td>
<td width="200" align="center" valign="top"> <!-- 更新日 -->
<font size=-1>最終更新日2006 年7 月22 日</font><br><br> <!-- アクセスカウンター -->
<img src="/cgi-bin/Count.cgi?df=element.html|dd=caliblu|ft=0|md=8|" border="0"><br><br>
<!-- 学校の写真 -->
<img src="gifs/school.gif" alt="学校の写真" border="0"><br><br> 東京都豊島区東池袋<br>
<!-- ぷららへのリンク --> <p>
<a href="http://www.plala.or.jp/"><img src="gifs/goplala.gif" alt="ぷららへのリンク" border="0"></a> <a href="http://biz.plala.or.jp/school/"><img src="gifs/gakuen.gif" alt="ぷらら学園" border="0"></a>
</td>
<td width="25" align="center" valign="top">
<img src="gifs/space.gif" alt="スペース" border="0"> </td>
<td width="190" align="left" valign="top">
<!-- 大項目５ -->
<a href="index5/index5.htm"><img src="gifs/index5/annai.gif" alt="平成１０年度入学案内" border="0"></a> <ul> <li><a href="index5/index5.htm#index5_1">入学資格</a> <li><a href="index5/index5.htm#index5_2">費用</a> <li><a href="index5/index5.htm#index5_3">お申し込み方法</a> </ul> <!-- 大項目６ -->
<a href="index6/index6.htm"><img src="gifs/index6/seikatsu.gif" alt="わたしたちの生活" border="0"></a> <ul> <li><a href="index6/index6_1.htm">わたしたちのクラス</a> <li><a href="index6/index6_2.htm">児童会からのお知らせ</a> <li><a href="index6/index6_3.htm">クラブ活動の紹介</a> <li><a href="index6/index6_4.htm">部活動の紹介</a> <li><a href="index6/index6_5.htm">わたしたちの作品</a> 情報を更新した日にちを入れて ください。 ﾎｰﾑﾍﾟｰｼﾞを見てくれた人の数 を表示するｶｳﾝﾀｰの部分で す。”element”を各学校のデ ィレクトリ名に変えてください。 御校の写真を”school.gif”として差し替えてください。 御校の所在地名を書き換えてください。
<ul> </ul>
<!-- 大項目８ -->
<a href="index8/index8.htm"><img src="gifs/index8/mypage.gif" alt="わたしたちが作ったページ" border="0"></a> <ul>
</ul>
<!-- 大項目９ -->
<a href="index9/index9.htm"><img src="gifs/index9/teacher.gif" alt="先生おしえて！" border="0"></a> <ul>
</ul>
<!-- 大項目１０ -->
<a href="index10/index10.htm"><img src="gifs/index10/link.gif" alt="リンク集" border="0"></a> </td> </tr> </table> <!-- テーブル２終わり --> </td> </tr> <tr> <td align="center" valign="middle"> 連絡先・お問い合わせ先<br> <blockquote>
E-mail:<a href="mailto:[email protected]">[email protected]</a><br>
住所:〒170-6024 東京都豊島区東池袋3-1-1 サンシャイン６０ 電話番号:03(5954)7257<br> </blockquote> </td> </tr> </table> </center> <!-- テーブル１終わり --> <!-- ここまでが本文 --> </body> </html> ３． ソースの変更が終了したら、ファイルを、別名で（例：index0.htm）、同じフォルダ内に保存します。 その後、「index0.htm」をブラウザで表示させ、見え方の確認をしてください。 （この時点では、アクセスカウンターは表示されません。コンテンツをぷららのサーバ上に置き、インターネット上に公開 することで表示できるようになります。） きちんと御校のホームページとして表示できたら、「index0.htm」を「index.htm」として保存し直してください。 御校でお使いのメールアドレスを入れてください。 （アカデミックスーパー／ライセンスをお使いの学校様は、そのメールアド レスをお書きください。） 御校の連絡先に書き換えてください。
３－４ その他のページの変更方法
トップページの変更ができたら、他のページも同様の手順で変更することができます。（この際、< >などの記号やアルファベッ トなどは HTML を構成するタグ（命令語）の一部ですので、削除しないようご注意ください。） ここでは、 ● 新しい情報 ● 校長先生より ● 先生教えて！ ● リンク集 の４つのページを、部分的に変更する方法を紹介します。 １） 新しい情報 ソースを表示させ、表組みの部分を編集します。（日本語の部分のみ書き換えます）。 ●表組みの１部（抜粋） ……… <tr> <!-- 更新日付け --><td align="left" valign="middle" bgcolor="#eeee99" nowrap> 2006 年7 月3 日
</td>
<!-- 更新項目 -->
<td align="left" valign="middle" bgcolor="#99ee99"> <a href="">体育館利用時間表</a> </td>
<!-- 更新内容 -->
<td align="left" valign="middle" bgcolor="#cceecc">
体育館利用時間表が 2 月版になりました。各クラス委員は確認してみんなに連絡してください。
</td>
更新日、更新した項目を書き換えます。
２） 校長先生より 校長先生の写真とコメントを編集します。 <blockquote> ●校長先生より<br><br> <blockquote> <!-- 校長先生の写真 -->
<img src="../gifs/index3/kocho.gif" alt="校長先生の写真" border="0" align="left" valign="middle"> <blockquote> <!-- 校長先生のあいさつ --> <p><br><br> ぷらら小学校は、「明るく、楽しく、はきはきと」をモットーに、昭和３０年に設立されました。<br> 現在、学校教育を取り巻く環境は激変しております。いじめの問題、子どもたちの心の問題など様々な課題があり ますが、新しくインターネットを用いた情報発信に取り組むことにより、開かれた学校を目指してまいりたいと思い ます。<br> ぷらら小学校では、児童たち自らの手によるコンテンツも今後どんどんふやしていく予定です。地域や父兄の皆 様もぜひご覧いただき、子どもたちと共に歩んでいけるホームページとして行きたいと思います。<br> </blockquote> 校長先生の写真を”kocho.gif”として差し替えてください。 校長先生のコメントに書き換えてください（日本語部分のみ）
３） 先生教えて！
質問と、それに対する答えを変更します。
（質問の内容はメールにて先生が受け取ったものを選択し、返事を書き込むことができます）
<!-- テーブル２ -->
<table width="" height="" border="0" cellspacing="1" cellpadding="3"> <!-- 聞きたいこと -->
<tr>
<td width="80" align="center" valign="middle" bgcolor="#88eeee"> 聞きたいこと
</td>
<td width="380" align="left" valign="top" bgcolor="#88eeee">
ああああああああああああああああああああああああああああああああああ あああああああああああああああああああああああああああああああああああ </td> </tr> <!-- お返事 --> <tr>
<td width="80" align="center" valign="middle" bgcolor="#eeee88"> お返事
</td>
<td width="380" align="left" valign="top" bgcolor="#eeee88">
いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい いいいいいいいいいいいいいいいいいいいいいい </td> </tr> </table><p> 質問と答えの部分を書き換えます。
４） リンク集 学校や教育に関係のあるホームページへのリンクを設けることができます。 （リンクを設ける際には、ホームページ所有者の承諾が必要かどうか必ずご確認の上、リンクを設定するようにしてください。） 【参考】ぷらら学園都市 えでゅけっと へのリンク設定方法 「えでゅけっと」のホームページ http://biz.plala.or.jp/school/index.html <!-- 項目＆小項目 --> <ul> <li>姉妹校、海外姉妹校へのリンク <li>博物館、美術館 <li>水族館、動物園 <li>相談ページへのリンク <li>ぷらら学園都市 <li>文部省 </ul>
↓
<!-- 項目＆小項目 --> <ul> <li>姉妹校、海外姉妹校へのリンク <li>博物館、美術館 <li>水族館、動物園 <li>相談ページへのリンク<li> <a href=” http://biz.plala.or.jp/school/index.html”>ぷらら学園都市</a>
<li>文部省 </ul>
リンクを設定するための命令語 <a href=” “> </a> を用います。
３－５ 背景色の選択 雛形ホームページの最初の背景の色は「青」となっておりますが、この他に「赤」「緑」に変更することが可能です。 ●画像ファイルのディレクトリ構成 ３－６ 注意事項 （１） トップページとしたいファイルの名前は、以下のどちらかにして下さい。 index.htm index.html （すべて小文字） （２） アカデミックサーバの容量は１０ＭＢです。（最大２０ＭＢまで契約できます） この容量を超えると、ファイルが転送できなくなりますので注意してください。 （３） 変更したホームページは、まだお使いのパソコンでしか見ることができません。これをインターネット上に公開するには、 “アカデミックサーバ（ぷららの Web サーバ）へアップロード”する必要があります。このアップロードの方法を、FTP（ファイ ル転送）といいます。FTP の方法については、別途『アカデミックサーバご利用ガイド』をごらんください。 （４） お願い 雛型ホームページを学校のホームぺじとしてお使いになる場合、トップページにある「ぷらら」へのリンクボタン、「ぷらら 学園都市」へのリンクボタンは必ず設置してください。 elementary
