厚田中学校ホームページについて 
 
このページはホームページ担当者向けの技術情報です。
  
このページを作成しているソフトとその理由

 

 「厚田中ではHPをどうやって作っているのか」という質問を何人かの方からいただきました。
 私(石黒)が、石教研のHP を立ち上げるための講習を行った時には、IBMホームページビルダーを使ったので、「ホームページビルダーでまねしようとしたが、どうしてもできなかった」というような内容がありました。
 このHPは「IBM ホームページビルダー」ではなく、「Macromedia Dreamweaver MX」というソフトを使っています。
 理由は次の通りです。
@テキストの行間をあけたいから。その上で、閲覧する人が文字サイズを選択できるようにしたい
Aテーブルを使って正確にレイアウトしたいから
Bドロップリストなどを使って、レイアウトをシンプルにしたいから

 そのためには、CSS(カスケーディングスタイルシート)と JavaScript が必要で、さらに、タグから書き込まなくて良いようにその機能を内蔵したソフトという条件が出てきます。いくつかのソフトと比較して Dreamweaver MX を選びました。 定価で 48,000 円もする高額なソフトですが、エデュケーション版は 12,000 円で購入できるので、学校関係者にはおすすめできます。

 奥が深そうで、とっつきにくい印象があるソフトですが、リンクや画像の管理のしやすさなどは、他のソフトとは一線を画したレベルで、慣れると手放せなくなります。

 HPで機能をチェックすることができますし、30日の体験版(その間の制限なし)をダウンロードできますから、既存のページを整備したいと考えている方は試してみると良いと思います。

 

 
 
 
  
横幅を固定し、中央に配置する方法

 

 学校では、まだ15inchのCRTディスプレーが使われていることが多く、その場合 800×600のSVGA表示が一般的です。そこで、最初からその表示に対応したページを作ることを考えました。

 具体的には背景色を指定してから、横幅750ピクセルのテーブルをつくり、そのテーブルの色を白くします。テーブルの指定の前に<div align="center">というタグを書き込んでセンタリングさせます。ブラウザの横幅が変化しても、常に中央部に一定の幅の文書のスペースができます。ソースを読んでみて下さい。
  このあたりはタグを併用していますが、Dreamweaver MXはテキストエディタを内蔵しており、本体と密接に連動しているので、安心して利用することができます。


 
  フレームの使用について
 

 

 このHPでは、フレームを使っていません。理由は800×600SVGAの画面では、ナビゲーション用のフレームを表示するスペースが不足するためです。そのかわり、テーブルを利用し、上部にナビゲーション用のスペースを設けているので、どのページからも任意のページに行き来することができるようになっています。

 また、本校では盲導犬ユーザーの方と交流させていただいています。アクセシビリティの観点から現状では視聴覚障害者用の読み上げソフトのに対応できないフレームは使わないようにしようと考えました。

 当初はリンクのページにフレームを使っていました。左のリンク集の項目部分を常に表示し、右側のリンク部分だけを動かすためでしたが、複雑な割に効果が少ないので、使用しないようにしました。

 

 
そのほかの工夫 ( サイトマップ  エディタの利用  画像処理 FTP 軽量化 )

 

 一番重要と考えていることは、HPの全体構成をはっきりさせることです。そのために、設計図としてのサイトマップを作り、コンテンツの配置とリンク関係を明確にするようにしています。異動などで担当者が変わった場合でもこれを引き継げば、ホームページの継続が容易になると思います。なお、このHPのサイトマップは、エクセルで作成し、csv形式のテキストに変換してからDreamweaver MXに読み込んでいます。更新はDreamweaver MXの「テーブルの挿入」で行っています。

 一般的なことですが、テキストエディタを効果的に活用することが、HPづくりの効率を上げる重要なポイントだと思います。私は使い慣れている「秀丸エディタ」に、ワープロソフトや表計算ソフトなどのデータを流し込み、属性を解除したプレーンテキストを作ってから Dreamweaver MX に貼り付けています。学校便りなどで使った文書やLANの中に蓄積されている生徒作品などをそのまま利用でき、便利です。

 画像処理には、フリーソフト VIX を起動しておき、デジカメ(EOS10D)の画像などは、一括変換で指定したサイズに加工します。その際、連番のリネームが可能なので、その機能も活用しています。一括変換で圧縮率も指定できるので、非常に便利です。もう少し複雑な処理が必要な時は、VIXのサムネイルからリンクさせてPhotoshop CSを起動しています。かつては重いソフトという印象を持っていましたが、メインで使っているPCが高速なのでストレスを感じなくなりました。(865G、PenW2.6HT、1GBRAM・DDR400、HDD240GB、XPpro) 調整レイヤーで画像を処理して、web用に保存し、元データには変更を加えずに終了します。

 FTPソフトも工夫をしています。Dreamweaver MX内蔵のFTPがやや遅いので、フリーソフトで速度に定評があるFFFTPを使っています。差分のアップロードはもちろん差分のダウンロードが速いので便利です。かゆいところに手が届くような細かな設定が可能で、これも優れたソフトです。

 後は、動作が重くなるような要素を入れないように意識しています。たとえばGIFを使ったロゴやFLASH、動画GIF、ロールオーバーなどです。写真の圧縮率も意識しています。厚田村は、光はもちろんADSLも範囲外の地域なので、不必要に重いページは見るのがつらいため、自分では作らないと考えているからです。

 

 
これからの課題 コンテンツの協同作成 


 コンテンツの充実が最大の課題です。各担任や部活動、生徒会の担当者によるページ更新を容易にするため、校内で講習を行っています。学級や部活動生徒会などのページが充実していくようにしていきたいと思います。

                            ( HP管理者 教頭  武岡則夫 事務 中澤卓也)