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

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

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

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

CSSファイル対応のExpression Web

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

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

サイト内リンク CSSファイルを利用したホームページの作成(初級)(別ウィンドウ)
に行き、下にスクロールして、1〜13の作業を行ってください。
12個のHTMLファイルと、1個のCSSファイルを
一つのフォルダに保存してください。

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

この12個のHTMLファイルと、1個の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>ここは11。タイトルは重要</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">1章へ</a></li>
||*中略*
||<li><a href="css41.html">4章へ</a></li>
||</ul>
||<p>
||《<B>私からのメッセージ</B>》
||*中略*
||and for your loving some body.
||</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">★1章1課★へ</a>css11.html</li>
<li><a href="css12.html">★1章2課★へ</a>css12.html</li>
<li><a href="css13.html">★1章3課★へ</a>css13.html</li>
</ul>
</div><!-- navigation終了 -->
<div id="content"><!-- content -->
<!-- ============================== -->
*ここから各ページ毎に違う部分です、*
<h1>1章1課*中略*</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. ホームページの作成が主題です。
  • 費用:無料
  • 場所:三郷北高校 パソコン教室5階
  • サイト内リンクテキストエディタを使ったホームページの作成

最後まで読んでいただいて、ありがとうございました。
↑CSSファイルを使ったホームページの作成の一番上へ↑