純綷整理資料的筆記…文章雖命為XHTML+CSS，不過還是重在與Visual Studio這個工具的銜接(DIV + CSS)…所以淺嘗輒止…
網頁美工以目前來說，主流依然還是DIV + CSS
搭配使用的網頁美工工具嘛，也還是 Fireworks、Photoshop、Dreamwever
◎CSS+DIV 進行網頁美工，和傳統的 TABLE 網頁布局而具有以下4個顯著優勢
- 美工設計與網頁文字內容可以做區分
將設計部分做區隔出來放在一個獨立樣式文件中，HTML文件中只存放文本信息。 - 提昇搜索引擎對網頁的索引效率
用只包含結構化內容的HTML代替嵌套的標籤，搜索引擎將更有效地搜索到你的網頁內容。 - 提高頁面瀏覽速度
對於同一個頁面視覺效果，採用CSS+DIV重構的頁面容量要比TABLE編碼的頁面語法少太多了，前者一般只有後者的1/2大小。 - 容易美工/程式維護和改版
簡單的修改幾個CSS文件就可以重新設計整個網站的頁面。 - 美工設計和網頁程式再分離
DIV + CSS不僅僅是其符合W3C標準，而是通過採用CSS+DIV，網頁程式也比較好超作，已經把設計與程式分離了。
◎用比喻的方式來說說DIV和CSS：
程式 是房子裡頭的管線，管線怎麼埋怎麼佈各憑(水電工的)本事，反正用的人電會通水會流就好了。(哈哈，程式設計式像水電工…很貼切吧…)
DIV 好比是房子的鋼筋，鋼筋的部分沒處理好，是不會影響佈管線的水電工的啦，不過房子中間多了一支柱一根樑，都會牽連到後期的裝潢隔間問題。所以DVI 要先打個設計圖…然後再實作是比較洽當的。
美工 是房子裝修，裝潢的好不好當然美工的設計感很重要，不過如果DVI 一開始搞得不好那麼裝修就得花很多工夫。
而美工裡CSS的部分像油漆…漆錯了還可以換，換完了還是可以重漆
那麼TABLE呢，早期的TABLE真的很重要，用PHOTOSHOP作網頁，初期也是走TABLE切片，TABLE的網頁就好像在word上畫表格一樣，把網頁切成若干小塊…全部包包在HTML裡，其實初期的時候我還真覺得DIV+CSS很麻煩，不過隨著同一網站的網頁愈做愈多時，你會慢慢發現他的好處的。
◎常見的 DIV 架構
HTML的部分
<!--Wrapper 外層 --> <div id="WRAPPER"> <!--Header上橫幅 --> <div id="HEADER">....</div> <!--MAIN_NAV主選單 --> <div id="MAIN_NAV">....</div> <!--CONTENT內容區 --> <div id="CONTENT">....</div> <!--FOOTER頁尾 --> <div id="FOOTER"> ...</div> </div>
CSS的部分
#WRAPPER
{
width: 800px;
margin: 0 auto;
padding: 0 10px;
}
/*---- 頁首 ----*/
#HEADER
{
background-color: #FF3300;
}
#HEADER h1 a
{
text-indent: -9999px;
display: block;
width: 800px;
height: 800px;
}
/*---- 主選單 ----*/
#MAIN_NAV
{
background-color: #0000FF;
overflow: auto;
width: 800px;
}
#MAIN_NAV ul
{
list-style-type: none;
}
#MAIN_NAV li
{
float: left;
}
#MAIN_NAV li a
{
display: block;
padding: 5px 10px 5px 10px;
background-color: #000000;
color: #FFFFFF;
font-weight: bold;
font-family: Arial;
font-size: 12px;
text-decoration: none;
border-right: 1px solid #FFFFFF;
}
#MAIN_NAV li a:hover
{
background-color: #FFFFFF;
color: #000000;
}
/*---- 內容區 ----*/
#CONTENT
{
background-color: #00CC00;
clear: both;
}
#CONTENT h2, #CONTENT h4, #CONTENT p
{
padding: 6px 20px 6px 20px;
font-size: 12px;
}
#CONTENT h2
{
font-family: Arial;
font-size: 24px;
text-align: center;
padding-top: 10px;
background-color: #666;
color: #FFF;
letter-spacing: 10px;
border-top: 2px #999 solid;
}
/*---- 頁尾 ----*/
#FOOTER
{
background-color: #FFFF00;
}
#FOOTER h2, #FOOTER p
{
font-size: 12px;
padding: 5px 20px;
font-family: Arial;
color: #FFFFFF;
}
.clearfloat
{
clear: both;
height: 0;
font-size: 1px;
line-height: 0px;
}
◎ 更多的 DIV 架構
恩，有人做好了大致的DIV架構讓大家直接套用修改…40個DIV架構應該夠用了
點我下載 (來源自： http://blog.html.it/layoutgala/)
◎偶然看到的網頁排版的18個提醒 (CSS設計時可參考)
- LOGO：基本logo特徵，符合logo設計基礎（平面設計通用）顯示器效果：清晰度，最小尺寸（因顯示器分辨率而帶來的，等同線下平面設計的印刷效果）
- 文字：內容主標副標決定字體、字體大小、粗細；狀態決定顏色（默認或者根據網站特殊統一）
- 廣告、內容圖片：尺寸樣式的定位，同一頁面的和諧性，圖片的優化，位置的節奏，大小對比。
- ICON：品牌性，表達準確合理，設計手法（依據品牌性），一致性，作用：吸引，醒目，方便識別、理解、操作、記憶。
- BUTTON：區別（不可點擊），根據人的生活經驗：厚度，可按，質感（實體聯想），色彩（品牌性、統一性、對比性）；統一的樣式大小（依據裡面文字的內邊距統一）
- 背景圖片：氛圍效果營造，同產品的統一性，優化（品質大小，色彩信息，實現方案）
- 圖文排版：主圖次文，圖文節奏，空隙，樣板化。
- 當前狀態：放大（形狀），變色（反色、對比色、明度純度區別色），鏈進鏈出後指定內容提示。
- 交互控制項：樣式合理準確性（人對系統默認的認知和生活常規認知），狀態（視覺表現樣式和動作過程優化），創意。
- LOADIONG：內容關聯性（loading前後的內容關聯），無聊等待的樂趣，體積、面積優化，創意。
- 使用者回饋：包含了成功、出錯、提示、無結果等回饋，文案（明確、合理、人性化、創意），圖形（明確、醒目、色彩的心理認知準確度）。
- 動畫效果：過程合理（模擬真實環境的合理化），連續，節奏感，用戶日常動作表現，音效配合，創意。
- 首尾設計：首（品牌宣傳、自身特點、明確內容、氣氛表達、創意。) 尾(呼應、節奏，創意。
- 適應屏設計(全屏設計)：最大最小屏幕的考慮（文字、圖片的位置、折行效果）
- 固定尺寸的欄位設計：合理的單元格（考慮黃金分割），單元格面積節奏，邊距統一性
- DEMO 設計樣稿：對內容最多最少的考慮。
- 頁面：品牌性，基調元素一致性，復用性，節奏感、面積感，視覺第一吸引，引導瀏覽，點線面關係，素描原理（運用素描的基本規律來做頁面）。
- 閱讀：背景對閱讀（視力）的舒適度，內容與背景的對比舒適度。
