平成20年6月度




生涯学習センターの3Fワーキング・ルームにて(Hs撮影)
ホームページ小グループ平成20年6月の勉強会は以下の通り大変熱心な空気の中で行われました。

日時: 平成20年6月3日(火)
     午后1時より午後4時まで

場所: 生涯学習センター3階ワーキング・ルーム

参加者:Hrさん、Stさん、Hsさん、Skさん
     Siさん、Nhさんの6名

今回はインターネット接続が必要のない勉強なので、生涯学習センターの研修企画係のご好意により、生涯学習センターの3階のワーキング・ルームを無料で拝借しての勉強会となりました。

朝から生憎の雨の中にも拘らず、6人もの参加者が得られて、勉強会は熱気に包まれていました。

これまでの勉強テーマはどちらかと言えばホームページ作成の基本的な事項に関するものでしたが、今回からは愈々よりレベルの高い、スタイル・シートやウェブ・サイトの構成といったところに入ることになりました。

   

(1)スタイルシートの重要性とその設定の実習

☆ スタイル・シートとは:

 世界のウェブ・ページの規格を決める団体であるW3C (World Wide Web Consortium) の最近の方針は、ウェブ頁のスタイル (書式、レイアウトやデザインなど見栄を規定するもの)は出来る限りHTMLの文法から独立して別個の文法として記述していこうという方針のようです。

その利点としては:

 * ファイルに書式を設定するより、はるかに凝ったレイアウトにすることができる。
 * ファイルを編集しなくても、スタイルシートを変えるだけで見栄えを変えることがでる。
 * 共通のスタイルシートを使って、複数のHTMLファイルに統一したデザインを適用できる

 スタイル・シートを設定する方法は次の3通りがある:

 (1)HTMLのタグの属性としてスタイルを設定する

   HTMLタグのスタイル属性が記述されているタグにのみ効果が及ぶ局所的なスタイル設定

 (2)内部スタイル・シートとしてスタイルを設定する>
 
   HTML頁のヘッダー・セクションにスタイル・シートを定義し、同一頁内の条件が一致する
   全てのタグに指定されたスタイルが適用される
     

 (3)外部スタイル・シートとしてスタイルを設定する
 
   HTMLとは別のファイルとして保存されるスタイル・シートで、それを参照している全ての頁
   の条件が一致している全てのタグにそのスタイルが適用される。 
   ファイルへの参照はLINKタグでなされる。
   このスタイル・シートは一つのサイト全体の統一的なデザインには非常に有効的です。
   また、ウェブ・頁の見栄の設計の試行錯誤作業に有効である。

☆ スタイル・シートを設定する対象には次の3通りがある:

 (1)タイプ(HTMLのタグ)に対して設定する(今回はこの対象を主として勉強した)

 (2)クラスに対して設定する(特定のタグを対象にしない:今回は実習を割愛する)

 (3)IDに対して設定する(特定のタグを対象にしない:今回は実習を割愛する)

☆ スタイル・シート設定の実習:

  スタイル・シート設定はメニュー・バーの「表示」から「スタイル・シート・マネジャー」ダイアログ
  を表示して行う。」

☆ スタイルの優先順位

   Style=””の属性 > 内部スタイル・シート > 外部スタイル・シート > HTMLの属性

   但し、例外としてHTMLのFont属性は優先順位が最も高い。
   以上の点を考慮すると、色々なObjectの書式は出来るだけHTMLタグの属性とし設定し
   ないで、優先順位の低いスタイル・シートで設定した方が将来に亘って設計変更の自由度
   が高くなり、望ましいと考えられます。

(2) ウェブ・サイトの構成とファイルのネーミングの重要性

 ウェブ・サイトが拡大していくと、構成するファイルの数も急速に増大し、効率的なサイトの保守管理のためには、ウェブ・サイトの階層構造的な構成とファイルのネーミングが重要となってくる。

☆ サイトのトップ・レベル(index.htmlのレベル)とは別にグループ毎のフォルダーを作成する。

☆ グループ毎のフォルダーの中に各々「image」フォルダーを作成する。

☆ ファイル名には:「page_act2008.html」, 「page_meet2008.html」、「ban_title.top.gif」、や
   「btn_goto_top.gif」,「ph_hpgrp01.jpg」のような組織的なネーミングを採用する。

(3) スライド・ショウ作成ウィイザードを使ってみる

☆ 各自スライド・ショウの材料となる写真を20枚くらい用意する

☆ 写真のファイル名とファイル・サイズの一括変更はフリー・ソフトの「チビすな」が便利である。

☆ 「スライド・ショウ」用の新規ファイルを作成する。

☆ メニュー・バーの「挿入」 → 「画像の効果」 → 「スライド・ショウ」 の手順で作成する。

☆ スライド画面の配置の調整ををソース・コードで行う。

(4)今後の方針とテーマ(可能性)

次回からは、毎月1回くらいの頻度で集まることになりました。 今のところ毎月第1火曜日の午後が良いのではないかとの合意が得られました。

テーマとしては以下のようなものが考えられます:

1.ダイナミックなウェブ機能:
 JavaScript(ローカル・プログラム)やCGI(サーバー・サイト・プログラム)

2.フレームを使ったウェブ・サイトの設計:
 
3.フオームを使ったウェブ頁