CSSファイルを使ったホームページの解説１

CSSファイルを使ったホームページの作成を、三郷北高校では行っています。三郷北高校の「情報A」の授業の内容を公開します。

「情報A」でのCSSファイルを使ったホームページの作成

ホームページビルダーはCSSファイルに対応していないので、使いません。
変更は「NoEditor」というテキストエディタを使っています。 NoEditorについては

CSSファイル対応のExpression Web

マイクロソフトのExpression Webは、CSSファイル対応のHP作成ソフトで、
学生向けのアカデミック版の価格は9800円です。（通常版が3万7800円）
これを使うのは良いと思いますが、
説明はテキストエディタを使う事を前提としています。

CSSファイルを使ったホームページの見本の準備

CSSファイルを利用したホームページの作成(初級)（別ウィンドウ）
に行き、下にスクロールして、１～１３の作業を行ってください。
１２個のHTMLファイルと、１個のCSSファイルを
一つのフォルダに保存してください。

この時、生徒が良く間違えるのは、
１～１２のHTMLファイルを開いた後で、すぐにIEから保存作業を行う事です。
必ず、IEの場合、上のほうの「表示」→「ソース」として、
表示されたHTMLソースを、メモ帳などのテキストエディタから、
「ファイル」→「名前をつけて保存」としてください。

この１２個のHTMLファイルと、１個のCSSファイルを、
適当なテキストエディタで変更していきます。

css11.html（HTMLファイル）の解説

以下にcss11.html（HTMLファイル）の内容と*解説*を書きます。
理解できない事は掲示板に書き込んでください。
http://www2.rocketbbs.com/625/aikoi.html

css11.htmlの内容と解説

＜html lang="ja"＞*使用言語はja日本語*
＜head＞
＜meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /＞
＜meta http-equiv="Content-Style-Type" content="text/css" /＞
＜meta name="ROBOTS" content="NOINDEX" /＞
＜title＞ここは１１。タイトルは重要＜/title＞
*＜title＞＜/title＞の中に検索で使われそうなキーワードを入れて、*
*なおかつ、人間の興味を引くような文章に書き直してください。*
＜link rel="stylesheet" href="base.css" type="text/css" /＞
*スタイルシートに「base.css」という名のCSSファイルを使う宣言です。*
＜/head＞
＜body＞*ここからが、基本的にIEなどのブラウザに表示される部分です。*
*divはdivisionの略で、分割された区分という意味ですが、授業では範囲と訳しています。*
*idはid番号のidですが、授業では名前と訳しています。*
｜＜div id="header"＞＜!-- header --＞
｜*上の文は「header」という名前の範囲がここから始まるという意味です*
｜*＜!-- --＞の中は「header」がここから始まるというコメントで、
｜実効性はありません。*
｜｜＜div id="logo"＞
｜｜*ここから「logo」という名前の範囲が始まる、という意味です。*
｜｜＜a href="http://www.google.co.jp/" target="_blank"＞
｜｜＜img src="google.gif" width="128"
｜｜height="53" alt="google"　border="0"＞＜/a＞
｜｜＜br clear="both"＞
｜｜googleへ
｜｜＜/div＞＜!-- logo終了 --＞
｜*ここで、「logo」という名前の範囲が終わります。
｜｜＜div id="hright"＞
｜｜*ここから「hright」という名前の範囲が始まる、という意味です。*
｜｜*hrightはheaderのrightという、私の造語です。*
｜｜＜ul＞＜span class=menutytle＞■メインメニュー■＜/span＞
｜｜＜li＞＜a href="css11.html"＞１章へ＜/a＞＜/li＞
｜｜*中略*
｜｜＜li＞＜a href="css41.html"＞４章へ＜/a＞＜/li＞
｜｜＜/ul＞
｜｜＜p＞
｜｜《＜B＞私からのメッセージ＜/B＞》
｜｜*中略*
｜｜ａｎｄ　ｆｏｒ　ｙｏｕｒ　ｌｏｖｉｎｇ　ｓｏｍｅ　ｂｏｄｙ．
｜｜＜/p＞
｜｜＜/div＞＜!-- hright終了 --＞
｜*ここで、「hright」という名前の範囲が終わります。
｜＜/div＞＜!-- header終了 --＞
*ここで、「header」という名前の範囲が終わります。
*以下、＜div＞と＜/div＞の対応を線で結んでください。*
*次のような構造になっています。
｜＜body＞
｜
｜｜＜div id="header"＞
｜｜
｜｜｜＜div id="logo"＞
｜｜｜＜/div＞
｜｜
｜｜｜＜div id="hright"＞
｜｜｜＜/div＞
｜｜
｜｜＜/div＞
｜
｜｜＜div id="pagebody"＞
｜｜
｜｜｜＜div id="navigation"＞
｜｜｜＜/div＞
｜｜
｜｜｜＜div id="content"＞
｜｜｜＜/div＞
｜｜
｜｜＜/div＞
｜
｜｜＜div id="footer"＞
｜｜＜div id="footer"＞
｜
｜＜/body＞
*画面上では次のような構成になっています。*

｜―body―――――――――――――――――
｜　　　　　　　　　　　　　　　　　　　｜
｜｜―header―――――――――――――｜｜
｜｜――――　―――――――――――　｜｜
｜｜｜logo｜　｜hright　　　　　　｜　｜｜
｜｜｜　　｜　｜■メインメニュー■｜　｜｜
｜｜――――　―――――――――――　｜｜
｜｜―――――――――――――――――｜｜
｜　　　　　　　　　　　　　　　　　　　｜
｜｜―pagebody――――――――――――｜｜
｜｜―――――――　――――――――　｜｜
｜｜｜navigation｜ ｜　content　　｜　｜｜
｜｜｜■サブ■　｜ ｜＜h1＞＜/h1＞｜　｜｜
｜｜―――――――　――――――――　｜｜
｜｜―――――――――――――――――｜｜
｜　　　　　　　　　　　　　　　　　　　｜
｜｜―footer――――――――――――｜　｜
｜｜　　　　　　　　　　　　　　　　｜　｜
｜｜――――――――――――――――｜　｜
｜　　　　　　　　　　　　　　　　　　　｜
｜――――――――――――――――――――

＜div id="pagebody"＞＜!-- pagebody --＞
＜div id="navigation"＞＜!-- navigation --＞
＜ul＞＜span class=menutytle＞■サブ　メニュー■サブ　メニュー＜/span＞
＜li＞＜a href="css11.html"＞★１章１課★へ＜/a＞css11.html＜/li＞
＜li＞＜a href="css12.html"＞★１章２課★へ＜/a＞css12.html＜/li＞
＜li＞＜a href="css13.html"＞★１章３課★へ＜/a＞css13.html＜/li＞
＜/ul＞
＜/div＞＜!-- navigation終了 --＞
＜div id="content"＞＜!-- content --＞
＜!-- ============================== --＞
*ここから各ページ毎に違う部分です、*
＜h1＞１章１課*中略*＜/h1＞
＜h2＞今回だけ*中略*＜/h2＞
＜p＞
*中略*
＜/p＞
＜h2＞あなたのする*中略*＜/h2＞
＜p＞
*中略*
＜/p＞
＜p＞
*中略*
＜/p＞
*ここまでを各ページ毎に修正*
＜!-- ============================== --＞
＜/div＞＜!-- content終了 --＞
＜/div＞＜!-- pagebody終了 --＞
＜div id="footer"＞＜!-- footer --＞
*中略*
＜/div＞＜!-- footer終了 --＞
＜/body＞
＜/html＞

CSSファイルを使った検索上位表示されるホームページの作り方。無料公開講座

費用：無料
場所：埼玉県三郷市三郷北高校
日時：7月26、27、8月2、3の土日、4日間の13時～16時。
内容：CSSファイルの使い方。検索で上位ヒットする方法。検索エンジンの仕組み。HTMLタグと検索順位の関係

ホームページの作り方に関する無料公開講座

講座名：テキストエディタを使ったホームページの作成
講座内容予定：
1. 12月27日（土）1時～4時。NoEditorの使い方。
2. 12月28日（日）〃。HTMLタグについて。
3. 1月4日（日）〃。検索で上位表示されるホームページの作成。
4. ホームページ・ブログの作成経験がある方に最適です。
5. ホームページの作成が主題です。
費用：無料
場所：三郷北高校　パソコン教室５階

最後まで読んでいただいて、ありがとうございました。