応用文書処理　7回目

Step 3:画像の準備と挿入

ホームページで使用する画像は以下の点に注意

• 著作権，肖像権：自分で作成したものでも注意。ウェブからのフリー素材も使用条件，利用規約に注意。
• サイズ：一般的なモニタは横が1400-2000ドット（第２PC室は1920x1080ドット）。表示するときに小さくするより元のデータを小さく （500KBを目安に）。
• ファイル名：英数半角
• 形式：JPEG（主に写真向け），GIF（主にイラスト向け），PNGのいずれか。BMP（ビットマップ）形式も使えるがファイルサイズが大きくなるので避ける。

Windows標準アクセサリのペイントでサイズ変更可能。変更前の素材となるデータはmatフォルダに，変更後の使用するデータはwebフォルダに。
画像の準備ができたら，Expression Web で 挿入 → 画像 → ファイルから

Expression Web4でも画像の編集が可能。表示 → ツールバー → 画像　で画像ツールバーを表示
編集後，html本体を保存すると，「埋め込みファイルの保存」のウィンドウがでるので，必ずファイル名を英数半角にしてwebフォルダに保存すること。　

Step 4:リンクの挿入

リンクを作成したい箇所（文字，画像）を選択し， 挿入 → ハイパーリンク もしくは右クリック → ハイパーリンク

ターゲットフレームの違い

• ページ標準：通常は_selfと同じ
• 同じフレーム（_self） ：現在のウィンドウ（またはフレーム）を書き換え
• 新しいウィンドウ（_blank）：新しいウィンドウを開いて表示
  ↑今回はこれらのいずれかを選択
• ページ全体（_top），親フレーム（ _parent） はフレームを使った場合の指定
• 自分で名前（別ウィンドウ）を指定することも可能

Step 5:細かいこといろいろ

• ページのタイトルは ファイル →プロパティ → 全般タブ → タイトル
• 背景色は ファイル → プロパティ → 書式設定 → 背景　（背景画像の指定もココで）
• 基本的にはフォントの指定はしない（閲覧側のPCに同じフォントがないと意味がない）
• たまにHTMLソースを表示して確認

Step 6:レイアウトいろいろ

• あまり細かいレイアウトはできない（閲覧側のウィンドウサイズ，フォントサイズが違うため）。スペースの入力で見た目を整えるのはダメ。
• 基本的には左右中央の配置とインデントで
• 番号や箇条書きといったリストも利用
  
  　　(左寄せ，中央，右寄せ，番号リスト，箇条書きリスト，インデント解除，インデント挿入）
  　
• テーブル（表）を使えば画像や文字の位置関係の保持が可能。枠線（ボーダー）のサイズを0にすれば表っぽく見えない。
  テーブル → テーブルの挿入 で作成，テーブル → テーブルのプロパティ などで修正

更新の流れ

1. Expression Web4 で編集
2. 共有ドライブ（Studentフォルダ内の自分の番号のフォルダ）に使用しているデータをコピー
   （Studentフォルダ内の一覧ページ index.html から確認可能になる）
3. 【教員側で】ウェブサーバにアップロード
   （この時点で，ネット上に公開され，どこからでも閲覧可能になる）

ページの確認

https://adp.2-d.jp/

から。画像が表示されない場合は

1. 使っている画像も共有ドライブの自分のフォルダにコピーしているか？
2. webフォルダに保存してから画像を挿入しているか？(HTMLのimgタグなどで確認）　→　文書内で一旦削除。webフォルダ内の画像を使用。
3. 画像ファイル名が日本語？　→　一旦削除。ファイル名を英数半角に変更してから使用。

7/8までに提出