ネットワーク委員会・ウェブ構築セミナー
2008 07 19 14:41
HTMLを教える側に
学校の寮生会に、ネットワーク委員会が新設された。自分は、寮生会のホームページを作るという話を聞いてウェブデザインをしに参加してみた。
実を言うと、寮に残るために役職を2つすでに持っていたから、3つ目の委員会である。ちなみに、他にやっているのは、保健衛生委員長と指導寮生、風紀委員。あれ、3つすでにあった、ってことは4つ目か。まぁ、大して仕事が多いわけではないからいい。
さて、話を戻そう。HTMLについて、実際にサイトを作れるほど知識を持っている輩が委員会内に自分しか居なかったため、一度ウェブ構築セミナーを行うことになった。そう、自分が講師として、セミナーを行うのです。
3日間でどれだけ習得させきれるか、それが最大の問題だ。
そんなこんなで、セミナー用のPPT資料やらサンプルファイルやらリファレンスやらを何もかもそっちのけで全力で作っていたのだが、これが思いの外時間が掛かって仕方がない。連休丸潰しにしても終わらなさそうだからそろそろ、あきらめが入ってきた。連休でレポート2つやらなきゃならんし。
最後に、講義内容の紹介でもしておくか。資料の用意が終わっているのは、Chapter.4までだと最初に書いておこう。
講義内容
Chapter.1 ウェブページの構成
- HTMLとCSSの違い
- ソースコードの見方
Chapter.2 HTMLを学ぶ
タグの意味づけ・文章の構造化について理解する
- テンプレートの配布、解説
- タグ付けの仕方
- 主要なHTMLタグの紹介
- 課題１：HTMLマークアップ実習
Chapter.3 CSS[Lv1]～とりあえずなれる編～
簡単な文字装飾を通してCSSの文法について理解する
- セレクタ、プロパティ、バリューの解説
- 数値の単位（em,pxなど）の解説
- カラーコード
- 実際にスタイルを変更してみる
- idとclass
Chapter.4 CSS[Lv2]～CSS箱理論編～
「CSSは箱である」とイメージし、マージン等について理解する
- インライン要素とブロック要素の違い
- 箱のネスト（入れ子）構造について
- 親要素、子要素とルール
- マージン、パディング、ボーダー
- 幅と高さ
- 課題2：margin,padding,border,width,backgroundなど、 これまでに習ったプロパティを使ってみる
Chapter.5 CSS[Lv3]～リストの装飾・ネスト編～
特殊なプロパティが複数あるリストタグの装飾をできるようになる
親要素・子要素間での値の継承について考える
ついでに:hover疑似要素について学ぶ
- insideとoutsideのブラウザ間での違い
- リストのスタイル
- 親要素、子要素間での文字サイズ
- 親要素、子要素間での幅
- カーソルを乗せて変化を与える
Chapter.6 CSS[Lv4]～divの使い方・レイアウト編～
カラムレイアウトを通してfloatの使い方を学ぶ
正しいHTMLについて再度確認する
- div・spanの紹介
- 実際のウェブページでdivがどのように使われているか
- セレクタのネスト構造
- ヘッダー、フッター、ナビゲーション、メニュー
- 1カラム中央寄せレイアウト
- 逆L字型2カラムレイアウト
- 3カラムレイアウト
- 学生会の新サイトの間違いを分析する（文章構造の復習も兼ねて）
- 課題３：課題１で作ったHTMLに、divを書き足し、 ウェブページっぽくデザインしてみる。
Chapter.7 CSS[Lv.5]～より自由なレイアウトへ～
positionプロパティの使い方を覚える
overflowプロパティについて学ぶ
displayプロパティについて学ぶ
- カラムや段組を超えたレイアウト
- absolute
- relative
- fixed
- overflow
- display
- 課題４：最初に紹介したサイトのCSSを分析してみる
Chapter.8 アクセシビリティとユーザビリティ
アクセシビリティとユーザビリティについて理解する
各種レイアウト手法を覚え、幅の数値の単位による違いを理解する
- アクセシビリティと検索エンジン
- ユーザビリティとレイアウト
- エラスティックレイアウト
- 固定幅レイアウト
- リキッドレイアウト
- ハイブリッドレイアウト
- 正しい文章構造の利点とブラウザ間の違い
Chapter.9 CSS応用１～ナビゲーションを作る～
displayプロパティを利用した、メニューを作れるようになる
- 箱っぽいメニュー
- リストを横に並べるには
- タブ式のメニュー
- 課題５：学生会新サイトのメニューをリストを使って書き換える
【ここまでくれば「サイト」作りはできます】
【ただしブラウザ間の問題の解決方法が分からないはずです】
→本の紹介で終了
→テンプレの制作へ
このブログを購読
コメントする