第6回目
日 時：2012年12月25日 9:30～12:00
場 所：団交室Ⅰ Ⅱ
出席者：受講者 24名、HPWG 7名
講 師：河野美智代
内 容：第5章：画像を入れてみる
- 使える画像形式
Webページを作成する際によく使われるGIF形式、JPEG形式、PNG形式について説明があった。 - 画像取扱いの注意点
- 表示させるサイズにリサイズしておく
- 予めサイト内の画像用フォルダに保存しておく
- 他人のwebサイトから画像を借用する場合は著作権に配慮する
- 素材集から挿入した場合は、ファイル名および保存場所に注意する
- 原則として画像には代替テキストを指定する
- ビルダーを起動して、サイトを開き、HTMLの新規作成する。
- 文章を入力する（今回は入力の手間を省くためサイトからコピペした）。
- 編集画面で全体を選択し、メニューバーの挿入から「レイアウトコンテナー」クリックする（全体がdivで括られる）。
- 画面右側の「スタイルエクスプレス」ビューの「カーソルの位置」タブで「div」を右クリックし、「ルールの新規作成」をクリックする。
- 現れたルールの追加ダイアログで「ID」を選択し、「container」と入力し、「OK」ボタンをクリックする。
- 現れたスタイルの設定ダイアログの「位置」タブで幅を640pxに、「レイアウト」タブでマージンを自動に設定し、OK」ボタンをクリックする（全体が幅640pxとなり中央に配置される）。
- 1行目を選択状態にし、書式ツールバーの「段落の挿入/変更」ボタンから「見出し１」を選択する。（１行目がh1タグで括られる）。
- h1に設定した文字列「画像の挿入」の下にカーソルを置き、画面左側のナビメニューの「写真や画像の挿入」ボタンをクリックする。
- 「素材集から」を選択し、「イラスト」の「動物」の中から「img_i006」を選び「開く」ボタンをクリックする。
- 本文の前に挿入さた犬の画像を右クリックし、「属性の変更」をクリックする。
- 現れた属性のダイアログで「代替テキスト」欄に「いぬ」と入力する。
- 引き続き「タイトル」タブをクリックし、 タイトル欄にマウスが乗ったとき表す説明の用語を入力する。
- 画像をクリックし、スタイルシートマネージャーを起動する。
- 「追加」ボタンをクリックし、HTMLタグ名が「img」になっていることを確認し、「位置」タブをクリックする。
- 属性で回り込み「右」を選択し、「OK」「OK」をクリックする。
- 最終段落（3番目のｐ）にカーソルを置き、画面右側の「スタイルエクスプレス」ビューの「カーソルの位置」タブで「p」を右クリックし、「ルールの新規作成」をクリックする。
- 現れたルールの追加ダイアログで「ID」を選択し、「kaijo」と入力し、「OK」ボタンをクリックする。
- 現れたスタイルの設定ダイアログの「位置」タブで、属性で回り込みの解除「両方」を指定して「OK」ボタンをクリックする。
- h1タグについて「文字列のレイアウト」から中央揃えにする。
- bodyタグについて「行の高さ」を1.5倍に設定する。
- 「TOPへ戻る」のリンク処理を行う。
- 右側に回り込ませた画像の左側に間隔を開けるため、画像の左方向マージンを、下側は下方向マージンで設定する。
- ファイルから「名前をつけて保存」を選択し、ファイル名を「text2.html」として、「text」フォルダーに、画像は適当なファイル名（例えばdog.gif）を付け「images」に保存する。
- 保存が終了したら、このページを閉じ、「top.html」を開き、リストの「メニュー４」を「画像の挿入」に書き換え、リンクを設定する。
最終的に本日のCSSの設定は下表のとおりとした。
| body | 行の高さ | 1.5 |
| #container | 幅 | 640px |
| マージン | 自動 | |
| h1 | 水平方向の位置 | 中央揃え |
| img | 回り込み | 右 |
| 左方向マージン | 20px | |
| 下方向マージン | 20px | |
| #kaijo | 回り込み解除 | 両方 |