Dreamweaverの使い方

背景画像の変更

ページプロパティボタンから背景画像を設定する事もできます。背景画像を設定すると背景画像と背景色が重なった所では背景画像が優先して表示されます。HTMLでもCSSでも設定可能ですがCSSの方が優先されます。なお、繰り返しオプションはCSSでしか設定できません。

外観（HTML）で設定

まずは外観(HTML)で設定してみます。プロパティインスペクタ下段のページプロパティボタンを押します。カテゴリで外観（HTML）を選択します。背景イメージを参照ボタンを押して選びます。適用ボタンを押すと画面にイメージが縦方向にも横方向にも敷き詰められます。

外観（CSS）で設定

ページプロパティボタンを押してカテゴリで外観（CSS）を選択します。背景イメージを設定します。適用ボタンを押すとHTMLより優先されて背景イメージが敷き詰められます。CSSでは繰り返し方向を設定する事もできます。no-repeatにすると画面左上に一つだけ表示されます。repeat-xにすると横方向に繰り返されます。repeat-yにすると縦方向、repeatにすると縦にも横にも繰り返されます。デフォルトはrepeatです。

設定してもうまく反映されない時

CSSとHTMLで両方とも設定したり設定を取り消したりしているうちに切り替わらなくなってきた時はコードを見て、いらないコードを削除すると変更が反映されるようになる事があります。

広告

関連コンテンツ

背景色の変更

とにかく簡単に背景色を変えてみたいという場合、プロパティインスペクタのページプロパティでの設定が楽です。divタグを使った高度なレイアウトを使う時は、外部CSSを編集し背景色をはじめとして細かく設定するのですが、単純な構造のページですぐに結果を見たい時には、ページプロパティなら結果をすぐに見られます。

ページプロパティでの設定

コードビューかデザインビューなら、文字の所にカーソルを置いたりすると、プロパティインスペクタの下の方にページプロパティというボタンが表示されているはずです。押してみましょう。カテゴリに外観(CSS)と外観(HTML)のどちらかお好きな方を選んでください。HTMLの方なら「背景」、CSSの方なら「背景色」の四角をクリックすると色を選択できるウィンドウが表示されるのでその中から選ぶ事ができます。右側のテキストボックスに色の数字を１６進数表示で入力する事もできます。ここでCSSとHTMLの違いですが、CSSにすると<title>タグの下あたりに背景色のCSSコードが埋め込まれます。
HTMLにするとbodyタグの中に埋め込まれます。両方同時に設定したらCSSが優先されました。

色の選び方はいろいろ

色選択のウィンドウは色の並び順や色数など切り替える事ができます。右上の丸い印のシステムカラーではWindows標準の色選択ダイアログが表示され、１６７７万色の中から選ぶ事ができます。右上角の三角形を押して連続したトーンを選択すると色の並び順が変わり、別の見た目から選べるようになっています。

ページの容量を見るには

ページのサイズは小さい方が読み込みにかかる時間が少なくなるのでユーザビリティの上で有利です。最近では検索エンジンがページの読み込み速度をサイトの評価の指標の一つとして扱うようにもなりました。ページのサイズはステータスバーの表示される事になっていますがページを読み込んだ直後では正しく表示していない場合もあるので、そんな時に表示する方法をこれから書いていきます。

正しく表示されない場合とは

HTMLファイルを開く時は、ファイルパネルでHTHLファイルをダブルクリックしてドキュメントウィンドウに表示する事が多いと思います。初めて読み込んだ時にはステータスバーのページサイズの概要表示の所に1K/1秒のように表示される事が多いでしょう。これはページサイズが約1KBですという表示です。ある程度の大きさを持った画像ファイルを含んでいる時にはその数字が少なすぎるとわかります。

正しく表示する方法

画面表示をすこしいじると正しい表示になる場合が多いです。例えばステータスバーで、手のひらツールボタンをクリックし、すぐに選択ツールボタンをクリックするといった操作です。そんな事をしなくても編集作業を行っていると自然と正しい表示になる事も多いのでそんなに気にする事でもないのですが、急ぎの時はこんな方法もあるという事で書きました。

プロパティインスペクタとは

プロパティインスペクタを使うと、コードビューや各種ダイアログを使うより直感的にオブジェクトのプロパティを設定する事ができます。

プロパティインスペクタの場所

プロパティインスペクタは横長のパネルで画面左下にあります。

選択したオブジェクトの属性を設定

プロパティインスペクタで設定できるのはデザインビュー、コードビュー、タグセレクタ等で選択している文字列、画像、テーブルなどのオブジェクトの属性（プロパティ）です。

オブジェクトにより設定できるプロパティは異なる

選択したオブジェクトにより設定できるプロパティは変わります。
例
文字列→見出し・リンク・リスト等
画像→幅・高さ・リンク・代替文字・マップ等
テーブル→行数・列数・幅・セル等

プロパティインスペクタが表示されない時

プロパティインスペクタは「ウィンドウ」-「プロパティ」と選択すると表示される事になっています。
しかし、それでも表示されない場合はタイトルバーでワークスペースの設定を切り替えてみましょう。パネル配置設定を初期化して表示されると思います。

設定したいプロパティがすぐ見つかった時

まだDreamweaverを使い始めた所なので、プロパティインスペクタに設定したい属性がすぐ見つかるとうれしくなります。これこそがプロパティインスペクタの醍醐味でしょう。CSSの設定もできますが、数をこなしていないので一番素早くできる方法は、これからも探索する日々が続くでしょう。