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