Dreamweaver CS4/Fireworks CS4自主勉強会

合同会社レゾリューションズ主催によるDreamweaver CS4/Fireworks CS4自主勉強会が6月12日に開催されます。

詳細・お申し込みはこちらから。

『できるクリエーターDreamweaver独習ナビ』が2回目の増刷(3刷)になりました。ご支援ありがとうございます!

Adobe Labsにて、Dreamweaverの次期バージョンのパブリックベータが公開されました。

使用(試用)できるのは48時間ですが、CS3のシリアルがあれば、CS4のシリアルを発行して継続使用が可能です。

Dreamweaverでは、バージョン8からデザインビューを拡大表示できるようになりました。

dw_zoom.gif

「200%」だと気にならないのですが、「150%」くらいだと文字のエッジが汚く感じることがあります。

Dreamweaverのデザインビューの拡大では、単純に画面表示を拡大しているため、拡大時にフォントを再度レンダリングしていません。DTPのアプリケーションに慣れている方はご不満かと思いますが、ある意味、これが正しい解釈かもしれません。

CSSを使ってulのliを横並びにするには、floatを使う方法、display: inline;を使う方法の2つがあります。どちらにも一長一短があり、作例(サンプルサイト)では、あえて、両方を使っています。

それぞれ次のような短所がありますので、短所を回避するために、逆の方法を使うといった使い分けるとよいかもしれません。

float : left;を使う場合、

  • 親要素のulからli要素が浮いてしまうため、ulの背景色が切れてしまう。
  • ul要素内で、(li要素をまとめて)センタリングができない。

display : inline;を使う場合

  • (X)HTMLの改行が"余白"として生じてしまうことがある。
  • 「ul li a」に対して、横幅を設定するためにdisplay:block;を設定すると、横並びが解除されてしまう。

盛岡情報ビジネス専門学校 デザイン科で、『できるクリエーターDreamweaver独習ナビ』がテキストとして採用いただいたとのことです。

ありがとうございます。

Smashing Magazineというオンラインマガジンで、Adobe Fireworks Tutorials and Downloads - Best ofという特集が組まれています。

Firefox系のチュートリアルは少ないので貴重ですね。

Dreamweaverテンプレートを使う際、keywords/descriptionなどのmeta要素をページごとに変更できるようにするにはどうすればよいですか?というご質問をいただきました。

Dreamweaverテンプレートでは、意識的に作った編集可能領域のほかに、2箇所、編集可能領域が設定されます。

それぞれhead要素内にあり、ひとつはtitle要素用、もうひとつは空のまま挿入されています。

<!-- TemplateBeginEditable name="doctitle" -->
<title>ページのタイトル</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->

keywords/descriptionなどのmeta要素をページごとに変更できるようにするには、<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->の中に移動してください。

Dreamweaverで画像を挿入する際、widthやheightを含めないようにできますか?という質問をいただきました。

私が知る限り、デフォルトではできないと思います。検索置換を利用して該当ファイル(またはサイト全体)のimg要素のwidth属性、height属性を削除することで対応していくのがよいかもしれません。

clear_width.png

▲[検索]の対象を「特定のタグ:img」に設定、[属性を削除]で「width」を選択するように設定すればよいでしょう。

なお、検索の設定はクエリーファイル(.dwr)として、保存しておき、後で読み込むことができます。

clear_width.dwr

アドビのサイトのDreamewaver 10周年記念イベントのレポート内に、Kevin LynchのDreamweaver開発秘話 - 19 dreams - ビデオが追加されました。

アイテム

  • dw_zoom.gif
  • clear_width.png
  • zenkakuhankaku.png
  • takano2008.jpg
  • DW_Obi.gif