マークアップをして行こう-Dreamweaver

dreamweaver6

それでは次に大見出し<h1>と中見出し<h2>を設定してきます。各タグの設定は見出しに変えたい文字の所をクリックして下のほうにある(プロパティ)-(フォーマット)のメニューから選んで設定できます。ちなみに見出し1が大見出しで一番大きい文字になり2,3,4,5,6の順番で小さくなります。
おしゃれな雑貨屋さんを<h1>に新商品、はじめまして、最新情報を<h2>にしてみます。

リストを設定する

ホーム~お問い合わせまでをドラッグして選択します。(プロパティ)-(リスト)をクリックするとリストが設定できます。同様にサイトマップ~プライバシーポリシーも設定しておきます。

定義リストを設定する

ぬいぐるみ~レトロな感じだけどおしゃれでかわいい。までをドラッグして選び、右側にある(挿入)-(テキスト)-(dl)をクリックして定義リストに設定します。同様に1月12日~今年もよろしくお願いいたします。までも設定しておきます。

アドレスの設定をする

作成者情報などは通常アドレス(address)タグを使い設定するのが一般的です。Copyright おしゃれな雑貨屋さん All rights reservedの適当な場所をクリックしてCtrl+Tを2回押すとCopyright おしゃれな雑貨屋さん All rights reservedの部分が選択され(タグの編集)の部分の(p)を削除しaddressタグを選択してEnterキー2回を押します。

ここまでのコードは下記のようになってます。

<!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>
<h1>おしゃれな雑貨屋さん</h1>
<ul>
  <li>ホーム</li>
  <li>会社概要</li>
  <li>商品アイテム</li>
  <li>F&amp;Q</li>
  <li>お問い合わせ</li>
</ul>
<hr />
<h2>新商品</h2>
<dl>
  <dt>ぬいぐるみ</dt>
  <dd>手作りによるどこか暖かく可愛いぬいぐるみです</dd>
  <dt>チェアー</dt>
  <dd>カラフルなチェアーが勢ぞろい!お部屋を一気に明るくさせます。</dd>
  <dt>蚊取り線香置き</dt>
  <dd>どこか懐かしい置物です。レトロな感じだけどおしゃれでかわいい。</dd>
</dl>
<hr />
<h2>はじめまして</h2>
<p>ようこそおしゃれな雑貨屋さんへ雑貨は見てるだけでも楽しくなかには癒される雑貨も数多くあります。<br />
  懐かしい感じのカントリー調雑貨中心に販売しています。<br />
  毎日忙しい日々を送っているあなたのお部屋に、温かい雑貨がやさしくお出迎え<br />
  今日もぞくぞく新製品が入荷中です。</p>
<hr />
<h2>最新情報</h2>
<dl>
  <dt>1月12日</dt>
  <dd>新製品が入荷しました。</dd>
  <dt>1月5日</dt>
  <dd>初商価格で全商品2割引。豪華福ぶくろもご用意してます。</dd>
  <dt>1月1日</dt>
  <dd>あけましておめでとうございます。今年もよろしくお願いいたします。</dd>
</dl>
<hr />
<p>このページのトップに戻る</p>
<ul>
  <li>サイトマップ</li>
  <li>プライバシーポリシー</li>
</ul>
<address>
Copyright おしゃれな雑貨屋さん All rights reserved
</address>
</body>
</html>

それでは次にリンクの設定をしていきます。

最終更新日: 2013年3月5日

  • このエントリーをはてなブックマークに追加
  • にほんブログ村 IT技術ブログ WordPressへ
  • ameba
  • addthis
  • Clip to Evernote

マークアップをして行こう-Dreamweaverの関連記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*