5月の授業日記

5/9　画像の挿入

webページでの画像

ページに画像は埋め込めない

1. HTML書類とは別に画像ファイルを必要点数用意
• 素材フォルダへDL
2. 表示する位置にタグで画像の保存場所・ファイル名を記述（正しい場所にコピー）
• 挿入＞イメージ（コピー元指定）(素材)
• 保存先を指定(site/img)
3. HTML書類とともにサーバーへ転送

画像の保存場所

転送しない画像＞ web/素材

• 使うかどうかわからないものはとりあえずここへDL
• 編集用のファイルなどもここへ

転送する画像＞web/site/img

• 画像はファイルサイズが大きいので使用するものだけ
• 転送できるフォルダはweb/site内のみ

同じ画像は同一ページ内でコピペできる

webで使用できる画像の種類

画像ファイルはサイズが大きいので以下の方法で圧縮（最適化）し、軽くしたものを使用する

gif

• 画像の色数を減らして軽量化する
• 色数の少ないイラスト・ボタン等
• 背景を投下させて四角以外にすることもできる
• 動かすことのできるアニメgifもある

JPEG

• 画像を劣化させて軽量化する
• 写真などの色数の多いもの
• 背景は透過できないので四角い

背景画像

ページの背景には画像を敷き詰めることもできる＞ページプロパティ

• ページのサイズは可変できるので完全に合わせることはできない
• 小さい画像（軽い）をタイル上に繰り返してページ全体に表示させる
• 縦長横長のものはCSS前提なので正方形のものを選ぶ
• この画像を背景として設置する

5/16　リンク

トップページの特別な名前(index.htm)

自分のページ（サーバ）http://ochagaku.sakura.ne.jp/2016/web/tc/

• ファイル一覧リストが表示されクリックするとすべてのファイルを閲覧できる
• ここにindex.htmという名前のファイルを置くとそのページが替わりに表示される
• リンクできなくなるんで自分で見せたいページヘリンクを張る

リンク

• クリックするだけで指定したページが開ける
• リンクが有る部分のテキストはアンダーライン・カーソル・リンクカラーで識別される

自分のページでのリンク

• トップページ
• 4月の授業日記

DWでのリンク方法

• リンクさせたい部分をドラッグして選択し、プロパティインスペクタ＞リンク右の
  • フォルダアイコンをクリックし参照ダイアログからリンクしたいファイルを選択
  • ターゲットアイコンからファイルパネルのリンクしたいファイルのアイコンまでドラッグして指定
• プロパティインスペクタのリンク欄にリンクしたいファイルまでの経路（パス）が記述されリンクできるようになる
• リンクの確認はDWでは行えないのでブラウザでプレビュー

リンクカラー

リンクからーはページプロパティより設定

• リンク＝未訪問時のリンクカラー
• 訪問済みリンク＝訪問したことがあるリンク先のカラー
• アクティブリンク＝クリック時のカラー

画像のリンク

• 画像にリンクさせる場合は画像を選択し、プロパティインスペクタより
• 画像をコピペするとリンクごとコピペされる（同じ階層のみ）

5/23　さまざまなリンク

相対パス

リンクでは記述しているファイルからリンクしたいファイルまでどういう経路をたどるのかを記述する

• ＜4.htmよりコピー
• ＜homeからコピー
• ファイルが保存されている場所(フォルダ)がちがうと、リンクしたいファイルへの経路も違うのでコピペ出来ない
• 保存場所やファイル名を変えるとこの経路も書き換える必要がある＞DWのファイルパネルから変更すればアラートから更新で書き換えてくれる

インターネット上のファイルへのリンク

• クラス一覧

ファイルパネルやファイルの参照は使えない

• URLを直接入力
  • アドレス欄からコピーし
  • プロパティインスペクタのリンク欄にペースト

絶対パス(URL)

http://ochagaku.sakura.ne.jp/2016/web/tc/diary/5.htm

アクセス方法：//サーバー名/フォルダ階層/ファイル名をすべて記述したもの

• http://=インターネット経由で
• ochagaku.sakura.ne.jp=サーバー名
• 2016/web/tc/diary/5.htm＝ルートからフォルダ名をすべて記述し最後にファイルを指定

ページ内リンク

ページ内の指定した場所にスクロールするリンク

• ５/9
• 5/16

DWでのページ内リンクの設定方法

1. ファイルではないのでファイル名がないため代わりとなる名前（＝アンカーポイント）を英数半角でつける
   • 挿入＞アンカーポイント
2. リンクさせたい部分を選択しターゲットアイコンからアンカーポイントへドラッグしてリンクしてい
3. アンカーポイントが見えない時は先にスクロール

メールリンク

クリックするとメーラーが指定したアドレスを宛先にした状態で立ち上がるリンク

おといあわせは

• テキストの場合＝挿入＞電子メールリンク
• 画像の場合＝リンクテキストボックスに mailto:メールアドレス

イメージマップ

１枚の画像の中に複数のエリアを描画しそれぞれに異なるリンクを張れる

1. 画像を選択し、プロパティインスペクタ左下のマップ部分より矩形・円形・多角形でエリアを描画
2. 選択ツールでエリアを選択するとそれぞれごとに独立したリンクが貼れる
3. エリアを区別する色はDWでは見えない

5/30　テーブル

エクセルのセル・ワードの表のようなものをページに挿入し、レイアウトにも用いる

DWでのテーブルの作成法

• 挿入＞テーブル
• 行・列・幅を最初に設定
• セルのサイズは内容に応じて自動で伸縮（指定しなければ）

テーブルの用語

５月のカレンダー