6月の授業日記*゜

home

6月
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30

6/6 テキストの修飾

改行と改段落を区別

改段落 = enter  (Page 056参照)

前後と文脈の意味が違う区切りを明示する。
?前後に1行空行が入る。

改行 = shift + enter  (Page 057参照)

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

見出し (Page 058 参照)

文章上での役割・機能。
?WP(ワープロ)では記述者が役割に見合った表示効果を指定する。 ?判断は読者に委ねられる。

?webでは役割(見出し1等)をタグで記す。 ?ブラウザが役割を判断し、見合った表示にする。
?検索ロボット等、読めなくても意味(機能)が伝わる。


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

水平揃え

行単位では行えず、段落単位で行う。

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

リスト (Page 059 参照)

同じ扱いを箇条書きにする場合などに使われる。
?頭にドットが付き、インデントされ行間が狭くなりまとまる。

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

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

番号付きリスト (page 061 参照)

箇条書きに順位がある場合、番号を自動で振ってくれる。
1.頭に数字が付く。

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

テキストインデント (page 063 参照)


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

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

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


6/13 画像の挿入

ページプロパティ(page 044)

ページ全体に関する設定 > 選択できないので修正メニューより
?背景色
?文字色

webページでの画像

特徴=ページに画像は埋め込めない
1.必要点数HTMLとは別にファイルとして用意。
2.その画像がどこにあるかを記述する。

DWでの画像貼り付けの流れ
1.画像の準備 1.必要なファイルをダウンロードフォルダ(web/DL)に保存。 ※ 「/」=の中の

2.(DWでの)画像の挿入 1.挿入バー > 画像の挿入
2.(コピーするようダイアログが出るのでOK)コピーの保存先(web/site/img)を指定。

3.アップロード 1.貼り付けたページをアップロード > 依存ファイル(貼り付けられている画像)を含有にOK
※依存ファイルをNOにしてしまうと貼り付けられている画像以外のものだけアップロードされる。
2.必要な画像も正しい位置に一緒にアップロードされる。


6月20日 リンク

使用できる画像の種類(p19)

  • 画像ファイルはサイズが大きく、ダウンロードに時間がかかるので圧縮(最適化)サイズを軽量化したものを使用する
  1. jpeg(ジェイペグ)
    • 写真など色数の多いもの
  2. gif(ジフ)
    • イラストなど色数の少ないもの
    • 背景を透過でき四角以外の形もできる

背景画像(P080)

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

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

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

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

リンク

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

DMでのリンクの指定方法

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

きょうのひとこと

休まないでわからないところがないようにしたいです。

自分のホームページを装飾したり制作するのがとても楽しいです。


6月27日 リンク2

画像によるリンク(P085)

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

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

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

  • URLを直接入力〉アドレスバーからコピー
  • プロパティインスペクタ:リンクテキストボックスにペースト
  • クリックすると送信先に記入したメールアドレスが入力された状態でメーラーが立ち上がる
  • リンクテキストボックスにmailto:と入力しそのあとにメールアドレスを記入

イメージマップ(P098)

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

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

きょうのひとこと

わたしはあまりサイトをはじめから作成したりする経験が不足していたため、

ここまでサイトを作成する側が作っているということがわかるとともに作り方を教わりとても役立ちました。

わたしも自分のパソコンを持っていますがいろいろな機能を使いこなせてないと思っていたため頑張って知識を増やし活かしていきたいです。