この部分を作っていきます。ページ全体に中央寄せを指定しているので、画像を挿入し、テキストを打ち込むだけで完成します。

画像の挿入タグを打ち込んで、画像を挿入します。

widthは画像の幅、heightは高さです。きっちり合っていないと縦横の比率がずれて、崩れた状態で表示されてしまうので注意しましょう。

方法1：タグを打ち込む
画像の挿入タグはこちら。<img src="　まで打てば、Dreamweaverの入力補助ツールが現れて入力を助けてくれます。
<img src="画像ファイルのURL" width="400" height="50" alt="Welcome to My Homepage">

方法2：挿入ツールパレットを使う
Dreamweaver画面の右側にある、ツールパレットを使う方法もあります。アイコンをクリックすることで挿入したいものを選べるので、初心者の方にはこちらの方法がおすすめです。
青丸が画像ですね。

画像には、必ず代替文字を設定します。これはalt（オルト）ともいい、画像が表示されなかった場合に代わりに表示されたり、目の不自由な方などが使用する音読ブラウザで読み上げに使われたりします。
IEでは、画像にマウスを当てると表示されるテキストとなります。この機能はIEにしかないので、他のブラウザで閲覧する人もいることを考えて、あくまで補助的なテキストを入力しましょう。

Dreamweaver画面最下部のプロパティウインドウの中に「代替」という項目があります。ここに書き入れたテキストが代替文字となります。

画像を二つ、挿入しました。しかしこれでは単に横に並べただけとなります。
縦に並べてかつ少し隙間を空け、きれいな配置にしましょう。

pタグというのはパラグラフ、paragraphから来ています。
開始タグ<p>と、閉じタグ</p>の間に入る画像やテキストが一つのまとまり、段落である、と宣言することになります。

画像をどちらとも、pタグで囲みました。
二つともpタグの中に入れてしまうと「二つの画像は一緒のまとまり」だということになり、横にぴったり並んで表示されたままになりますので気をつけましょう。 縦の間隔を手っ取り早く空けるには、もう一つbrタグというものがあります。これは「改行タグ」で、breakから来ています。
brとpの違いは、一番簡単に言えば「空くスペースが違う」ということですが、詳しくは下図を参照して下さい。

この部分は全てテキストですが、心に残る旅を…の部分は他のテキストよりも大きく、太字になっていますよね。
これもcssで指定をします。

これぐらいのシンプルな指定なら他の場所にも使えそうなので、idではなくclass指定にしましょう。
後で何の指定だろう？　と悩まないように名前をfontにしました。そしてうっかり同じ名前をつけてしまわないように、末尾に01と番号を振っています。

pタグに、クラスを指定します。半角空けて（全角ではいけません）class、まで打ち込むと、Dreamweaver入力支援（下図の赤枠部分）が出てきます。ここでfont01を選択すれば完了です。

この部分はノーマルなテキストですね。クラス指定はせず「贅沢で〜信じています。」の文章を入力しましょう。

入力し終えたらタグを追加します。これも「心に残る旅を…」との間隔を空けたいと思いますので、pタグで囲みましょう。
pタグの中にbrを入れることもできます。適当な箇所で改行を入れて、読みやすいテキストにしましょう。

あいさつ文の最後に、線が入っています。これはhrタグといって、水平線です（horizonから来ています）。
下図の赤枠部分、これもbrタグと同じように、閉じタグのいらないタグですね。

下図で「お楽しみプレゼント」だけがピンクになっていますね。

コードは下図のようになります。pタグの中に、spanというタグが入っているのがポイントです。

<span></span>で囲まれた中は改行されないため、文中でピンポイントの強調をする時にとても便利です。

下図で番号順に並んでいるテキストは、番号つきリストというものです。

コードは下図のようになります。 <ol></ol>で囲まれた中がリストになり、<li></li>で囲まれた部分に番号が振られます。番号つきリストにすれば、自分で1.2.3....というようにテキストを打つ必要はありません。

リストの種類
リストには様々な種類と指定がありますが、最もよく使われる二種類のリストをご紹介します。

<ul> <li></li> </ul>	最もシンプルなリストです。 冒頭に「・」がつきます。
<ul> <li></li> </ul>	番号つきリストです。 冒頭に「半角数字.」がつきます。

下図の部分です。色分けしてあればどのコースがどんな内容で、いくらなのか非常に分かりやすいですね。

cssファイルに、それぞれのセルに指定するクラスを作りましょう。

htmlでは、コードは下図のようになります。
コース名と価格のセルにはnowrapというタグがついていますが、これは「このセルの中では改行をしません」という指定です（たとえば\100,000-という金額が途中で改行されたら、とても見づらいですよね）。
あまりにも長い文章などにnowrapをつけるとレイアウトの崩れにもつながりますので、多用はしないでおきましょう。

下図の部分です。びっくりマークが先頭についたリストを作ってみましょう。

まず、リストにつけるcssの指定を作成します。list-style-imageという指定が「このリストは先頭に画像がつきます」という宣言になります。
また、行間を適度に空けるため、line-height: 150%として、「行間は150％（1.5倍ですね）」と指定しています。

html上では下図のように指定をします。class="annnailist"と指定すれば完了、簡単ですね。

リストは<ul></ul>で一まとまりになります。<ul>の上と、</ul>の下にはスペースも空きます。
そして、<li></li>で区切られた部分が項目となります。
ulの中にliが入って一つのリスト、と覚えましょう。ulだけでも、liだけでもリストにはならないのです。

最後に、メールアドレスを明記します。
連絡先を分かりやすい場所に書き、いつでも問い合わせを受け付けられるようにしておくのは非常に重要です。

html上ではこのように表記します。
cssを使わず、adressタグを使用しています。これは住所や連絡先のためのタグで、IEなどのブラウザではイタリック（斜体）のフォントで表示されます。

テキストも打ち終えたら、最終チェックをして完成です。
altの入れ忘れや入力間違い、リンクのつけ間違いや、タグを消したつもりが残ってしまった「"」などに注意しましょう。

適当な場所に水平線を入れるなどして、まとまりのある見やすいページの作成を心がけて下さい。少しの工夫で、ページはぐっときれいになります。

今作り終えたindex.htmlと同じように色んなページを作り、どんどん自分のサイトを盛り上げていきましょう。

自分のホームページ制作にあたっては、文章・画像はじめ、色やレイアウトは自由に考えて、楽しみながら作成してください。
世の中のウェブ制作方法、制作ツールは様々にありますが、Dreamweaverは非常に優れた制作ツールです。たくさんのタグを打つほど、できることも増えて楽しさも増していきますよ。頑張って下さいね！