htmlとcssを学び終えたばかりで、同時にjavascriptもざっと目を通しました。そこで、チュートリアルを一通り見た後、以下のページを実際に作ってみました。（これが元の完成イメージです）

いくつか問題がありました。例えば、チュートリアルにあった角丸ボタンは、<ahref=''><strong><span>HOME</span></strong></a>のように3層にネストされた要素を使い、各タグにそれぞれ背景画像を設定することで実現されていました。 これは少し手間がかかりすぎると感じました。実際には、border-radiusとタイリング背景を組み合わせることで完全に実現できます。コードはシンプルで見た目もすっきりし、さらにhtmlのセマンティクスにも合致します。 <a>HOME</a>という要素に対して、CSSでa{border-radius:5px}と設定するだけで済みます。 実現図は以下の通りです：

もう一つ問題がありました。それは、ページ全体のメインコンテンツ部分の背景が、角丸で影付きの白い画像だったことです。チュートリアルでは、これも同様に3枚の画像をスライスし、htmlの3層ネストで実現されていました。しかし、ここもそれほど手間をかけずに、角丸ボーダーと白い背景を設定し、さらに影の効果を追加するだけで済みます。

#Content{
background:#fff;
box-shadow:0 3px 5px#e4e4e4;
border-radius:25px25px 0 0;
}

効果図は以下の通りです：

ただし、上記の解決策には一つ問題があります。それは、いずれもCSS3の新機能を使用しているため、古いブラウザでは効果が大幅に損なわれる可能性がある点です。どの方法を採用するかは、要件を考慮して決定する必要があります。 最後に、全体を完成させた後のページ画像を掲載します。一番上の画像と比較してみてください。なかなか良い感じになったと思います。