February 16, 2008

1. スクリーンショットをPhotoshopで作る。
   サイズは実寸でさらに仮想の日記を書き込んだ状態を作る。
   
2. スクリーンショットをプリントしてレイアウトをボックスで切っていく。
   それをCSSのボックスレイアウトに当てはめてみる。この段階でid、class名や画像の名前を決める。
   
3. ボックスレイアウトを見ながら構造だけのHTMLを作る。
   ここはテキストエディタでHTML直書き。
   
4. 構造だけのHTMLにidやclassを割り振ってCSSのレイアウトに備える。
   
5. CSSでレイアウト。
   Dreamweaver使ってブラウザ互換を確かめながらスクリーンショットのとおりにレイアウトする。レイアウト上の微調整はここで済ませておく。
   
6. 1～5の手順で複数のページを作ってリンクを確かめる。
   
7. 出来上がったHTMLをMovable Typeのテンプレートに変換する。
   主に更新される情報をMovable Typeの独自タグに置き換える作業と、一枚のページをヘッダーやフッターとかに切り分けてモジュール化する。ここが一番時間かかるけど、あらかじめ各ページの具体的な青写真を作っておくと作業的に進められる。
   
8. コメントありや、画像あり、トラックバックなんかいくつかのパターンで投稿してみて動作を確かめる。問題がなければ完成。
   

とまぁこんな感じ。

デザイン作業ははじめのPhotoshopでスクリーンショット作る時だけだからここで手を抜くと後が大変。ある程度構築しやすいレイアウトを考えるのも大事。

しかしMovable Typeが吐き出すソースがスゲェ汚い。テンプレートの視認性を優先して独自タグに合わせて整理すりゃいいのか、吐き出すソースの視認性を優先してHTMLのタグに合わせて整理すりゃいいのか、なかなか折合いがつけれなかった。

参考にさせてもらったサイトは見栄えもソースもキレイ。拡張性やメンテナンスのこと考えるとどっちのソースもキレイにしとかんとあかん。

posted at 02:51 AM