本書特色
這是一本讓你更清楚如何有效率地使用CSS來設計網頁的書籍。
書中特別指出「提高視覺表現的價值」的部分,並將此觀念稱作「價值設計」,其重點在於「規則化」。為了讓CSS設計效率化,作者在書中提出了七項規則,依據各個不同的主題分別介紹不同的範例來解說。透過本書循序漸進的章節說明,讀者可以學習如何藉由技術的體系化和元素的模組化,使得整個Web設計過程更有效率。
對於CSS設計感到迷惑、不知如何下手的人而言,相信這樣的設計工法,將有助於釐清CSS的設計概念,以及掌握全盤的設計規則。
本書內容
<目錄>
PART 1 何謂CSS價值設計
1-1 CSS已經普及了,但網頁設計者的負擔不斷增加
1-2 CSS用了將近9年的時間才普及的原因
1-3 「CASCADING」的意義與CSS的選擇器
1-4 CSS的基本元素
1-5 檢討CSS設計的作業流程
1-6 作業效率化的關鍵
1-7 「價值設計」的新觀點
1-8 實踐價值設計的7項規則
PART 2 排字
CASE STUDY–FILE01 即將在戲院上映的新電影宣傳用網站
Variation 1-1 網站區塊佈局1(左)
Variation 1-2 網站區塊佈局2(右)
Variation 1-3 頂部區塊佈局1(上)
Variation 1-4 頂部區塊佈局2(上)
Variation 1-5 頂部區塊佈局3(上)
PART 3 背景
CASE STUDY–FILE02 支援創作者的仲介網站
Variation 2-1 重複圖形圖案1
Variation 2-2 重複圖形圖案2
Variation 2-3 配置背景影像1(右下)
Variation 2-4 配置背景影像2(右上)
Variation 2-5 垂直重複圖形圖案
Variation 2-6 固定配置背景影像(右下)
PART 4 圖形
CASE STUDY–FILE03 以月刊雜誌的網路版來做推展的Web視覺雜誌「design zero」
Variation 3-1 商務人士
Variation 3-2 名流樣式
Variation 3-3 網際兒童
Variation 3-4 姊妹悄悄話
Variation 3-5 格鬥家
Variation 3-6 女性工作
Variation 3-7 日本建築之美
Variation 3-8 時光機器
PART 5 顏色
CASE STUDY–FILE04 傳送高中程度講座內容的教育網站
Variation 4-1 灰光淺藍色
Variation 4-2 橙黃色
Variation 4-3 鈷藍色
Variation 4-4 天空藍
Variation 4-5 天空藍.三欄式形象
PART 6 佈局
CASE STUDY-FILE05 提供個人快樂出遊、鑑賞自然美的藝術網站
Variation 5-1 留白(左側)的確保
Variation 5-2 垂直兩欄式/留白(右側)的確保
Variation 5-3 兩欄式/留白(上方)的確保
Variation 5-4 兩欄式/留白(下方和中央)的確保
Variation 5-5 上半部+下半部(兩欄式)/留白(右側)的確保
Variation 5-6 三欄式/空白(上方)的確保1
Variation 5-7 三欄式/留白(上方)的確保2
PART 7 CSS價值設計(value design)和規則檢查(rule check)
CASE 01 即將在戲院上映的新電影宣傳用網站「Serendipiter」
CASE 02 支援創作者的仲介網站「EP.EYES」
CASE 03 以月刊雜誌的網路版來做推展的Web視覺雜誌「design zero」
CASE 04 傳送高中程度講座內容的教育網站「common style.」
CASE 05 提供個人快樂出遊、鑑賞自然美的藝術網站「Hidden Art」
光碟內容
書中的範例檔案