Dreamweaverというソフトウェアを勉強中
パソコンの勉強はもっぱら、本を買って独学。
「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スタイルの初期化方法
- ユニバーサルセレクタをつかう
- padding:0px, margin:0px（レイアウト上邪魔になる左のふたつをリセットする）
- グループセレクタをつかう
- h1,h2,h3,h4,p,td,label{ margin: 0px;padding: 0px;}
- リキッド・レイアウト（float）で2カラムを作る
- XHTMLのマークアップ
- レイアウト構造の確認
- CSSの初期化（body,h1,h2に、margin0、padding0）
- body要素へのセレクタの適用
- divタグの挿入とセレクタの追加1
- divタグの挿入とセレクタの追加2（ビジュアルエイドのCSSレイアウトの背景を有効にすると、異なる背景色でブロックの位置と大きさが確認できる）
- divタグの挿入とセレクタの追加3
- clearプロパティでfloatを解除
- 余白やマージンの調整と仕上げ(左ブロックと右ブロックの間に適度なスペースを作るために、左ブロックの横幅を小さくする。左右足して95%）
- （完成）
- floatプロパティを使ってカラムレイアウトを作る
- floatとclearで積み木のようにらくらく組み合わせ、とはいかない。Internet Explorer 5、6の致命的バグ（marginの計算ができない）のせいで、うまく表示できない。
- そうしたInternet Explorerの弱点に対応すべく、「CSSハック」が利用される。しかし、CSSハックはオールマイティではなく、かつ、文法的に正しいわけではない。
- フロートを使ったマルチカラム
- （positionプロパティを使ったマルチカラム・・・パス）
コンポーネントベースでつくる
- CSSのメリットは、「情報構造と外観の分離」。（htmlには、情報構造がある）