5月の授業日記

5/9　画像の挿入

webページでの画像

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

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

画像の保存場所

めぼしいものを保存＞web/素材

• 使うかどうかわからないものはとりあえずここへDL
• 編集用画像などもここへ

使用する画像＞web/site/img

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

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

背景画像

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

• ページのサイズは可変できるので完全に合わせることはできない
• 小さい画像（軽い）をタイル状に繰り返してページ全体に表示させる
• この画像を背景として設定する

webで使用できる画像の種類（拡張子の違い）

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

gif=画像の色数を減らして軽量化する

• 色数の少ないイラスト・ボタン等
• 背景を透過させて四角以外にすることもできる

jpeg=画像を劣化させて軽量化する

• 写真などの色数のおおいもの
• 背景は透過できないので四角い

きょうのひとこと

画像やイラストでサイトを飾り付けたり、それに合う配色を考えるのはやっぱり楽しいです。

5/16　リンク

トップページの特別な名前（index.htm）

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

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

リンク

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

自分のページでのリンク

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

DWでのリンク方法

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

リンクカラー

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

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

画像のリンク

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

パス（経路）のコピーペースト

• リンクやイメージはそのファイルへの経路（パス）が記述されている
• フォルダが違うと行き方が異なるのでコピーできない

きょうのひとこと

ページとページがリンクでつながり、一段とHPらしくなったと思います。

5/23　さまざまなリンク

相対パス

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

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

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

• クラス一覧
• 自分のよく見るページ

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

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

絶対パス（URL）

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

アクセス方法://サーバー名/フォルダ階層/ファイル名

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

ページ内リンク

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

• 5/23
• 5/16
• 5/9

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

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

メールリンク

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

お問い合わせは

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

イメージマップ

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

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

きょうのひとこと

ページ内リンクなど便利な機能が自分でも設定できるようになって良かったです。

5/30　テーブル

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

DWでのテーブルの作成方法

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

テ−ブルの用語

５月のカレンダー

△このページにトップに戻る