「Dreamweaverの編集画面」と
「WEB上にアップロードした時の公開URLの表示」と
が異なる場合、
何度もブラウザで実際のURLを表示して、
何度もDreamweaverの編集画面に戻って修正するのは
かなり不便で、問題箇所を見つけるにも時間がかかります。
専用の検証ツールを使えばその過程が楽になります。
最新のバージョンのMac対応ブラウザでは、「要素の検証」「webkit」などの名前で
そのような検証ツールの機能が標準で付いています。
教室のMacはバージョンが古いため、最新のブラウザをインストールする事ができませんが
Firefox3.6.28をインストールする事ができ、
Firefox3.6.28には検証可能なアドオン「Firebug」を追加する事ができます。
ここからFirefox3.6.28(旧バージョン)をダウンロード
アプリケーションフォルダに入れる
Firefoxを起動しFirebugのアドオンを入れる
https://addons.mozilla.org/ja/firefox/addon/firebug/
上のURLをFirefoxで開く[+Firefoxに追加]をクリック
[今すぐインストール]をクリック
Firefoxを再起動
ブラウザの右下に虫のアイコンが出てくる
虫をクリックすると
そのページのコードが折り畳んで表示される。
コードの上にマウスをのせると
その部分が色付きで表示される
マージン＝黄色 余白(padding)=紫 そのdivなどのボックスの本体=水色
画面下の
左半分=そのページのHTML
右半分=左で今選択しているdivなどのボックスのCSS
例えば、本文の文字色は#333333ですが、(=body の color : #333333)
仮に赤に変えた時の様子を見たい場合
赤文字の部分を書き換える事ができます。
例えば、#333333を#ff0000に書き換えてみました。
本文の文字が赤い文字に変わっています。
同じように
枠の横幅や縦幅を変えた場合の様子を見る事ができます。
(あくまでコードを変更した場合の様子を見るためのプレビューです)
新しくcssの項目を追加する事もできます。
その設定が気に入ったら
普通の文字のようにコピーする事もできます。
コピーしたものをDreamweaverで同じファイルの同じCSSの項目にペーストすると
ブラウザで表示して様子をみた時のそのままのデザインの状態でネット上に公開されます。