Dreamweaver MX 使えるかも
画像編集ソフトFireworksの解説本を読むと、「Webページ編集ソフトDreamweaverと連携させると便利だよ」としつこく書いてある ので、Dreamweaver使ってみようかな……と思い始めた。
 | おしえて!!FIREWORKS 8 (毎コミおしえて!!シリーズ) 作者：森川 眞行 出版社／メーカー：毎日コミュニケーションズ 発売日：2006-08 メディア：単行本 |
おすすめ度の平均:   【素晴らしい】 最新バージョンを使用の初心者にも使える |
今まで Dreamweaver は必要ないと思っていた。
仕事場のPCに入ってる Dreamweaver 4 を使ってみたことがあるけど、 XHTMLや UTF-8 や CSSに対応してなくて、HTML/CSSを手書きするほうが便利なので 周りの人にもHTMLをテキストエディタで修正するよう頼んで、 Dreamweaverは使わないことにしていた。
そもそも tableレイアウトの時代なら HTMLソースがめちゃめちゃ読みにくかったのでツールを使う利点があったけど、 CSSレイアウトになってからは HTMLソースも (divやclassが多くなるとはいえ) 読みやすいままにできるし、 CSSも直接テキストエディタで手動修正かけたほうが早い。
だが、Fireworksとの連携ってやつも一度体験しておこうと、Dreamweaver MX を調べてみると 「新機能: ……XHTML サポート、UTF-8 文字セットの完全なサポート……」 と なっていた。進化してる。
XHTML 1.0 Strict / Transitional はサポートしているようだ。XHTML 1.1 はサポートしてないけど使わないので問題ない。 CSSは Level2 までサポートしているようだが……。
このバージョンなら使えるかな？ 使ってみる。
設定方法
デフォルトのHTMLファイル拡張子を .htm から .html に変更する
C:\Program Files\Macromedia\Dreamweaver MX\Configuration\DocumentTypes\MMDocumentTypes.xml
をテキストエディタで開いて、以下のように修正する。'winfileextension' の中の 'htm' を後ろに持っていくだけ。
$ diff -u MMDocumentTypes.xml.org MMDocumentTypes.xml
--- MMDocumentTypes.xml.org Thu Jun 27 01:39:02 2002
+++ MMDocumentTypes.xml Tue Jan 1 12:16:55 2008
@@ -1,6 +1,6 @@
<?xml version="1.0"?>
<documenttypes xmlns:MMString="http://www.macromedia.com/schemes/data/string/">
- <documenttype id="HTML" internaltype="HTML" winfileextension="htm,html,shtml,shtm,stm,lasso,xhtml" macfileextension="html,htm,shtml,shtm,lasso,xhtml" file="Default.html" writebyteordermark="false">
+ <documenttype id="HTML" internaltype="HTML" winfileextension="html,shtml,shtm,stm,lasso,xhtml,htm" macfileextension="html,htm,shtml,shtm,lasso,xhtml" file="Default.html" writebyteordermark="false">
<TITLE>
<MMString:loadString id="mmdocumenttypes_0" />
</TITLE>
デフォルトのHTML文字コードを UTF-8、改行コードを LF に変更する
- [編集 - 環境設定 - 新規ドキュメント] で、「エンコーディング初期設定」を「UTF-8(Unicode)」にする。
- [編集 - 環境設定 - コードフォーマット] で、「改行タイプ」を「LF(Unix)」にする。
デフォルトで XHTML 1.0 Transitional を使う
- [編集 - 環境設定 - 新規ドキュメント] で、「ドキュメントをXHTMLに準拠させる」をチェック。
- [編集 - 環境設定 - バリデータ] で、「XHTML 1.0 Transitional」をチェック。
連携方法
Dreamweaverで [サイト - 新規サイト - 詳細設定] を開き、「ローカルルートフォルダ」に C:\home\local\blog などのパスを指定する。
ついでにサイト名 (Dreamweaverで複数のサイトを管理するための名前なのでWebサイトのtitleと一致しなくてもいい) も指定する。
Fireworksで元画像を [ファイル - 新規保存] するとき、その「ローカルフォルダ」の下に保存する。そのあとでWebに載せる画像を [ファイル - 書き出し] するときも「ローカルフォルダ」の下に保存する。
Dreamweaverで「ローカルフォルダ」の下に HTMLを作り、[挿入 - イメージ] でさっきの画像を取り込んだあと、その画像を選択するとプロパティインスペクタに [fw 編集] というボタンが現れる。それをクリックすると、Fireworksが起動して元画像を編集できる。Fireworksの[終了] をクリックすると、Dreamweaverに戻ってこれる。
これは便利かもしれない。
いままでWebに載せた画像を再編集したくなったときは、 作成途中て連番つけて保存した作業ファイルのうち どれが元画像だったのかをファイル名やタイムスタンプで推測していたけど、 それをしなくてもよくなるのか？
Fireworksで作った元画像ファイルをアップロードしないためには、[サイト - サイトの編集 - 編集 - クローク] で「クロークを使用可能にする」をチェック、「次で終わるファイルをクロークする」に '.png' を指定する。でもこれだとWebに png画像載せられなくなるから困るな。「特定のフォルダ以下はすべてクロークする(アップロードしない)」というのがあるのでこちらを使おう。
試用
とりあえず私が手書きで作成した HTML を読み込んでみます。
[表示 - コードとデザイン] にすると、ブラウザに表示したときの画面(デザインビュー)と HTMLそのままを表示した画面(コードビュー)、両方表示できる。
[編集 - 環境設定 - フォント] で、HTMLを修正するエディタ(コードビュー)のフォントを変更できる。 Verdana にしました。
[編集 - 置換] で「〜(U+301C)」を「～(U+FF5E)」に置換できなかった。U+301Cの文字が認識できてない様子。Dreamweaverの置換はUnicodeに完全対応ってわけでもないとわかった。表示はできるんだけど。
デザイン画面で HTMLコメントがアイコンで表示されて邪魔なのだけど…… [表示 - ビジュアルエイド - 不可視エレメント]のチェックを外せば消える。このチェックが外れてるのに表示される場合は、いちどチェックを付け直してからまた外すといい。
HTMLコードを勝手に作り変えたりしないようだ。これは助かる。
CSSに BOMがあると読み込めない
なぜか CSSを読み込んでいない。<link rel="stylesheet" type="text/css" href="../theme/one-entry.css" media="all" /> って書いているのに……。
one-entry.cssは中身が @import url("base.css");の1行しかないし、DreamweaverMXは @import命令には対応しているし……、UTF-8のBOMを削除してみたところ読めるようになった。
CSS対応を優先するには
以下によると、Dreamweaver MXまでは CSSではなく HTML物理マークアップ優先なんだそうです。
http://admn.air-nifty.com/books/2006/12/webex006_bbc3.html
「DreamweaverをMXから8にバージョンアップ」することを再提案。実行してみると、すんなり目標達成できました…… MXでは、font要素などで物理マークアップする「HTMLスタイル」がデフォルトでしたが、MX2004からは「CSS」がデフォルトに変更されています。
んんー、CSSは今までどおり手書きでやったほうがいいのか……？
→プロパティインスペクタの [A] ボタンをクリックすると、HTMLモードを CSSモードに簡単に変更できる。
Dreamweaver MX2004 からは、このHTMLモードとCSSモードの切り替えボタンがなくなって CSSモードだけになったのが改良点らしい。 私はコードビューだけ使ってデザインビューは使わないと思うので、このHTML/CSSモードとかはデザインビューでしか使わないから、問題ないみたいだ。
参照:
Adobe -- DevNet : Dreamweaver MX でCSS を利用する最良の方法
http://www.adobe.com/jp/devnet/dreamweaver/articles/css_practices.html
Adobe -- デベロッパーセンター : Dreamweaver MX 2004 の CSS 機能について : ページ 2
http://www.adobe.com/jp/devnet/dreamweaver/articles/css_dreamweaver_02_mx2004.html
コード補完
HTMLタグ補完
HTMLタグをコードビュー(コード入力画面)で手動入力すると、たとえば
<h まで入力すると補完ウィンドウに HTMLタグ一覧 ( marquee とかの いらないタグまで表示される…) が現れ、 <>h1 のところにカーソルが当たる。
これはHTMLタグを知らない場合は便利だろうけど、タグは暗記してる私には役立たない。
そのまま <h2> と入力すると、この開始タグに呼応する終了タグ </h2> も自動的に入力される。これは便利。
属性・クラス補完
<p と入力すると補完ウィンドウに属性一覧 (class id href onclick など) が表示される。<p c まで入力すると、classにカーソルが当たる。
そこで Enter押すと、<p class="" まで入力されて、カーソルは2つのダブルクォーテーションのあいだに置かれる。
そして、補完ウィンドウにCSSクラスの一覧が現れる。そこで in まで入力すると、info にカーソルが当たるので、Enter押すと、 <p class="info" ここまで自動入力されてカーソルはダブルクォーテーションのあとに置かれる。
そのあと > を入力すると、そのあとに </p> も自動入力されてカーソルは </p> の前に置かれる。ふーむ便利だね。
ちなみに、class は補完できたけど、id のほうは補完できなかった。
CSS編集
CSSのほうはコードビューに当たるものがないようだ。デフォルトだと、いちいちCSS編集ウィンドウを開いて、マウスでちまちまカテゴリを切り替えて、変更したい項目を選択して、中身を変更しなくてはならない。一覧性がないし、使いにくい。
CSS編集に外部エディタを使うことができる。[編集 - 環境設定 - ファイルタイプ/エディタ]で '拡張子'の[+]ボタンを押して、.css と入力する。'エディタ'の[+]ボタンを押して、C:\Program Files\TeraPad\TeraPad.exe などを指定する。[OK] ボタンを押す。'デザイン'パネルの'CSSスタイル'タブで、適当なところで右クリックして、「外部エディタを使用」にチェックを入れる。これで外部エディタを使える。でもこれでは Dreamweaver 使う意味ないなー。
Macromedia - Developer Center : Tableless Layouts with Dreamweaver MX (英語) を見ると、「MX2004じゃないMXの場合、CSS編集は、DreamweaverMXを使わずに ファイル直接書き換えたほうがやりやすくて早い」って書いてありますよ。
まとめ
Dw単体でよいと思った機能はHTMLコード補完だけだなあ。といってもHTMLのほうは補完がなくても私は困らないし。 CSSのほうにコード補完があれば (CSSのプロパティは覚えてないのが多いから) 大きな利点になったんだけど、その機能はこのバージョンにはなくて残念。(後続バージョンにあるかどうかは調べてない)
Dreamweaver MX を使うかどうかは微妙です……。Fireworksは必ず使うんだけどな。
DwとFwの連携は、Dwを必ずいつも使うようにしない限り意味がない。Dwをたまに使うかも……では連携の意味がなくなる。 だからすでに手書きまたはスクリプトでHTML/CSS管理しているこのサイトでは、Dwを使わない。
とはいえ Dwは知らないコードを勝手に書き換えたりはしないので、主に手書き派の私にも どこかで使ってみたいと思わせた。
e解説
参考になるかなと思ってe解説 Dreamweaver MX 2004を見たんだけど、これはかなりの初級向けだった。STEP1～3まであるんだけど、STEP1はサイト設定とFTP接続設定だけ。STEP2でHTML要素を少し編集して、STEP3でCSSをちょっと適用。 内容も薄く、あまり参考にならなかった。e解説でも「e解説 Fireworks MX」などはいろいろ気づかせてくれて役に立ったのだけど。
それでも実際にソフト動かしているとこを見て 説明の声も聞くのは、本を読むよりすんなりアタマに入ってくる。本は「読むぞ、読むぞ！」って気合入れないとなかなか頭に入ってこないんだよねえ。百聞は一動画にしかず。
 | e解説シリーズ e解説 Macromedia MX 2004 Twin Pack 作者： 出版社／メーカー：イーフロンティア 発売日：2004-03-05 メディア：CD-ROM |
おすすめ度の平均:  値段の割に |
