基本的なレイアウトとデザインはカスケーディング・スタイルシート（CSS)ファイルのstyle.cssで行ないます。
メニューとコンテンツ枠の縦の間隔の調整はタグで調節してください。
<!DOCTYPE HTML PUBLIC "...
文書型宣言です。いじらないで下さい。
<html>
<head>
style.cssで設定するので、いじらないで下さい。
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
charset=shift_jisはサーバーの文字エンコード形式に合わせます。シフトJISならそのままに、EUCならばcharset=euc-jpに変更してください。
<meta name="Keywords" content="キーワード1,キーワード2,キーワード3" />
Keywordsは補助的な使い方をします。ページに含まれるがTITLEやH1要素に"使われない"キーワードを2個か3個、検索されたい順番で半角カンマ(,)で区切って入れてください。Yahoo検索でアルファベットの綴り間違いを修正するのに有効なエリアです。
<meta name="Description" content="ページの説明" />
そのページ内に含まれるキーワードを2個か3個含めた、全角120文字までの文章を入れてください。キーワードは文中で2回繰り返し使用してください。ただし、同一のキーワード間の間隔を空けるようにします。
キーワードを入れる位置は文章の初めに調整して下さい。
<meta http-equiv="Content-Script-Type" content="JavaScript" />
ページ内にカウンターなどのJavaScriptを直接書き入れる場合に必要です。使わなければ削除してください。
<title>ページタイトル</title>
そのページ内に含まれるキーワードを2個か3個含めた、全角30文字までの文章を入れてください。 キーワードの配列が異なる順番では検索順位が落ちます。検索エンジンでA-B-Cの順で検索されたいときはABCの順で、C-B-Aの順で検索されたいときはCBAの順でタイトル文を組み立ててください。
ページ名を01.02.03のままにしないでください。 SEOに有効なのでページ名にキーワードを含めるようにして下さい。アルファベットのキーワードならページ名はその綴りにします。 wineとbeerがキーワードならばwine_beer.html又はwine-beer.htmlという具合。 ローマ字で検索されそうなら(doraemon.htmlなど)それでもいいです。ただ、「せんべい」をsenbeiではだれも検索しないでしょう。<W>浅草をasakusaなら外人さんは引っ掛かるかも。</W>
<link href="asets/style_green.css" rel="stylesheet" type="text/css">
このままでOK。 imagesフォルダーなどに入れるのならそのフォルダー名へ変更してください。
<body>
style.cssで設定するので、いじらないで下さい。
<!-- ここから フォームメール設定 -->
デザインは画像を参考に、お好みで設定して下さい。フォームメールの背景画像は、貴方のホームページURI/asets/images/background_beige.gifとすると、見本と同じ背景画像が表示されるようになります。(Greenの例他のカラーは画像を参考に変更して下さい)
background_moccasin.gif 
background_beige.gif
<div align="center">
レイアウトテーブル（メインテーブル）のセンタリングを行なう要素です。leftやrightへ変更可能です。
<table cellspacing="0" class="main_table" summary="メインテーブル">
CSSの.main_tableが対応しています。コンテンツ全体の幅はwidth: 850pxを書き換えると変更できます。
<td class="td-1-header">
大見出しのH1要素を記入する枠です。CSSの.td-1-headerが対応しています。枠内をセンタリンクしていますがtext-align:
center;をleftやrightへ変更可能。サイト名に見出し要素を使うのは間違い。 サイト名はテキストよりもロゴ画像を入れるのがいいです。
<td class="td-2-blank"></td>
メニューより先に本文をクローラーに読ませるための空白枠です。何も入れないでください。フォームメールのページだけは透明画像を入れてあります。
<td rowspan="2" class="td-3-contents">
本文を書く枠です。CSSの.td-3-contentsが対応しています。
全てのH要素は上下の間隔を多少狭くなるように調整してあります。それはCSSで修正できます。
<td class="td-4-menu">
サイトメニューを書く枠です。CSSの.td-4-menuが対応しています。
各カテゴリーのインデックスページ：全てのページからリンクされる重要なページです。このページに含める内容は、コンテンツの紹介やカテゴリーのまとめ的なものにしておくとビジターに親切。SEO的には検索エンジンから”より重要なページ”として認識され、Googleページランクが他のページより高くなります。検索エンジンからのウェブサイトの評価が高くなると、このページは検索エンジンで上位表示する可能性があります。
カテゴリー以下のコンテンツページ：カテゴリーのテーマに合った、狭い範囲の情報を記入するページ。他のページと重ならない内容を持つのが普通。このページへのリンクはカテゴリーのインデックスと同じカテゴリーに属するページからだけなので、検索エンジンで上位表示することは比較的難しくなります。
コンテンツページの増やし方
- テンプレートから複製したコンテンツページをリネームします。（suika.html等）
- <td class="td-4-menu">以下がページ左側のメニューです。ページを増やしたいカテゴリー（フォルダ）を探します。
- ここではフォルダー02にコンテンツページを1ページ追加するとします。この例の元ファイルはページ01です。
- <p class="link-waku-pages-visit"><a href="01.html" title="ページのTITLE">コンテンツページ01</a></p>をコピーします。
- <p class="link-waku-pages"><a href="02.html">コンテンツページ02</a></p>の次の段にペーストします。
- <p class="link-waku-pages-visit"><a href="03.html" title="ページのTITLE">コンテンツページ03</a></p>とりネームします。
- 元のコードを修正します。<p class="link-waku-pages-visit">を削除して<p class="link-waku-pages">として下さい。
- 修正後はこうなります。<p class="link-waku-pages"><a href="01.html" title="ページのTITLE">コンテンツページ01</a></p>
- カテゴリー内の他のページも同様に修正して下さい。
- 5ページ構成サンプルは01フォルダーにあります。4ページは02、3ページは03、2ページは04、1ページは05です。
<td class="td-4-menu">
<p class="link-waku"><a href="../index.html" title="トップページのTITLE">トップページ</a></p>
<p class="link-waku"><a href="../01/index.html" title="ページのTITLE">フォルダー01 インデックス</a></p>
<p class="link-waku-visit"><a href="index.html" title="ページのTITLE">フォルダー02 インデックス</a></p>
<p class="link-waku-pages-visit"><a href="01.html" title="ページのTITLE">コンテンツページ01</a></p>
<p class="link-waku-pages"><a href="02.html">コンテンツページ02</a></p>
ここへ追加する予定
<p class="link-waku"><a href="../03/index.html" title="ページのTITLE">フォルダー03 インデックス</a></p>
<p class="link-waku"><a href="../04/index.html" title="ページのTITLE">フォルダー04 インデックス</a></p>
<p class="link-waku"><a href="../05/index.html" title="ページのTITLE">フォルダー05 インデックス</a></p>
</td>
<td colspan="2" class="td-5-footer">
コピーライトやフォームメールへのリンクなどを記入する枠です。著作権ですが、日本では特に何も記入せずとも著作権は発生します。アメリカ流に(C)2008..とかやるのは法的な意味はありませんので格好だけです。このエリアはCSSの.td-5-footerが対応しています。
<td colspan="2" class="rankuappu">
ページ最下部のアンカーテキストが私の著作権表示の代わりになっていますので、この部分は書き換えないでください。
〔指定アンカーリンク〕
アンカーリンクを消去したり見えないようにしないで下さい。 間違って消してしまったら、このテキストからコピーして下さい。