DreamweaverCC演習 Lesson4 HTMLのマークアップです。

1. DreamweaverCC対応

2. Lesson4

3.  デザインビューに切り替えて文字の入力をします。
クリック
クリック
段落と改行
1行目「レインボー動物園・東京」と入力をしたら、
Enterキーを押して2行目に新しい段落を作成します。
すなわち<p>タグを挿入すると考えてください。
段落内で改行をするときはShift+Enterキーを使用します。
<br>タグを挿入すると考えてください。

4.  分割ビューではコードビューとデザインビューの両方を表示することができます。
クリック
pタグが付いている
1行目、2行目それぞれにpタグが付いていることを確認
します。

5.  プロパティインスペクタを表示し、見出しや箇条書きを設定しましょう。
 ［ウィンドウ］メニュー→プロパティ
プロパティインスペクタの表示位置
プロパティインスペクタのパネルが表示されたら、表示
位置を調整しましょう。
画面最下部にドッキングするのがおすすめです。

6.  ＜参考＞［プロパティインスペクタ］パネルのドッキング
プロパティにマウスポインタを合わせて、画面最下部
までドラッグ。
このとき、最下部でドッキングを示すブルーのライン
が出たらマウスの指を離します。
ドッキングを示すブルーのライン
ドッキングされた状態

7.  1行目のどこかにカーソルを移動
 プロパティインスペクタの［フォーマット］を［見出し1］に設定
h1タグ
見出し1を設定した1行目にはh1タグが付きます。

8.  次のように3行を入力し、箇条書きを設定します。
①3行をドラッグして選択
②クリック

9.  コードビューで直接HTMLを編集することができます。
 コードヒント機能でタグ名や属性名をすべてタイプしなくても入力ができます。
<st と入力するとコードヒントが表示される
タグ名の途中まで入力をすると、コードヒントが表示さ
れます。入力したいタグ名を青く反転させてEnterキーを
押すと、タグを入力できます。
同様に属性名やその値の入力もコードヒントを利用でき
ます。
Enter
</ と入力するだけで終了タグが入力できる
終了タグを入力するときは「</」と入力すると、タグ名
が自動入力され終了タグを入力できます。

10.  コードビューで次のように入力をしましょう。
クリック
コードビューでの編集をデザインビューに反映
コードビューで編集した内容をデザインビューに反映させる
ためにプロパティインスペクタの［更新］をクリックします。

11.  デザインビューとブラウザーの表示は必ずしも同じではありません。ブラウザーでど
のように表示されるかを確認しましょう。
 ［ブラウザーでプレビュー］→任意のブラウザーを選択
クリック

12.  プロパティインスペクタの［タイトル］で指定します。
titleタグ
ページタイトルに入力した文字列はtitleタグに反映されます。

13.  ［挿入］メニュー→［イメージ］
 ピクチャフォルダ内の任意の画像を挿入しましょう。
クリックし、Enter
新しい行にカーソルが移動したことを確認

15. 挿入した画像ファイルの保存先
ページ内に挿入した画像は「images」フォルダ
内に自動的に保存されます。
サイト定義でデフォルトのイメージフォルダーと
して「images」フォルダを指定したためです。