6月の授業日記

＞home　＞5月の授業日記

6/6　テキストの修飾

改行と改段落を区別

改段落=enter（P056）

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

• 前後に一行空行が入る

改行=shift+enter（P057）

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

見出し（P058）

文章上での役割・機能

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

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

水平揃え

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

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

リスト（P059）

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

• 頭にドットが付き行間が狭くなりまとまる

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

解除するにはenterキーを2回打つ

番号付きリスト（P061）

順位がある場合番号を自動で振ってくれる

• 頭に数字がつく

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

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

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

きょうのひとこと

意味合いが重要

6/13　画像の挿入

ページプロパティ（P044）

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

• 背景色
• 文字色

webページでの画像

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

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

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

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

6/20　リンク

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

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

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

画像の保存場所

PCへのダウンロード

• どこでもよい（授業ではDL）

ページで使用する画像

• site内
• ファイル数が多いのでimgに
• 間違えたらファイルパネルでimgにドラッグ（P043）（パスを書き換えてくれる）

画像のサイズ

小拡大縮小大

DW上でドラッグで画像の拡大・縮小

• 拡大＞画像が荒れる
• 縮小＞サイズは大きいままなので意味が無い

大きさを変えるには画像編集ソフト（Fireworks等）を使う

背景画像（P080）

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

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

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

サーバーでの特殊なファイル名

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

リンク

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

DWでのリンクの指定方法

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

画像によるリンク

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

きょうのひとこと

リンクが出来るとひと通りホームページの機能が整います

6/27　リンク2

相対パス

• リンクは記述するファイルからリンクしたいファイルまでどういう経路を辿るかを記述する＞相対パス
  • ＜profile.htmからコピーした記述
  • ＜正しい記述
• 階層（フォルダ）が違うと経路も違うのでコピペできない
• フォルダの移動はファイルパネルから移動しアラートに「更新」でDWが書き換えてくれる

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

• クラス一覧

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

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

絶対パス（URL）

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

• http://=インターネット経由で
• www.ochagaku.ne.jp/=マシン名
• 2013/web/00/=ルートからフォルダ名をすべて入れる

イメージマップ（P098）

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

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

メールリンク

お問い合わせは

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

きょうのひとこと

DWはリンクテキストボックスへの入力を自動でやってくれているようなものです