簡単なサイト作成の手順を解説します。最終的に作成するのはHTMLファイル4つ、CSSファイル1つです。
HTMLファイルは全体の構造を設定します。CSSファイルはその装飾処理と理解すると良いでしょう。CSSが登場する前はすべてをHTML上で設定した為に、修正がとても大変でした。しかしCSSの登場でレイアウト変更まで含めた修正が素早く簡単に出来るようになっています。ということでここではHTMLとCSSを同時に作成していきます。ただし、ほとんどの処理はコピー＆ペーストの繰り返しなので、それほど難しくはありません。
今回作成するサイトのトップページです。
残りの3ページは文言とメイン画像の違いだけなので、トップページさえしっかり作成すれば後はコピペでほとんど完成です。
ページの構造は3つのパーツとそれらが収まるmain_box。
更にリンクボタンとメイン画像となります。
上は全体の流れです。最初のピンクの枠がmain_boxとなります。
作成したいページのデータは、必ず1つのフォルダーにまとめて作成します。
links（リンク画像等をまとめて格納しているフォルダー）
index.html（トップページのhtmlファイル）
menu01.html（1ページのhtmlファイル）
menu02.html（2ページのhtmlファイル）
menu03.html（3ページのhtmlファイル）rule.css（cssファイル）
最終的に利用するのは赤字以外です。
home_01.jpg（トップページのメイン）
home_01.gif（トップページへのリンク）
home_over.gif（トップページへのリンク／ロールオーバー）
cake_01.jpg（1ページのメイン）
cake_01.gif（1ページへのリンク）
cake_01_over.gif（1ページへのリンク／ロールオーバー）
cake_02.jpg（2ページのメイン）
cake_02.gif（2ページへのリンク）
cake_02_over.gif（2ページへのリンク／ロールオーバー）
cake_03.jpg（3ページのメイン）
cake_03.gif（3ページへのリンク）
cake_03_over.gif（3ページへのリンク／ロールオーバー）
title.png（タイトル文字データ）
pat_01〜05.jpg（パターン塗りデータ）
