２００８年８・９月　HTML+CSS研修会サイト内検索検索２００８年８・９月｢HTML+CSS｣研修会 8月22日(金)17:30～ 21:00 第1回：「尾瀬を歩く」ページ作成 HTML+CSS講座 8月29日(金)17:30～町田市民フォーラム第2回および第3回：第1部 21:00 ４階・講習室 active-sita.comトップページのCSS化 9月05日(金)17:30～ 21:00 荒木、石田、石渡、遠藤、鵜野、梶川、菊池、嶋田、鈴木(な)、西脇、徳田、広瀬、巻参加者田 (敬称略) [講師] 森計14名「町田商工会議所のHP作成支援事業」の業務受託や個人・事業所などから依頼されるＨＰ作成事業が益々多くなっています。これらに対し、ＨＰ作成ＷＧが中心になって活動していますが、より多くの会員がホームページを最新の技術により作成できる技量を身につけることが、会の活動をより全面的に活発にし、そして楽しく展開するために、必要とされています。そこで、先ず、会員向け講座「HTML+CSS」を企画しました。講師を森さんと西脇さんにお願いし、第一部・第二部に分け、第一部では「HTMLとCSSの基礎を学び、練習問題は具体的で役立つものにチャレンジ」する内容で、第二部では「Dreamweaverの使い方、同ソフトを使っての実践的サイト作成」の技量を身につける内容としました。森さんの第一部は、フリーソフト「HTML Project2」 (http://www1.ttcn.ne.jp/~kaneto/hproj2/htmlproject2.html)を用いてHP作成の練習が行われました。 Lesson1の練習問題では、右図に示すようなページを、Step-byStepでコーディングを行いながら完成する手法が説明されました。テキスト形式の原稿にHTMLコーディングを行い、他方にCSSファイル(拡張子をCSSとするテキスト形式 file:///D¦/MY DOCUMENTS/ホームページ/アクティブSITA/active-sita-com/32_benkyo/200809_benkyokai/200809_html-css.html[2011/02/06 13:58:39] ２００８年８・９月　HTML+CSS研修会ファイル)に、「ボックス」構成のページ・レイアウトに沿って必要な id や class を先ず中身なしで入力し、それをHTMLファイルの中にリンクの設定を行った。次に、ページレイアウトのデザインにしたがって、各ボックスをCSSファイル上で定義をした。ボックスばかりか、ページのデザインに係わることは、CSSで規定するものなので、背景色、文字の大きさ、色、装飾の囲い、写真の配置なども次々にCSSで設定していった。プロジェクターの位置の関係で、講師の森さんは、受講者の真ん中で説明されました。森さんが、具体的に詳しい教材を用意されたので、Step-byStepで徐々にページがきれいに構成されていく過程が大変よく理解でき、見事で、わくわくするものでした。 Lesson2として、本ホームページ（http://active-sita.com）のトップページを、テーブル・レイアウト構成になっている現行のものから、CSSによるボックスレイアウト構成に変更する練習をしました。左図のように、トップページをボックスに分解し、それぞれに名前をつけたものが教材で示され、同時に、index.html の内のテキスト部分（画像に付いている alt="" の部分を含む）を抜き取ったものも教材として用意されていました。必要な画像も「image」フォルダに入れて準備されていました。 file:///D¦/MY DOCUMENTS/ホームページ/アクティブSITA/active-sita-com/32_benkyo/200809_benkyokai/200809_html-css.html[2011/02/06 13:58:39] ２００８年８・９月　HTML+CSS研修会これら教材を使って、Lesson1で習ったと同じ手順で、HTMLのコーディング、CSSファイルを作りリンクさせ、順序立って、デザインをして行った。 CSSと直接には関係しないが、ナビゲーションを作る「g-navi」部分で、マウス･ロールオーバーの画像を切り替えるJavacriptの設定の仕方は、大変スマートであった。 Lesson2には、第2回目と第3回目が割り当てられた。左右2段組でさらに2段組が入れ子になっているという込み入った構成で手間がかかるものであった。フリーソフトながら「HTML+Project2」を使いこなすと、大変効率的なページ作成が可能で、森さんの指導で使い方がよく会得できた。受講者は、森さんの早い指導をフォローするに、全神経を集中して取り組んだ。自然、休憩時間になると、リラックスして談笑し、次の時間に備えていたが、中には、休憩時間も真剣に課題をこなしたり、森さんに質問して理解を深めたりという様であった。今回の講座は、冒頭にも記したが、一人でも多くのHP作成者が増えることであるが、初めて file:///D¦/MY DOCUMENTS/ホームページ/アクティブSITA/active-sita-com/32_benkyo/200809_benkyokai/200809_html-css.html[2011/02/06 13:58:39] ２００８年８・９月　HTML+CSS研修会「HTML+CSS」に触れた受講者も大変興味を持った模様で、これをきっかけとして、さらに研鑽されることが期待された。 10月からは第二部として、西脇さんの講師で、より実践的な講座が開かれます。第一部を受講された方は勿論、第一部に参加されなかった方でも参加可能ですので、皆さん、奮って第二部にご参加下さい。この一連の講座で、我が会のHP作成レベルがさらに向上することを期待します。作成：巻田 NPO法人・アクティブＳＩＴＡ Copyright(C)2006 active-sita. all rights reserved file:///D¦/MY DOCUMENTS/ホームページ/アクティブSITA/active-sita-com/32_benkyo/200809_benkyokai/200809_html-css.html[2011/02/06 13:58:39]