6月の授業日記

＞home

6/6　テキストの修飾

改行と改段落を区別

改段落＝enter(P056)

前後と文脈の意味が違う区切りを明示する

• 前後に１行空行が入る

改行＝shift+enter(P057)

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

見出し（P058）

文章上での役割・機能

• WPでは記述者が役割に見合った表示効果を指定する
  • 判断は読者に委ねられる
• webでは役割（見出し1等）をタグで記す
  • ブラウザが役割を判断し見合った表示にする
  • 検索ロボット等読めなくても意味（機能）が伝わる

DWではプロパティインスペクタ＞フォーマットから見出しの強さ（1〜6）を選ぶ

水平揃え

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

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

リスト（P059）

同じ扱いを箇条書きにする場合など

• 頭にドットが付きインデントされ行間が狭くなりまとまる

プロパティインスペクタ＞リスト

解除するには＞もう一度リストボタン（enterキーを２回打つ）

番号付きリスト（P061）

箇条書きに順位がある場合番号を自動で振ってくれる

1. .頭に数字が付く

プロパティインスペクタ＞番号リスト

テキストインデント（P063）

箇条書きの中に階層がある場合右にインデントさせるとわかりやすい

プロパティインスペクタ＞テキストインデント

解除するには＞テキストインデント解除

きょうのひとこと

欠席・・・

6/13　画像の挿入

ページプロパティ（P044）

ページ全体に関する設定＞選択できないので修正メニューより

• 背景色
• 文字色

webページでの画像

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

1. 必要点数HTMLとは別にファイルとして用意
2. その画像がどこにあるのかを記述する

DWでの画像貼り付けの流れ

1. 画像の準備
   1. 必要なファイルをダウンロードフォルダ（web/DL）に保存
2. （DWでの）画像の挿入
   1. 挿入バー＞画像の挿入
   2. （コピーするようダイアログが出るのでOK）コピーの保存先（web/site/img）を指定
3. アップロード
   1. 貼り付けたページをアップロード＞依存ファイル（貼り付けられている画像）を含有にOK
   2. 必要な画像も正しい位置に一緒にアップロードされる

きょうのひとこと

今日は順調に授業についていけたので良かったです！

6/20　リンク

使用できる画像の種類（P019）

• 画像ファイルはサイズが大きく、ダウンロードに時間がかかるので圧縮（最適化）しサイズを軽量化したものを使用する

1. jpeg(ジェイペグ）
• 写真など色数の多いもの
2. gif（ジフ）
   • イラストなど色数の少ないもの
   • 背景を透過でき四角以外の形もできる

背景画像（P080）

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

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

サーバーでの特殊なファイル名（index.htmｌ）

• サーバーでファイルを開くためには正しいフォルダ名＋ファイル名を記述する必要がある
• ファイル名を省略してフォルダ名だけにすると（サーバーの設定により）
  • エラーメッセージ
  • フォルダの中のファイルすべてにリンクの張られたリストが見える（便利だがセキュリティに不安）
  • index.htm(html)というファイル名のファイルがあるとそれが自動的に開かれる
  • トップページはindexという名前にしておけばフォルダ名だけでアクセスできる

   

リンク

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

DWでのリンクの指定方法

• リンクさせたい部分をドラッグして選択しプロパティインスペクタ：リンク右の
  1. フォルダアイコンをクリックしファイルの参照ダイアログからリンクしたいファイルを指定（P086）
  2. ターゲットアイコンからドラッグしファイルパネルのリンクしたいファイルのアイコンを指定（P084）

   

きょうのひとこと

DWの操作のしやすさ、便利さをひしひしと感じる

6/27　リンク2

画像によるリンク（P085）

• 画像にリンクを張りたい場合（リンクボタンなど）画像を選択し同様にプロパティ インスペクタより設定
  • リンクとソースが並んでいるので間違えないようリンクから設定

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

• クラス一覧

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

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

メールリンク（P090）

お問い合わせは

• クリックすると送信先に記入したメールアドレスが入力された状態でメーラーが立ち上がる
• リンクテキストボックスにmailto:と入力しその後にメールアドレスを入力

イメージマップ（P098）

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

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

きょうのひとこと

イメージマップのやり方をずっと知りたかったので、今日授業で知れてよかったです。