相対パスの書き方は理解していただけたでしょうか？このようにそれぞれのページに画像を貼ったり、リンクを張ったりするにはパスを指定しなければなりません。そのため、制作に入る前に「このコーナーは何というフォルダに入れる、画像はどこに入れる、このページからどのページへリンクを張る」といったことを、あらかじめ決めておかなければ、あとから全部のパスを書き直さなければならないことになりかねません。そのため、先にサイトマップを作っておくことをお勧めします。
これからここで一緒につくるホームページのサイトマップは右のようになります。ご自分が作りたいページに合わせて、解りやすく作り直してください。ここで手を抜くと後で痛い目にあいますのでご注意を（笑）。

デザインは何のソフトを使って作っても構いません。もちろん手書きでもOKですが、普段使い慣れたソフトで作る方が、何かと便利だと思います。ちなみに私はAdobe Illustratorで制作しています。
デザインをするには、見た目も大切ですが、今自分がどこにいるのか解るような工夫なども盛り込めれば、ベターでしょう。来てくれた人が迷子にならないように、配色やボタンの位置などに気を付けてください。また、全体のサイズなどにも注意してください。それから、見る人の環境によってレイアウトが崩れた時にも、ある程度対処できる柔軟なレイアウトをすることも大切です。この辺はブラウザの色々なバージョンで確認しながら作る必要があり、慣れないと難しいかもしれませんが、何度か作っていくうちに、壺は解ると思います。
デザインが決まったらプリントアウトしておくと何かと便利です。私はそこにリンク先ファイル名や色指定、寸法などを書き込んでおいて、HTML制作時に参照しながら作っています。
画像は表示する原寸で作ることが基本です。タグで後からサイズを変えることも出来ますが、表示が乱れます。またできるだけ色数を抑えて軽いファイルにすることも重要です。JPEG形式にするかGIF形式にするか、より効果的な圧縮方法を選んでください。今回制作するホームページに必要な画像はあらかじめ用意しておきました。ここからダウンロードしてください。

Macintoshユーザー用img.sea.hqx（356k）
Windowsユーザー用img.exe（243k）

うまくダウンロード出来なかった場合は、上の「images」からコピーしてみてください。
※まとめ読みの方は「sample_img」というフォルダに全て入っています。