« コラムの連載 | トップページ | Rubyの普及と技術者育成 »

2007/09/28

事例「Eric Meyer’s CSS SCULPTOR」

制作会社向け意見交換会 - 9/30

テーマ:
「TV-Webとセッティングゼロ・スタートの設計思想(1)」

今回は、デジタルテレビ上でプレビューする構造化ドキュメント(HTMLなど)の扱いやワークフロー、自動化の事例についてお話しする予定です。

デジタルテレビに関してはディズニーの事例が最もわかりやすいのですが、その前に現状把握の意味でパソコンベースのWebを取り上げます。自動化についてはリクエストの多かったCSSデザインツール(Eric Meyer氏の冠がついた)「Eric Meyer’s CSS SCULPTOR」を検証しましたので、報告会にて発表いたします。

デモの内容:
Adobe Dreamweaver CS3 上でCSS SCULPTORを起動させ、3カラムのエラスティックレイアウト(スクリーンレイアウトおよびプリントレイアウト)生成までのプロセスを紹介しながら、ポイントを解説します。

CSS SCULPTORの作業プロセス画面

Adobe Dreamweaver CS3での展開方法について解説します。

Dreamweaver CS3の画面

ブラウザ・プレビューについての解説をします。

ブラウザのプレビュー画面

common style. のサイトをCSS SCULPTORを使って構築するデモをおこないます(今回はパソコンベースの解説です、ご了承ください)。
技術者やデザイナーの作業をどのように形式知化し、データベースおよび自動化ツールに落とし込むか等、重要なポイントのみ簡潔にまとめます。

common style.のクローズドネット公開サイトの基本テンプレート画面

尚、ビデオ資料などはYouTubeなどで公開し、幅広く共有したいと思っていますが、許諾が難しい場合は参照リンクにとどめます。

参考:

Eric Meyer’s CSS SCULPTOR

Let Eric Meyer, renowned CSS master, help you create the custom Web standards compliant, CSS-based layout you want and flatten the CSS learning curve. Start by choosing from any of the 30 included layouts—and then modify the design to the max: change the page width and position or number of columns. Specify margins and padding for any page element along with type properties for paragraphs, headings and link states. Bring in background colors, background images (repeating or not) or any style of border. Eric Meyer’s CSS Sculptor generates styles sheets for both screen and print in one operation. You can even save your modified layouts as new presets to be easily re-created or modified further. Bring the master’s touch to your designs with Eric Meyer’s CSS Sculptor.

|

« コラムの連載 | トップページ | Rubyの普及と技術者育成 »

[2007-8]Web関連レポートのメモ」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/31309/16597312

この記事へのトラックバック一覧です: 事例「Eric Meyer’s CSS SCULPTOR」:

« コラムの連載 | トップページ | Rubyの普及と技術者育成 »