KenG Blog

Dreamweaver CS3で実現するマルチブラウザに対応したWebサイト制作

制作時におけるDreamweaverの活用例

• デザインビューを基本として使う
• 原稿テキスト（.txt）をDreamweaverで開いてそこからレイアウト作業を始める
• Word書類なら見出しなどのスタイルをそのままDreamweaverに読み込める
• 表作成はExcel書類を読み込む
• 文法チェックは欠かせないが、Webの文法チェックサイトはソースコードをサーバ側に渡すため、NDA契約下における制作途中のサイトデータを読み込ませるのはNG。Dreamweaverの文法チェッカーが使える。同様にコード比較ツールも便利

サンプルサイトを元に制作法を解説

1. テキストファイルをDreamweaverで開くと、段落ごとに<p>タグで囲まれたHTMLに展開される
2. 段落を選んでは、ショートカットキーを使って見出しを割り当てていく。リスト化するところはリスト作成ボタンを使う
3. フォーマット化が終了したら画像を配置していく
4. 画像はFireworksでサイトデザインをあらかじめ作り、パーツ単位でDreamweaverにコピペ
5. ペースト時は、まずDreamweaverで該当するテキストを選んで画像をペースト
6. 従来の手法ではFireworks上で画像をすべてスライスし、それをHTMLに当てはめていくという２つの手順を踏んでいたが、CS3になってコピペに対応されたので、よりシームレス
7. Web標準としての作り方として、リンク箇所はダミーリンクをあらかじめ貼っておく。リンク箇所をまとめて選択して、プロバティから＃を打ち込むだけで、HREFタグをいちいち打たなくてもOK
8. 次に、ページ上のブロックを選択してdivタグを反映、CSSの準備をすませる
9. 基本のHTMLができたら文法チェックを

CSSの設定

• 枠付きHTMLをデザインする。枠を選択して新規スタイルからCSSプロパティを定義
• 「表示」→「スタイルレンダリング」を活用。PC画面用、印刷用など、異なるメディア向けのCSSを作る場合ブラウザ互換チェックを活用

DreamweaverでCSSが正しく表示されない？　DreamweaverのCSSのクセを知ろう
→　Dreamweaverに対応したCSSを書くのはナンセンス？でもContributeを利用するなら必ず必要

1. clearfixによるハックは未サポート。親要素にfloat, overflow=hiddenを定義してみる。overflowの要素が選択できない場合はダブルクリック
2. ボックスが縦に伸びるトラブルに悩まされる場合は、ボックスの幅は常に定義する

複数人による作業におけるDreamweaverの活用法

• ライブラリは共通要素で使う（ヘッダ、フッタ）
• テンプレートはレイアウト情報を共有するとき（編集可能領域など）
• コードスニペットの活用（JS,CSS）
• サイトウインドウの活用
• レポート機能、特にアクセシビリティのチェックを
• 検索・置換のクエリー再利用

その他、ドリに組み込まれたリファレンスの活用、かっちりしたCSSデザインにはDIVタグに吸着するガイドライン機能を活用、ズーム機能。最後に、ツールを使うことを目的としない。Dreamweaverにすべて頼らず、基本知識をきちんと身につける