Lesson4 HTMLのマークアップ

Deamweaver演習DreamweaverCC対応

HTMLのマークアップLesson4

文字の入力 デザインビューに切り替えて文字の入力をします。

クリッククリック

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

分割ビュー 分割ビューではコードビューとデザインビューの両方を表示することができます。

クリック

pタグが付いている1行目、 2行目それぞれに pタグが付いていることを確認します。

プロパティインスペクタの表示 プロパティインスペクタを表示し、見出しや箇条書きを設定しましょう。 ［ウィンドウ］メニュー→プロパティ

プロパティインスペクタの表示位置プロパティインスペクタのパネルが表示されたら、表示位置を調整しましょう。画面最下部にドッキングするのがおすすめです。

プロパティインスペクタの表示 ＜参考＞［プロパティインスペクタ］パネルのドッキング

プロパティにマウスポインタを合わせて、画面最下部までドラッグ。このとき、最下部でドッキングを示すブルーのラインが出たらマウスの指を離します。

ドッキングを示すブルーのライン

ドッキングされた状態

見出しの設定 1行目のどこかにカーソルを移動 プロパティインスペクタの［フォーマット］を［見出し 1］に設定

h1タグ見出し 1を設定した 1行目には h1タグが付きます。

箇条書きの設定 次のように 3行を入力し、箇条書きを設定します。

①3行をドラッグして選択

②クリック

コードビュー コードビューで直接 HTMLを編集することができます。 コードヒント機能でタグ名や属性名をすべてタイプしなくても入力ができます。

<st　と入力するとコードヒントが表示されるタグ名の途中まで入力をすると、コードヒントが表示されます。入力したいタグ名を青く反転させて Enterキーを押すと、タグを入力できます。同様に属性名やその値の入力もコードヒントを利用できます。

Enter

</　と入力するだけで終了タグが入力できる終了タグを入力するときは「 </」と入力すると、タグ名が自動入力され終了タグを入力できます。

コードビュー コードビューで次のように入力をしましょう。

クリック

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

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

クリック

ページタイトルの指定 プロパティインスペクタの［タイトル］で指定します。

titleタグページタイトルに入力した文字列は titleタグに反映されます。

画像の挿入 ［挿入］メニュー→［イメージ］ ピクチャフォルダ内の任意の画像を挿入しましょう。

クリックし、 Enter

新しい行にカーソルが移動したことを確認

画像の挿入

画像の挿入

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