Dreamweaverプロフェッショナルスタイル [CS3対応] 毎日コミュニケーションズ

Introduction
つくる前にすべきこと
  • サイトマップを作る
  • ディレクトリをリスト化(ファイル名、title要素、キーワード)
  • ターゲットブラウザを決める(Firefox、Opera、Safari、Internet Explorer 6~9)
  • HTML/XHTMLのバージョンを決める
  • 文字コードを決める(文字化けの原因となるため、文字コードを混在させず、HTML、CSSなどで揃えておく)
  • ターゲットとするモニタサイズを決める
  • アクセシビリティ(どこまで対応するかをルール化)(alt属性、フォントズーム機能、ナビゲーションスキップの有無など)
  • インターフェイス名、コンテナ名を決定し、ルール化
  • コーディングのルールを文書化(納品時に、解説の上、引き渡す)(会社やチームの資産として育てていくとよい)
  • 画像の保存場所
  • 表記ルールを決める
    • ひらがなで書くか漢字で書くか(こと、とき、もの、まったく、くださいなど)
    • 送りがな(お問い合わせ/お問い合せなど)
  • サイトのチェック
  • カンプ(画像のみの画面イメージ)の作成
Dreamweaverでつくる
  • 環境設定
    • ショートハンド(→CSSスタイルシート)
    • インデント(→コードフォーマット)
    • 表示フォント(→フォント)
    • 外部コードエディタ(→ファイルタイプ/エディタ)
    • プレビューブラウザ(→ブラウザでプレビュー)
    • 拡張子、初期設定ドキュメントタイプ、エンコーディング初期設定(→新規ドキュメント)
  • 製作フロー
    • フォルダの作成
    • デフォルトページの定義(lang、xml:lang、dir、キーワード、説明、CSSとJavaScriptの宣言)
    • CSSファイルの作成
    • CSSファイルのリンク
    • クロスブラウザ対策
  • モデルページをつくる
    • コンテンツ・ページをつくる
    • マークアップのバリデート(ファイル→バリデート→マークアップ)
    • ブラウザ・プレビュー(こまめに)
    • リンクチェック(ファイル→ページのチェック→リンク)
    • スタイルガイドの準備
    • (プリント用CSSの場合)プリントアウト(スタイルレンダリングツールバー→プリントメディア)
    • トップページをつくる
  • サイトをつくる
    • 親テンプレートの作成
    • 子テンプレートの作成
    • コンテンツページ、トップページの作成
  • 最終チェック
    • サイト全体のバリデート(ドキュメントツールバー→マークアップの検証→現在のローカル全体の確認)
    • サイトのリンクチェック(サイト→サイト全体のリンクチェック)
    • レポート
    • ブラウザでの検証(前提知識のない、制作にかかわらない人にも、ご確認いただく)
  • グループワーク(複数での作業の場合)(略)
サイトデザイン・開発トラック
DreamweaverによるCSSレイアウト
  • CSSスタイルの初期化
    • h、p、marginなどに、あらかじめ「初期値」が存在する。それをリセットする。
  • CSSスタイルの初期化方法
    1. ユニバーサルセレクタをつかう
      • padding:0px, margin:0px(レイアウト上邪魔になる左のふたつをリセットする)
    2. グループセレクタをつかう
      • h1,h2,h3,h4,p,td,label{ margin: 0px;padding: 0px;}
  • リキッド・レイアウト(float)で2カラムを作る
    1. XHTMLのマークアップ
    2. レイアウト構造の確認
    3. CSSの初期化(body,h1,h2に、margin0、padding0)
    4. body要素へのセレクタの適用
    5. divタグの挿入とセレクタの追加1
    6. divタグの挿入とセレクタの追加2(ビジュアルエイドのCSSレイアウトの背景を有効にすると、異なる背景色でブロックの位置と大きさが確認できる
    7. divタグの挿入とセレクタの追加3
    8. clearプロパティでfloatを解除
    9. 余白やマージンの調整と仕上げ(左ブロックと右ブロックの間に適度なスペースを作るために、左ブロックの横幅を小さくする。左右足して95%)
    10. 完成
  • floatプロパティを使ってカラムレイアウトを作る
    • floatとclearで積み木のようにらくらく組み合わせ、とはいかない。Internet Explorer 5、6の致命的バグ(marginの計算ができない)のせいで、うまく表示できない。
    • そうしたInternet Explorerの弱点に対応すべく、「CSSハック」が利用される。しかし、CSSハックはオールマイティではなく、かつ、文法的に正しいわけではない。
  • フロートを使ったマルチカラム
    • 左ブロックの横幅を3%減らし、その分、margin-leftを3%にすると、IE(5、6)のバグで表が崩れる。その場合は、ブロックカテゴリーの表示をインラインにすればOK。
    • 完成)(勝手に応用-自己流
  • (positionプロパティを使ったマルチカラム・・・パス)
コンポーネントベースでつくる
  • CSSのメリットは、「情報構造と外観の分離」。(htmlには、情報構造がある)