6月の授業日記

＞home　＞5月の授業日記

6/6　テキストの修飾

改行と改段落

改段落＝enter(P22)

前後と文脈の意味が違う段落を区切る

• 前後に1行空行が入る

改行＝shift+enter(P23)

同じ段落内で単に改行だけしたい場合

水平揃え

行単位では行えず段落単位

プロパティインスペクタの中央揃え・右揃えなどのアイコンをクリック

段落の役割の定義＝構造定義

wp>記述者が見合った見栄えを設定

• 読者が視覚的に判断

web>役割（見出し等）をタグで記す

• ブラウザが役割を判断し見合った表示効果を与える
• 読めなくても意味が通じる（検索エンジン視覚障害者等）

webページ＝文章を役割（構造）に分けて目印（タグ）をつけて定義（=HTML）してページを作成

見出し

見出しの強さに応じて1〜6

リスト

• リスト

• 同じ扱いのものをリスト化

• 番号リスト

• 順位があるものに自動で番号が振れる

インデント

項目の解説など補完する項目をインデントさせる

プロパティインスペクタから役割にあった定義方法を指定する

ページプロパティ

• ページ全体に渡る設定（背景・文字色等）を行う
• 選択できないので修正メニュー＞ページプロパティより

きょうのひとこと

役割を考えながら文章を構成しましょう

6/9　画像の挿入

webページでの画像

ページに画像は埋め込めない＝コピペできない

1. ＨＴＭＬ書類とは別に必要点数別ファイルとして用意
• ダウンロードフォルダ（web/DL）に保存
2. その画像がどこにあるかを記述する（+正しい場所に書類をコピー）
   • 挿入＞イメージ（コピー元（web/ＤＬ）を指定）
   • コピー先を指定（web/site/img）
3. ページのファイルと同様にサーバーに転送
   • 依存ファイルを含有

画像の保存場所

ＤＷでサーバーに転送されるのはweb/site以下のみ

• web/ＤＬ/
  • 転送されない＞使わないものもとりあえずここに保存
• web/site/img/
  • 転送される＞使うものを挿入時にここへコピー

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

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

1. jpeg(ジェイペグ)
• 画像を劣化させて軽量化する
• 写真など色数の多いもの
• 背景は透過できないので四角い
2. gif(ジフ)
   • 画像の色数を減らして軽量化する
   • 背景を透過できるものもあり四角以外の形もできる
   • 動かすことのできるアニメgifもある

6/16　リンク

画像のサイズ

アイコンサイズ画像拡大

大サイズ画像縮小

画像を選択しドラッグすれば拡大・縮小ができるが

• 拡大＞画像があれる
• 縮小＞ファイルサイズは大きいままで意味がない

画像の拡大・縮小をするには画像編集ソフトを使う（Fireworks等）

＊貼り付けられた同じ画像であればこぴぺはできる

背景画像

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

• ページのサイズはブラウザの状態により可変するので完全に合わせることはできない
• 小さい画像（軽い）をタイル状に繰り返してページいっぱいに表示させる

この画像を背景に配置する

リンク

• クリックするだけで指定したページが開ける
• リンクがある部分のテキストはリンクカラー（ページプロパティで設定）となりアンダーラインが引かれる

DWでのリンクの指定方法

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

画像によるリンク

画像にも以下のような設定でリンクが張れリンクボタンなどが作れる

• 画像を選択しプロパティインスペクタよりリンク指定
• ソースとリンクがならんでいるので間違えないようリンクから指定
• 画像をコピーした場合リンクも一緒にコピーされる

6/23　リンク2

相対パス

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

• ＜このページ上部からのコピー
• ＜pfof.htmからのコピー
• 階層（フォルダ）が違うと経路も違うのでコピペできない
• フォルダを移動すると書き換える必要があるがＤＷのファイルパネルで移動しアラーとに「更新」で書き換えてくれる

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

• クラス一覧

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

• ＵＲＬを直接入力＞アドレスバーからコピー
• プロパティインスペクタ：リンクのテキストボックスにペースト

絶対パス（ＵＲＬ）

http://ochagaku.sakura.ne.jp/2014/web/tc/6.htm

アクセス方法://やPC名/フォルダ名/ファイル名をすべて記述したもの

• http://=インターネット経由で
• ochagaku.sakura.ne.jp/=PC（サーバー）名
• 2014/web/tc/6.htm＝ルートからフォルダ名をすべて入れる

イメージマップ（Ｐ128）

1枚の画像の中に複数のエリアを描きそれぞれに異なるリンク先を設定し複数のリンクが張れる

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