パソコンの勉強はもっぱら、本を買って独学。

「Dreamweaver（アドビ ドリームウィーバー）」は、ホームページを作る助けをしてくれるソフトウェアです。
「Dreamweaverプロフェッショナル・スタイル　[CS3対応]」という本を買って、勉強しています。

・名称：Dreamweaverプロフェッショナル・スタイル　[CS3対応]
・単行本: 303ページ
・出版社: 毎日コミュニケーションズ
・発売日： 2007/9/14

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には、情報構造がある）