【環境設定】入門！Dreamweaver使い方講座

入門！Dreamweaver使い方講座 >> 環境設定

このページでは、Dreamweaverでの皆様のWEB製作ライフが快適になるような環境設定を紹介します。

拡張子変更
Dreamweaver（MX 2004）では、新規ドキュメント（新しいページ）を作成すると、拡張子は「.htm」になっています。まずはこれを「.html」に変更します。MX 2004以前のバージョンでは、環境設定画面から直接変更が可能になっていますが、このバージョンではそれができません。なので直接それを指定しているファイルを書き換えます。
インストール時に、特に何も指定をしなければCドライブにデータが入ってると思います。ここではこの方向で話を進めていきます。
  1. まずCドライブを開きます。
  2. 次にそこにある[Program Files]を開きます。
  3. そこに[Macromedia]というフォルダがあるはずなので開いてください。
  4. [Dreamweaver MX 2004]フォルダを開いてください。
  5. その中の[Configuration]を開いてください。
  6. その中の[DocumentTypes]を開いてください。
  7. MMDocumentTypes.xmlというファイルがあるはずです。これを適当なアプリケーション（ワードパッド、メモ帳など）で開きます。
  8. 上から三行目に「・・・winfileextension="htm,html,shtml,shtm,stm,tpl,lasso,xhtml"・・・」があるはずです。これを「・・・winfileextension="html,htm,shtml,shtm,stm,tpl,lasso,xhtml"・・・」と書き直します。もう一つ、その右側にある「・・・macfileextension="htm,html,shtml,shtm,tpl,lasso,xhtml"・・・」も「・・・macfileextension="html,htm,shtml,shtm,tpl,lasso,xhtml"・・・」と、書き直します。わかりにくかったでしょうか？簡単に言うと、ここには拡張子の優先順位が書かれてるわけです。左から右へ行くにしたがって優先度が下がっていきます。なので、「htm」と「html」の順位を入れ替えてあげればいいのです。
  9. このファイルを上書き保存し、Dreamweaverを起動しなおすと、デフォルトの拡張子が「html」になってることが確認できます。

【新規ドキュメント、デフォルト拡張子を変更する】 - 入門！Dreamweaver使い方講座

新規ページのデフォルトソースの変更
新規ページを作成したとき、デフォルトで書かれている文があります。これはDreamweaverに最初から登録されているソースです。この時点ですでに間違った文法で記述されているので、これを正しく書き直す必要があります。
初期状態ではこう記述されています。
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd ">
<html>
<head>  
<title>無題ドキュメント</title>
<meta http-equiv="Content-Type" content="text/html; charset=">
</head>
<body>
</body> 
</html>

これを正しく、そして不備を補う為に書き換えます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>無題ドキュメント</title>
<meta name="description" content="">
<meta name="keywords" content="">
</head>
<body>
</body>
</html>

こんな感じに書き換えます。手順を以下に。

  1. 一度説明している部分は簡単に説明します。
    [Cドライブ/Program Files/Macromedia/Dreamweaver MX 2004/Configuration/DocumentTypes]まで行きます。
  2. ここのフォルダの[NewDocuments]を開きます。
  3. この中にある「Default.html」をDreamweaver又は、適当なエディタで開きます。
  4. そのソースを上記の正しいものに書き換えてください。
  5. めんどくさい方はそのままコピペしてください。
最低限の環境設定
ここからは最低限しておいたほうがいい環境設定について説明します。
まず、[Ctrl+u]又は、上部のメニューバーから編集→環境設定で環境設定を開いてください。
カテゴリの中から一般を選びます。ここはほとんどデフォルトのままで構いませんが、快適な製作のために「ヒストリステップの最大数」を増やしてあげましょう。これはアンドゥできる回数です。私はあまり考えずに適当に500と入れました。まずここまで戻ることはないでしょうが。皆さんは好きな数値を入力してください。しかし、あまり多くの数値を入力すると、ロースペックなマシンでは動作が重くなるかもしれません。ご注意ください。それと、「<b>と<i>の代わりに<strong>と<em>を使用」にチェック、「HTMLタグの代わりにCSSを使用」にチェックを入れてください。ここにチェックを入れる意味は、貴方が自由に作れるときになっていれば、そのときにはすでにわかっているはずです。
【環境設定一般カテゴリ】 - 入門！Dreamweaver使い方講座
次にカテゴリからCSSスタイルシートを選択します。CSSスタイル作成時、ショートハンドを使用とあります。デフォルトではたしかチェックが入ってなかったはずです。ここのチェックボックスすべてにチェックを入れてください。ここについては以上です。
【環境設定CSSスタイルシートカテゴリ】 - 入門！Dreamweaver使い方講座
コードの書き換えについてです。「ペーストするときにフォームアイテムの名前を変更」のチェックを外してください。詳しい説明はいずれ。ただこれのせいでバグが起きるとだけ言っておきましょう。
【環境設定コードの書き換えカテゴリ】 - 入門！Dreamweaver使い方講座
次にカテゴリからコードフォーマットを選択してください。インデント使用のチェックボックスにチェックを入れてください。その隣のボックスをスペースからタブに変更してください。インデントを使用することによって、ソースのブロックが見やすくなります。もしどこかのページを修正しようとして、Dreamweaverで開いたとき、ソースが左揃えだった場合は、上部メニューバーのコマンドからソースフォーマットの適用で、一括でインデントを挿入できます。その反対に、インデント付きのページをすべて左揃えにしたいときは、環境設定でインデントの使用チェックを外し、ソースフォーマットの適用をすることによってインデントを削除できます。
【環境設定コードフォーマットカテゴリ】 - 入門！Dreamweaver使い方講座
これは重要です。ブラウザでプレビュー。デフォルトではMicrosoft InternetExplorer（以降MSIE）しか登録されていません。しかし、HTMLやCSSを組んでいくのに、それだけではいけません。なぜなら、特にCSSはまだまだ各ブラウザの対応が違うため、MSIEで表示できるからと安心はできません。しかも、MSIEでは文法違反、若しくは著しい不備があるソースでも普通に表示されます。なのでCSSを正しく解釈できるブラウザでプレビューする癖をつけましょう。
と言っても、やはり一般的には、Mozilla系（Mozilla、Netscape、Firefoxなど）、Opera、safari、macIE、winIEなどで確認をとります。忠告ですが、macIEは崩れ方が尋常ではないのでご注意ください。
近年アクセシビリティが重要視されるようになってきました。テキストブラウザで確認してみるのもいいかもしれません。テキストブラウザではLynxが有名です。ちなみに、テキストブラウザで表示されている画面と、ロボットが読むときの画面はほぼ同じだといわれています。SEO上の参考になるかもしれません。話は戻りますが、windowsの方はmacIE、safariでの確認はできませんが、最低限Mozilla系のブラウザをインストールすることをお勧めいたします。
ブラウザをインストールしたら環境設定のブラウザでプレビューカテゴリを開き、右にあるプラスマークをクリックして登録しましょう。これによりDreamweaverから簡単に目的のブラウザでプレビュー確認ができます。
【環境設定ブラウザでプレビューカテゴリ】 - 入門！Dreamweaver使い方講座
ツールバー
Dreamweaverには直接的な関係はありませんが、製作していく上で便利なツールバーを紹介します。
winIE&Firefox用googleToolbar
winIE用YAHOOToolbar
どれも便利なもので、私はとても重宝させてもらっています。もちろんこれだけではなくまだ紹介したいツールバーがあります。それは別ページでご紹介いたしましょう。
フォントについて
Dreamweaverのフォントリストは初期状態では決して最適化されてるとは言えません。特にmac環境には適していません。例えば、Dreamweaver初期設定でフォントを指定すると、あるパソコンで閲覧する際に、指定されたフォントより高品質のフォントがあっても、それに劣る品質のフォントが使われることになります。これを手動で修正する必要があります。
まずは適当に新規HTMLページを作成してください。そしてデザインビューをアクティブにし、下部のプロパティウインドウを見てください。
【Dreamweaverフォント】 - 入門！Dreamweaver使い方講座
プロパティの下にフォーマットとフォントがあります。このフォントを開き、一番下のフォントリストの編集をクリックしてください。
するとこのような画面になります。
【Dreamweaverフォントリストの編集】 - 入門！Dreamweaver使い方講座
一番上の「MS Pゴシック,Osaka,ヒラギノ角ゴ Pro W3」を選びます。その下の選択されたフォント中のOsakaを選択し、右にある[>>]を押してください。これでこのフォントリストからOsakaが削除されました。目的は優先順位を変えるだけなので、もう一度Osakaを指定してやる必要があります。選択可能なフォントの下の下の欄に、Osakaと入力し[<<]を押してください。これでまず一つ目はOKです。
もう一つは最初に選んだフォントリストの下の「MS P明朝,細明朝体,ヒラギノ明朝 Pro W3」です。これを選択し、前と同様に細明朝体を選択し、[>>]。選択可能なフォントの下の下の欄に平成明朝と入力し、[<<]をクリック。そしてOKボタンを押してください。これでフォントリストの編集は終わりです。