Dreamweaverの機能について

質問

WEBの製作でアドビ社の「GoLive」を使用しています。将来、マクロメディアの「Dreamweaver」も使用したいと考えております。「Dreamweaver」に「GoLive」の「レイアウトグリッド」みたいな機能はあるのでしょうか？（ページ上にテキストやフレームを自由に配置できるみたいな）あと、最近のオーサリングソフトは「ムーバブルタイプ」にも対応しているのでしょうか？

回答No.4

s_hukami · ベストアンサー

すみません。
「Dreamweaver」の長所・短所、使い勝手についてですが、No.3で書いた通り私が使用しているのはMXです。
簡単に箇条書きで私が思っていることを書きます。

長所について
・それについて説明しているサイトや書籍は少ないが、テンプレート機能（特にネストできる点）が、コンテンツの多いノンフレームサイトを制作・運営する場合に非常に重宝する。
・ホームページビルダーなどと比べてソースがきれい。（ただしレイヤーを使用する場合は注意が必要。多用すると、コードが読みにくくなるため、CSSとHTMLは切り分けた方が、後々管理が楽だと思う）
・Fireworks,Flashなどとの連携

短所について
・起動に時間がかかる。
・動作が重い。
・検索・置換に少々時間がかかる。
・CSSに完全対応しているとは言い難く、コード入力することも多い。
・XML,XLTなどに対応していない（8では対応しているらしい）。
・いくつかのJavaScriptが利用できるが、数が少ない。
・結局手打ちは必要だが、Dreamweaverのコードビューで入力すると支援機能があるが、タグ打ちなどに慣れている場合は動作が重いのでテキストエディタでやった方が断然早い。
・残念ながら、細かく解説されたサイトも書籍も現時点ではあまりない。特にテンプレート機能については、解説が少ない。本家サイトの情報が一番役立つかも。
・とにかく値段が高い。

です。

私はいつもCSSでサイトをデザインする時は、マス目のあるプロジェクトシートやその代替えになるようなノートなどにおおまかなデザインを描き、サイズや余白などをメモしてから実際のサイトを作ります。
頭が悪いのでいつも電卓片手に、足し算・引き算しています。じゃないと、時折計算間違いしてしまって、レイアウトが崩れてしまうので。

8にはボックスに適用されたmarginやpaddingが視覚的にわかる機能があるらしいので、TABLEでレイアウトした時と同様にデザインビューモードで調整できそうです。

また、8では複数のメディア向けに指定したCSSをメディア毎の表示に切り替えられるようです。

しかし、私自身はあと数年はMXを使用しようと思っています。買って一年ちょっとなので。

お礼

ありがとうございます。参考になりました。やっぱり自分で使ってみないと具体的な使用感は分からないですよね。「Dreamweaver」のほうが「GoLive」にくらべてユーザー数が多いので今後の利用を考えています。

回答No.3

s_hukami

私がテキストエディタからDreamweaverに切り替えた理由は、Dreamweaverのテンプレート機能を利用するためです。（とはいえ補助的にテキストエディタを使用していますが）

マクロメディアのテクニカルノートの中にDreamweaver MX でネストされたテンプレートを作成する手順を記したページがありましたので、下記にURLを書きます。
[Macromedia > サポート > Dreamweaver > Dreamweaver MX でネストされたテンプレートを作成する]
http://www.macromedia.com/jp/support/dreamweaver/ts/documents/dw0386.html

「ネスト」は「nest」、つまり「入れ子」のことです。
上記はベースとなるテンプレートを利用して更に新たなテンプレートを作る手順についての説明ページです。
このネストされたテンプレートを作成する機能を利用すると、例えば同一サイトのカテゴリ別のテンプレートなどを作成することが可能です。
重複部分は元になっているテンプレートを編集することで、ネストされたテンプレートも更新できます。

高価なソフトなので、購入する前に、トライアル版をDLして試用した方がよろしいのではないかと思います。
買ったけど使わないという例もネット上で時折目にするので。

私が持っているのはMX 2004なので、最新版（8）についての詳細は確認していないのですが、Macromediaのサイトを見る限りでは、どうやらCSSの（プレビュー）表示機能などが強化されたらしく、印刷・モバイル用のCSSなどの表示もできるようなったようです。
ただし、現在拡張機能がDLできるのはMX用のものばかりのようです。
Dreamweaver 8についてのレビューが、画像つきで下記のサイトで連載されています。
まだ途中ですが、参考になるのではと思うので、以下にURLを記述します。
[T-SUDIO]
http://www.t-studio.com/

回答No.2

s_hukami

No.1です。補足します。

この場合の「レイヤー」はどちらかというと、 Netscapeの<layers>タグのような機能を、<div>タグとCSSで表現するものだと思います。
しかし、レイヤーの重ね順を変更する際は、おっしゃるとおり、Photoshopのような要領で変更できます。
右側に表示されている「レイヤー」パネルで、重ね順を変更したいレイヤーを選択してドラッグし、移動させることで、重ね順を変更できます。
が、その他に、レイヤーパネルやプロパティインスペクタなどで数値を直接入力することでも重ね順を変更することができます。
グリッドを表示することができるので、レイヤーの表示位置を指定する場合に、グリッドに吸着させることもできます（事前にグリッドを表示する必要があります）。

また、書き漏れてしまいましたが、「レイヤーを描く」場合には、「デザインビュー」（視覚的に作業を行うモードです）で作業を行います。

重なる順序は「x-index」で指定できます。
表示位置が重なっている場合には、「x-index: 1;」のレイヤーは「x-index: 2;」の下に表示されます。
そのため、「x-index: 1;」で指定されたテキストや画像・背景などは、「x-index: 2;」で指定されたテキストや画像・背景がない部分が表示されます。

「デザインビュー」で作業する際には、自動的にDreamweaverが書き換えてくれるため、「x-index」についてはそれほど悩まなくても良いかもしれません。
しかし、頭に入れておけば、コードビューで作業する際にわかりやすいのではないかと思います。

もっとも、実際に「デザインビュー」でテストしてみたところ、Dreamweaverはレイヤー同士が重ならないように、先においたレイヤーの周囲にしか2つめのレイヤーをおけませんでした。
何故かと思ったら右側に表示されている「レイヤー」パネルの「オーバーラップ防止」にチェックが入っていたためです。
このチェックを外すと、複数のレイヤーの表示位置を重ねることができます。

お礼

ありがとうございます。「テンプレート」を作成してそれを他のページに適用することも容易でしょうか？（同じレイアウトのページを一つずつ作成するのは面倒ですよね）あと、主観で構わないので、商用サイトを作成する場合（製作会社として行う場合）の「Dreamweaver」の長所・短所、使い勝ってなどがあれば教えて下さい。

回答No.1

s_hukami

「GoLive」は使用したことがないので「レイアウトグリッド」がどういう機能かは知りませんが、Dreamweaverでレイヤーで文字や画像などをレイアウトする場合は以下のような手順になります。

1)「レイアウトモード」で「レイヤーを描く」を選択して、表示したい位置に、マウスでドラッグしてレイヤーを描きます。

2)中にテキストや画像などを挿入します。画像は右側にファイルの内容を表示している状態や、挿入したい画像が保存されているフォルダを表示した状態でのドラッグ&ドロップでも挿入可能です。

3)レイヤーは内容を記述した後で、マウス操作で表示位置や大きさが変更可能です。

4)デフォルトではレイヤーのID名は「Layer1」などになりますが、レイヤーを選択している状態で、Windows OSの場合は右クリックして「ID」を選択すると、ID名を変更可能です。また、別の方法でID名を変更する場合には右側に表示される「デザイン」→「レイヤー」などでも変更可能です。

しかし、上記の方法でレイヤーを作成した場合、
<div id="infor" style="position:absolute; left:325px; top:65px; width:278px; height:259px; z-index:1">あいうえお</div>
などのようなコードになるので、
「position:absolute; left:325px; top:65px; width:278px; height:259px; z-index:1"」の部分を外部CSSなどに
#infor {
position:absolute; left:325px; top:65px; width:278px; height:259px; z-index:1
}
などと記述して、HTML本体には
<div id="infor">あいうえお</div>
などとする方がスマートではないかと思います。

また、以下のページでMovable Type 3（以下MTと省略） 用の拡張機能がダウンロードできます。

http://www.macromedia.com/cfusion/exchange/index.cfm

しかし、上記についての注意ですが、この拡張機能はMTテンプレートタグに熟知していないと少々使いづらい機能です。
コードビューでタグを入力する際に、MTテンプレートタグの最初の何文字かを入力すると、候補のタグがリストで表示されるので、その中から選択して入力することが可能です。
通常のタグの属性同様、MTテンプレートタグの属性の入力も支援くれるので、とても便利ですが、コードビューでの入力（つまりタグでの入力）に慣れていない場合は、ヘルプにMTテンプレートタグのリファレンス機能が追加されるので、それを閲覧することが可能ですが、非常に作業が大変なのではないかと思います。

詳しくは参考URLを参照してください。

参考URL：

http://www.macromedia.com/jp/devnet/dreamweaver/articles/movable_type_3.html

お礼

ありがとうございます。「レイヤー」は、フォトショプでの「レイヤー」と考え方は同じということでしょうか？