6月の授業日記

6/6 テキストの粉飾

改段落=enter(P22)

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

前後に1行空行が入る

改行＝shift+enter(P23)

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

水平揃え

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

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

ワープロ＞記述者が役割に見合った見栄えを設定

• 読者が視覚的に判断

WEB＞役割(見出し等)をタグで記す

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

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

見出し

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

リスト

リスト

• 同じ扱いのものをリスト化(箇条書き)

番号リスト

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

インデント

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

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

ページプロパティ

• ページ全体にわたる設定(背景・文字色等)
• 選択できないので修正メニュー＞ページプロパティより

きょうのひとこと

がんばります

6/9　画像の挿入

webページの画像

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

1. HTML書類とは別に別ファイルとして必要点数用意
• ダウンロードフォルダ(web/DL)に保存
2. その画像がどこにあるかを記述し表示させる（＋正しい場所に画像をコピー）
• 挿入＞イメージ(コピー元(web/DL)を指定)
3. ページのファイルと同様にサーバーに転送

画像の保存場所

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

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

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

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

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

きょうのひとこと

先生とっても分かりやすいです。

見た感じgifのがすき。

6/23　リンク2

相対パス

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

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

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

• クラス一覧
• お茶の水スクールオブビジネス

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

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

絶対パス

http://www.ochasuku.ac.jp/2014/web/01/diary/6.gtm

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

• http://=インターネット経由で
• ochasuku.ac.jp/=PC(サーバー)名
• 2014/web/01/diary/6.gtm=ルートからフォルダ名をすべて入れる

よく見るページBEST3

1. google
2. リクナビ
3. マイナビ

イメージマップ

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

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

今日のひとこと

試験心配