home

6月の授業日記

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 リンク o(`・ω´・+o)

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

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

背景画像(Page 080)

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

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

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

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

リンク

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

DWでのリンクの指定方法

リンクさせたい部分をドラッグして選択し プロパティインスペクタ : リンク右の ・・・

    フォルダアイコンをクリックしファイルの参照ダイアログからリンクしたいファイルを指定。(Page 086)

    ターゲットアイコンからドラッグしファイルパネルのリンクしたいファイルのアイコンを指定。(Page 084)

〜*〜*〜*〜*今日の一言〜*〜*〜*〜

やっと見た目を意識できるような設定を覚えた。

思った通りに設定できるのが楽しい。

でもイマイチ機能を覚えきれていないので、復習が必要だと思いました。


6/27 リンク part2 v(`・ω´・+o)

画像によるリンク(Page 085)

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

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

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

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

メールリンク(Page 090)

お問い合わせは・・・vvV

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

イメージマップ(Page 098)

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

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

〜*〜*〜*〜今日の一言〜*〜*〜*〜*〜

いろいろ直してみた。

トップページの編集?の仕方など振り返りも含めて行ってみましたがイマイチよく分からない。

読み返した時に理解できない部分があったりしたので、復習不足??

自分でも思ったことを書き足していこうかなと思いました。