各グループを作成し基本設定を完了-DW

それでは各グループheader sidebar main footerをLesson1-5でしたようにやっていきます。今回は選ぶ箇所のみ説明しますのでLeeson1-5を参考にしながらやってみてください。①<h1>～</ul>までを選びheaderグループにします。②<h2>新商品～</dl>までを選びsidebarグループにします。③<h2>はじめまして～</dl>までを選びmainグループにします。④<p>このページのトップに戻る～</address>までを選びfooterグループにします。

このページのトップに戻るの設定

最後にこのページのトップに戻るの設定をしておきます。トップ=全体のグループのidがwrapperにしてあるためlesson1-5で学んだリンクを入力する箇所に#wrapperと入力して設定しておきます。

ここまでのコードを下記に表示しておきますがコピーはせず自分で設定してみてください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="description" content="手作りカントリー調雑貨を販売しています" />
<meta name="keywords" content="手作り,雑貨,カントリー,おしゃれ,可愛い" />
<title>おしゃれな雑貨屋さん</title>
</head>
<body>
<!--ボックス全体-->
<div id="wrapper">
<!--ヘッダー-->
  <div id="header">
    <h1>おしゃれな雑貨屋さん</h1>
    <ul>
      <li><a href="#">ホーム</a></li>
      <li><a href="#">会社概要</a></li>
      <li><a href="#">商品アイテム</a></li>
      <li><a href="#">F&amp;Q</a></li>
      <li><a href="#">お問い合わせ</a></li>
    </ul>
  </div>
  <!--ヘッダーここまで-->
  <hr />
  <!--サイドバー-->
  <div id="sidebar">
    <h2>新商品</h2>
    <dl>
      <dt>ぬいぐるみ</dt>
      <dd>手作りによるどこか暖かく可愛いぬいぐるみです</dd>
      <dt>チェアー</dt>
      <dd>カラフルなチェアーが勢ぞろい！お部屋を一気に明るくさせます。</dd>
      <dt>蚊取り線香置き</dt>
      <dd>どこか懐かしい置物です。レトロな感じだけどおしゃれでかわいい。</dd>
    </dl>
  </div>
  <!--サイドバーここまで-->
  <hr />
  <!--メイン-->
  <div id="main">
    <h2>はじめまして</h2>
    <p>ようこそおしゃれな雑貨屋さんへ雑貨は見てるだけでも楽しくなかには癒される雑貨も数多くあります。<br />
      懐かしい感じのカントリー調雑貨中心に販売しています。<br />
      毎日忙しい日々を送っているあなたのお部屋に、温かい雑貨がやさしくお出迎え<br />
      今日もぞくぞく新製品が入荷中です。</p>
    <hr />
    <h2>最新情報</h2>
    <dl>
      <dt>1月12日</dt>
      <dd>新製品が入荷しました。</dd>
      <dt>1月5日</dt>
      <dd>初商価格で全商品２割引。豪華福ぶくろもご用意してます。</dd>
      <dt>1月1日</dt>
      <dd>あけましておめでとうございます。今年もよろしくお願いいたします。</dd>
    </dl>
  </div>
  <!--メインここまで-->
  <hr />
  <!--フッター-->
  <div id="footer">
    <p><a href="#wrapper">このページのトップに戻る</a></p>
    <ul>
      <li><a href="#">サイトマップ</a></li>
      <li><a href="#">プライバシーポリシー</a></li>
    </ul>
    <address>
    Copyright おしゃれな雑貨屋さん All rights reserved
</address>
  </div>
  <!--フッターここまで-->
</div>
<!--ボックス全体ここまで-->
</body>
</html>

以上が基本設定になります次のLesson2ではスタイルシートを使いホームページを装飾していきます。