プロに教えてもらって、Check4Lifeのトップページを更新。

  • 投稿日:
  • カテゴリ:

Check4LifeのTOPページを更新しました。

14050301.jpg

友人が作ってくれたデザインをベースに、HTML化して今日、ようやく完成。
たった1ページですが、プロのWeb制作プロセスを実際に知りたくて、一からトライしてみました。

・デザイナーがWebのビジュアルを、画像ソフト(FireWorksやIllustratorなど)でデザインする
・画像ソフトで各画像パーツを書き出す(スライス)
・各パーツを使ってHTMLとCSSで制作(コーディング)する

私が担当したスライスとコーディングは、出来上がりのイメージを見ながら、それをHTMLとCSSで表現する作業です。

・どれを画像にし、どれをテキストにするか
・画像はどの範囲にするか
・背景は
・HTMLとCSSの構造は

など、初めてなのでいろいろ教えてもらったり調べたりしながら形作っていくのは、
時間はかかりましたが、楽しい作業でした。

・デザインを決める際は、コーディングのことは考えなくていい。
・デザイン決定後は最終形が見えているので、それに従って実装すればいい。
・CSSで、かなりのデザインを表現できる。

ということを体感できたのが大きな収穫です。

CSSによる表現力が乏しかったので、今回、参考にしたのは、この本。
細かなパーツを実現するHTMLとCSSの表現を丁寧に解説してくれいているので、
とても勉強になりました。
Web制作する人にオススメ。

早速、次は他のページに展開します。