2010年9月アーカイブ

そんなことはありません。

もちろん、バージョンが上がるごとにDreamweaverは進化していますが、便利なことが増えたというレベルで、ワークフローが変わるようなDreamweaverのコアの部分は何も変わっていません。

ご参考までに、CS5/CS4のみでしか実現できないのは次の機能です。いずれもPART 3のチュートリアルを進めるには、なくてもまったく問題ありません（サイト定義はUIが異なるのでpp.044-045を参照してください）。

Dreamweaver CS5しかない機能（または変更された機能）

• 簡単なサイト定義（UIの変更）
• CSSインスペクト（ライブビュー実行中にFirebug的なデバッグ作業を行う）
• BrowserLabとの連携（ローカルファイルも対象に）

Dreamweaver CS4以上

• ライブビュー（もうひとつのデザインビュー、WebKitを搭載）
• コードナビゲータ（対応する要素に対するCSSルールにスピーディにジャンプ）
• 関連ファイル（HTMLがリンクしているCSSやJavaScriptファイルをドキュメントツールバーに一覧表示し、クリックして編集可能）
• Subversionのサポート

Dreamweaverテンプレート（親）を子ページに適用するには、3つの方法があります。

• ［新規ドキュメント］ダイアログボックスで［テンプレートから作成］を選択
• 子ページ（すでにテンプレートが適用されているページ）を複製
• 既存のページにテンプレートを適用（［修正］→［テンプレート］→［テンプレートをページに適用］）

p.295［5］では、［新規ドキュメント］ダイアログボックスで［テンプレートから作成］を選択する方法をご紹介していますが、実際のところ、子ページを複製する方が手順としてはスピーディです。

『効率的なサイト制作のためのDreamweaverの教科書』をアドビのサイト内「ADOBE DREAMWEAVER 関連書籍」に掲載いただきました。

9月27日に開催するエイクエント x CSS Nite x KDDIウェブコミュニケーションズ『効率的なサイト制作のためのDreamweaverの教科書』出版記念セミナーが早々に満席になったため、10月14日に第2弾を開催することになりました。

今回は『”Dreamweaver使い”なら使わなきゃソン　Dreamweaverテンプレートの基本と使いどころ』と題して、Dreamweaverテンプレートにフォーカスします。

お席に限りがありますので、ご希望の方はお早めにどうぞ。

詳細・お申し込みはAQUENTのサイトから。

USでDreamweaverのプロダクトマネージャーをされている森房さんのブログにて、SVG 挿入 機能拡張が紹介されています。

使い方のビデオも追加されました。

• SVG 挿入 機能拡張の使い方 | morifusa.com

ダウンロードした「InsertSVG.mxp」をExtensiuon Managerで追加後、Dreamweaverを起動すると、［挿入］バーに［Insert SVG］というボタンを使えるようになります。

クリックして、SVGファイルを選択すると、次のようなソースコードが挿入されます。DreamweaverのデザインビューではSVGを確認することができませんので、ライブビューに切り替えて確認します。

<object type="image/svg+xml" data="sample.svg">

</object>

Adobe Illustrator CS5 HTML5 Packが公開されました。その機能を解説します。

インストールについては、下記をご参照ください。

• Adobe Illustrator CS5 HTML5 Pack - DTP Transit

「HTML5 Pack for Adobe Illustrator CS5」によりSVGに変数を付加することが可能になります。 これにより、SVGファイルを埋め込んだHTML内で、SVGの次のプロパティの設定を変更することができます。

• 塗りのカラー（_FillColor）
• 線のカラー（_StrokeColor）
• 線幅（_StrokeWidth）
• 不透明度（_Opacity）

同じSVGファイルを利用しながら、塗りや線の属性変更をHTML内で行うことができるようになります。

［レイヤー］パネルでオブジェクトごとに名称を設定します。たとえば、edgeとネーミングしたオブジェクトの線のカラーは「edge_StrokeColor」（オブジェクト名＋アンダースコア＋プロパティ）と定義されるので、次のように記述することで、線のカラーを「黒」に変更することができます。

<param name="edge_StrokeColor" value="#000000" />

追記（9月21日）

PDFには、「Fill Opacity」「Stroke Opacity」とありますが、「Opacity」のみのようです。

制限事項

• サポートしているブラウザは、Safari、Google Chrome、Firefox、Operaです。
• ［SVGオプション］ダイアログボックスで［Illustratorの編集機能を保持］にチェックをつけずに保存すると変数を設定したプロパティの値が失われます。

Dreamweaver 11.0.3アップデータでHTML5 packが日本語化されたことを受け、HTML5/CSS3 特設サイト- Adobe® Dreamweaver® CS5 | Adobe - 日本が公開されています。

サイトそのものがウィンドウサイズに応じて、デザインが変更される仕様になっており、サンプルファイルとしても提供されています。

一般企業のWeb担当の方から「テーブルレイアウトからCSSレイアウトに切り替えたいのですが、どこから手を付けたらよいでしょうか？」という質問をいただきました。

まず、テーブルレイアウトは「悪」ではありません。特に、一般企業のWeb担当者ということでしたら、重視すべきはメンテナンス性です。

CSSレイアウトに切り替えたとき、担当が変わっても更新が可能なワークフローを作ることが重要です。

多くのアプリケーションでは［ファイル］→［別名で保存］をクリックし、新しいファイル名を入力すると、新しいファイル名のみが残ります。

ところが、Dreamweaver CS4以降では、それまで作業していたファイルも開いたまま、新しいファイルが作業対象になります（つまり、2つのファイルが開いている状態になります）。

おそらくDreamweaver CS4で追加された機能「関連ファイル」の関係だと思いますが、他のアプリケーションと挙動が異なりますので、ご注意ください。

Dreamweaver 11.0.3アップデートのインストールが成功すると、HTML5 packがインストールされます。HTML5 packは日本語化されているだけでなく、少しだけアップデートしているようです。

CSSの編集中、「-」キーを押すと、次のように「moz-」「o-」「webkit-」が表示されます。

CSS3はまだ仕様が固まっておらず、ブラウザーによってもサポート状況がバラバラです。Firefoxの場合には「-moz-」、Safariの場合には「-webkit-」のように、それぞれのベンダーが拡張した機能を示す手段として、接頭辞（プリフィックス）をCSSのプロパティや値の前に付加して利用します。

p.036の「よく使うキーボードショートカット」一覧表をプリントアウトいただけるように、PDFでご用意しました。

Dreamweaver CS5 11.0.3 アップデートが公開されています。日本語化されたHTML5 packを含むアップデータです。

本アップデートは、Dreamweaver CS5 HTML 5 パックアップデートで確立されたマルチスクリーンプレビュー、メディアクエリー、コードヒント、 ライブビューレンダリングなどのワークフローに対処します。すべての Dreamweaver CS5 ユーザーの皆様にこのアップデートをインストールすることをお勧めします。本アップデートには、Dreamweaver CS5 11.0.2 アップデーターの内容および BrowserLabとDreamweaver CS5 の統合アップデートも含まれています。アップデートのインストール後、コンピューターを再起動してください。

自動的にアップデータが起動しますが、こちらからダウンロードすることもできます。

ただし、アップデートがうまくいかないケースがあるようです。

『効率的なサイト制作のためのDreamweaverの教科書』出版記念セミナー を9月27日、株式会社KDDIウェブコミュニケーションズ　セミナールームにて開催します（主催：AQUENT、協力：KDDIウェブコミュニケーションズ）。

「コーディングを加速するDreamweaverの機能アレコレ」と題して、120分、Dreamweaverの便利機能を時間の限りご紹介します。

お席に限りがありますので、ご希望の方はお早めにどうぞ。

詳細・お申し込みはAQUENTのサイトから。