Dreamweaver 
       NvuKompoZer との違い
 
 このページでは、Nvu/KompoZer を代表して Nvu と記載。 
 
 
Dreamweaver MX2004でチェックした感想。環境や使い方にもよる。
Dreamweaverの利点
・CSSエディターを常時表示できるので操作が楽である。
・HTMLソース画面とデザイン画面(通常表示)を2段表示できる。デザイン画面にう打ち込むと、ソース画面のその部分連動して
 表示されるのでソースを確認しながら作成することができて便利である。
・CSS画面(要素一覧画面と各要素の詳細画面)を常時表示したまま
デザイン画面で作成ができる。
 広いモニターや、デュアルディスプレイを使えば非常に便利である。
・同期リロード機能がある。
Dreamweaverで表示したまま、別途でテキストエディターなどで書き換えた場合は、直ぐに、
 「このファイルは
Dreamweaver以外で修正されています。リロードしますか?」と聞いてくるので同期がとれる。
・CSS外部リンクファイルを画面上部のタブとして表示でき、切り替え表示できるので便利である。
 (
CSS外部リンクファイルは、CSS画面でファイル名をダブルクリックすれば開く)
・リンクは画面下に記入枠が常時表示されているので、そこに書くだけで、何もせずにリンクタグが付いてリンクされる。
・リンクや修飾文字の後や前で改行すると、リンクタグや修飾タグが切れるので、楽である。
日本語入力で、Nvuのような1字飛び越しの問題はないので日本語入力が楽である。
・CSS設定で、Nvuは問題がないが、KompoZerではたまに設定が消えるエラーがある。Dreamweaverでは当然であるが、
 このようなことはない。
・DTDはURLつきの
Transitional が入る。
Nvuとの違い
・<p>タグ付きが標準記入となっていて自動生成されるのでこの点は少し使いにくい。
 ただし
方便として、一度、段落なしにしてから、以後 Shift+Enter で改行していけば <p>タグは生成されない。
 <p>タグを「なし」にする場合は、その都度、下画面のフォーマットでなしにするか、メニューのテキスト>段落フォーマットで
 なしにするか、 Ctrl+ゼロでなしにする。 (ゼロはテンキーは不可)
 
 Nvuでは段落なしが標準で、段落なしのまま/有りのままどちらでも文章を打ち続けることができる。
 設定でも自動生成を止めることはできない。
 便法として
<p>タグを、強制リセット(何もない状態に強制的に設定する。この場合は上下のマージンをゼロにする。)方法
 もある。その場合
<p>タグに各種設定をしたい場合は、外側を<div>ボックスで囲みその従属として設定した方がよい。
 ただし、<div>タグの挿入も少しめんどうである。
・divタグの挿入が面倒。デザイン画面(通常画面)からは事実上無理。方法としては、ソース画面から、<div>と打てば、
 残りの</div>が入る。又は、挿入>タグ 又はCtrl+E で HTMLタグ>div>OK>閉じるでも入るが更に面倒。
<div>を打ち込んだ後にID要素やclass要素を割り当てるのが面倒。テキスト画面からは右クリック>CSSスタイル。
 
デザイン画面からは、何か文字を打ち込んでから、ステータスバーの<div>を右クリックで選ぶ。複数ある場合はこれを
 繰り返さなければならない。
・KomposZereのように<div>ボックスの赤の点線表示が出てこない。
 KompoZerでは、DIVタグのボックス線が(テーブルと同様に)表示されるので便利である。
・#aaaaaa p や、.bbbb li のように間にスペースが入る要素名はCSS画面からだと作成できず拒否される。
 この場合はソース画面から打ち込まなければならない。 ソース画面を絶えずいじらなければならない。
 Nvuはソース画面は殆どいじらないでできる。ソース画面をいじると改行コードやスペースなどによってブラウザで表示
 した時のエラー(IE,とFirefoxの違いによるもの)が起きやすい。
画面の構成や操作がやや複雑。
機能が多いためサブ画面が多く、開け閉じがわずらわしい。
・作成スピードならNvuの方がシンプルで速い場合もあるが、Dreamweaverの方は関連処理を同時にしてくれるので
 結果的には、
Dreamweaverの方が速い場合もある。
・起動と終了に時間がかかる。
・あるタグの範囲だけを(NvuのInsert画面のように)別画面で見られない。
・ブラウザに表示されている他のページからコピーしてくると、タグ付きで張付かない場合がある。
 便利な面も不便な面もある。
・CSS要素を新規設定するには、右のCSS画面を右クリックで新規作成。編集、コピーもCSS画面を右クリック。
 但し、空で設定することはできない。必ず何か一つ打ち込む必要がある。この点は不便。
・プレビューで、ボーダーの2重線が1本になる。→ブラウザでチェックが必要。
・デザイン(通常表示)画面でCSSでクラス設定した背景色が切れる場合がある。→図参照
・他のページで作ったものを Dreamweaverで編集すると、問題が起きる場合がある。
・CSSファイルを外に吐き出すには、CSS画面の該当部を右クリック>書き出し。リンクする場合は、貼付。
・日本語の再変換ができない
。(環境によるかもしれない。)
・<html lang="ja">は自動的にはいらないので入れたい場合は追加する必要がある。
・<big><small>はプレビューでは無視される。他で作ったページを編集する場合には注意。
・テーブルの桁数を変えるには、
枠線をマウスで直接移動して変える。Nvuでは上のバーで変える。
・NvuのプレビューはNetscape系であるが、Dreamweaverでは別途Firefoxでのチェックが必要。
・KompoZerでは、ステータスバーでは、タグの IDやCLASS名も表示され、マウスカーソルを当てると
 属性が表示され、Inline Stylesが1画面で開く。

 
 
Dreamweaver 使い方: Nvu との違い
 HTML、CSS、プラウザなどの問題は、Nvu/KompoZerと同様の注意が必要なので、Nve/KompoZerの使い方のページを参照。
 以下にNvuとの違いを記載する。 

下図はCSSエディターを表示させた画面である。かなり広い面積のモニターが必要になる。


下図は、右サイドの、CSSエディタと、上のソース画面と、下の画面を閉じて、本文だけの表示にした画面である。
文字サイズは、編集>環境設定>フォントで、中サイズにした。

 
下図は新規CSS要素を追加しているところである。右クリックでもできるし、右のCSSスタイル画面の下の小さなアイコンからでもできる。

 
下図は、CSS要素を新規追加する時に開く入力画面である。何か一つ設定しないと、追加されない。名前だけの空要素では追加できない。



下図は、Dreamweaverで誤表示される例である。CSS定義でクラス要素の背景をはり padding で広げているだけで
あるが、白い線が入って表示される。
                    
 
最初の設定
インストール後の設定
デフォルトの拡張子が「 htm 」になっているので、これを「 html 」に設定する。
   C:\Program Files\Macromedia\Dreamweaver MX 2004\Configuration\DocumentTypes\MMDocumentTypes.xml
   の3行目と4行目のextension=の順位で「html」をトップに上げる。
    例:  <documenttype id="HTML" internaltype="HTML" winfileextension="html,htm,shtml,shtm,stm,tpl,lasso,xhtml"
      macfileextension="html,htm,shtml,shtm,tpl,lasso,xhtml" file="Default.html" writebyteordermark="false">

編集/環境設定 
 一般
  次の2項目のチェックをOFFにする。
    「スタートページの表示」 = OFF
    「起動時にドキュメントを開く」 = OFF
  次の1項目のチェックを好みにより OFF にする。
    「<b>と<i>の代わりに<strong>と<em>を使用」 = OFF
     * 本来ならCSS的記載で、< span style="font-weight: bold;">あ</span> <span style="font-style: italic;">あ</span> と
       すべきだが、そうならないので、古い書き方のままでOFFとする。(<strong>と<em>は別に使う場合もあ る)
       後でテキストエディターで一括変換することもできる。
  他の項目のチェックをONにする。
      「HTMLタグの代わりにCSSを使用」 = ON
      他はデフォルトのままの ON でもよい。
 CSSスタイルシート 
  CSSスタイル作成時:ショートハンドを使用の5項目全てのチェックを ON にする。
  既存のCSSスタイル編集時:
ショートハンドを使用の3項目のチェックを次のようにする。
    
オリジナルで使用している場合 = ON
    他はデフォルトのままでよい。
    「上記のチェックボックスに合わせる」 = OFF、
    「修正時にCSSファイルを開く」 = ON
 コードの書き換え
  「&#を使用してURLの特殊文字をエンコード」 = ON にして、
  「特殊文字をエンコードしない。」 = OFF にする。
  他の項目のチェックは OFF
 コードフォーマット
   デフォルトのままでよい。
     例:「インデント使用」のチェックを ONにする。
● フォント
  表示するフォントサイズを指定する。
  日本語の場合、全部、12(中)にすればブラウザ閲覧時と同じ 文字サイズで表示される。
 ブラウザプレビューでFirefoxを追加。
 新規ドキュメント
   「エンコーディング初期設定」 = 日本語(シフトJIS)に設定 
   「Unicode Signature(BOM)を含める」 = OFF
   「Ctrl+Nで新規ドキュメント・・・・」 = ON
   「ドキュメントをXHTMLに準拠させる = OFF
  
画面の設定

画面下のプロパティボックスでの設定
● いじらなくてよい。
   好みによりMac用フォントを好みの順序に変更することもできる。
   例 下部のプロパティウインドウでフォントを開き、一番下のフォントリストの編集をクリックする。
       開くボックスで一番上の「MS Pゴシック,Osaka,ヒラギノ角ゴ Pro W3」を選ぶ
      その下の選択されたフォント中のOsakaを選択し >> を押して
削除
      フォントの下の下の欄にOsakaと入力し << を押す。
      「MS P明朝,細明朝体,ヒラギノ明朝 Pro W3」も同様にして、細明朝体を平成明朝の下にする。

全体の画面の設定
 「ウィンドウ」で「挿入」と「プロパティー」と「CSSスタイル」のチェックをONにする。
 表示/ツールバー/で挿入・ドキュメント・標準の全部のチェックをONにする。
 画面下のステータスバーは▼印を押して「プロパティ」を押せばオン/オフする。
 親子(MDI)画面になっているので、子画面は右上のボタンを押して広げておく。
 ウィンドウ(または表示)/パネルの表示 をクリックして、右のパネル類で使わない物は非表示にしておく。
 ツールバーの、コード(HTMLソース)、分割(上下2段表示)、デザイン画面(通常表示)で、画面表示方法を選ぶ。
  通常は分割画面にしておくとよい。

CSSスタイル画面(CSSエディター)の表示
●ウィンドウ>CSSスタイルで「CSSスタイル画面」を表示させておく。
ウィンドウ外の単独画面になる場合は、画面の左上の【▼CSSスタイル】の左の::マークをドラッグして右端に持っていけば右に並ぶ。
逆に同じところをつかんで外に出せば単独画面となる。
この画面の下のバーの4つの小さなアイコンで、
  1 外部CSSファイルの読み込み(貼付) 2 IDやクラスの新規追加 3 編集  4 削除 ができる。

新規HTMLファイルとCSSファイルの作成
 ファイル/新規作成 [Ctrl+n] で開くウィンドウで/基本ページ/HTMLまたはCSS/作成/

   

内容作成上の注意点

● 文章書きは<P>タグが自動生成され、NvuのようにBody Textボタンを押し下げたまま書き続けることはできない。
 Enterキーを押すと次の段落<P>が生成される。
 ただし方便として、一度、段落なしにしてから、以後 Shift+Enter で改行していけば <p>タグは生成されない。
● 前の<P>タグのまま<br>で改行して続けたい場合は、Shift+Enter キーで改行する。<br>が入る。
 日本語の場合は、エンターキーで変換したらすぐにシフトキーを押して再度エンターキーを押す。
 その時カーソルは前に移動してくれないのでやりにくい。

スタイルシートでの定義方法
● CSSエディターを右に表示しておいて、その画面の下の小さなアイコンから新規設定する。
   または、テキスト/CSS スタイルシート/新規 で設定してもよい。
   または、右クリック又は、下画面のプロパティーの中の
スタイルボックスをクリックし、開く選択支の中のからスタイルの管理を選び
   新規または編集で設定する。
● 新規設定で、セレクタのところに名前aaaaを書いて、クラス設定はクラスにチェック。.
  h2,h3,などのHTMLタグに設定する場合はタグにチェック。ID設定は、IDのところに#bbbbなどと書く
● CSSで設定したクラスを使用する場合は、下画面のスタイルから選ぶ。画面下のステータスバーから選んでもよい。
● <DIV>タグ挿入は、上のバーでレイアウトをクリックして、左から2番目のアイコンでボックスを開いて、IDかクラスを選んで記入する。
● タグ挿入は 挿入>タグ_HTMLタグで設定
● CSS タグを抜く方法: クラスの場合は下の画面のスタイルで「なし」を選ぶ。
   画面下のステータスバーのタグを右クリックして削除してもよい。

表関係
● テーブルのデザイン用の点線=ビジュアルエイド の非表示は、表示/ビジュアルエイド/全て非表示で、ON/OFF
● マウスドラッグで表の中に表やセルを書き込むことができる。
  2段目のツールバーの左端の「挿入」ボタン/レイアウト/レイアウト/
  /レイアウトテーブルマークまたはレイアウトセル描画のボタンを押す。
● 通常の表作成は、2段目のツールバーの左端の「挿入」ボタン/レイアウト/標準モードに設定しておく。
● 通常の表作成は、標準モードに設定されている時に可能となる。
● テーブルの桁数を変えるには、枠線をマウスで直接移動させて変える。
● テーブルの桁操作 バーは、表示/テープルモードで行う。

表の仕様変更
● 表の縦線をクリックすると、下のステータスバーに入力ボックスがでる。
● 表の色設定はその中の背景G ボーダーRの横の灰色のを押す。
● 背景画像は、背景Gの横のボックスにファイル名を打ち込む。

文字装飾関係
● 文字の色   下のステータスバーのサイズの横の灰色のを押す。
  


 2005.03.07-2008.08.05