6月の授業日記

＞home

6/6　テキストの修飾

改行と改段落の区別

改段落＝enter(p56)

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

• 前後に1行空行が入る

改行＝shift＋enter(p57)

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

見出し(p58)

文章上での役割・機能

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

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

水平揃え

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

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

リスト(p59)

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

• 頭にドットが付きインデントされた行間が狭く

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

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

番号付きリスト(p61)

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

1. 頭に数字がつく

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

テキストインデント(p63)

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

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

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

今日のひとこと

　難しいー

6/13　画像の挿入

ページプロパティ(p44)

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

• 背景色
• 文字色

webページでの画像

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

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

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

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

今日のひとこと

風邪が流行っています。

気を付けましょう((+_+))

6/20 リンク

使用出来る画像の種類(p19)

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

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

    

背景画像(p80)

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

• ページのサイズはブラウザの状態により可変するので
• 小さい画像(軽い)をタイル状に繰り返してページいっぱいに表示される
• 

サーバーでの特殊なファイル名(index.html)

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

リンク

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

DWでのリンクの指定方法

• リンクさせたい部分をドラッグして選択し
  1. フォルダアイコンをクリックし、ファイルの参照ダイアログからリンクしたいファイルを指定(p96)
  2. ターゲットアイコンからドラッグし、ファイルパネルのリンクしたいファイルのアイコンを指定(p84)

今日のひとこと

画像張ったりするのは楽しいですね〜！

6/27　リンク2

画像によるリンク(p185)

• 画像にリンクを張りたい場合(リンクボタンなど)画像を選択します
  • リンクとソースが並んでいい、

   

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

• クラス一覧

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

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

メールリンク(p90)

お問い合わせは

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

イメージマップ(p98)

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

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

今日のひとこと

めっちゃ眠たかったけど頑張った！