網頁美工 XHTML+CSS (DIV + CSS)

純綷整理資料的筆記…文章雖命為XHTML+CSS，不過還是重在與Visual Studio這個工具的銜接(DIV + CSS)…所以淺嘗輒止…

網頁美工以目前來說，主流依然還是DIV + CSS
搭配使用的網頁美工工具嘛，也還是 Fireworks、Photoshop、Dreamwever

◎CSS+DIV 進行網頁美工，和傳統的 TABLE 網頁布局而具有以下4個顯著優勢

1. 美工設計與網頁文字內容可以做區分
   將設計部分做區隔出來放在一個獨立樣式文件中，HTML文件中只存放文本信息。
2. 提昇搜索引擎對網頁的索引效率
   用只包含結構化內容的HTML代替嵌套的標籤，搜索引擎將更有效地搜索到你的網頁內容。
3. 提高頁面瀏覽速度
   對於同一個頁面視覺效果，採用CSS+DIV重構的頁面容量要比TABLE編碼的頁面語法少太多了，前者一般只有後者的1/2大小。
4. 容易美工/程式維護和改版
   簡單的修改幾個CSS文件就可以重新設計整個網站的頁面。
5. 美工設計和網頁程式再分離
   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設計時可參考)

1. LOGO：基本logo特徵，符合logo設計基礎（平面設計通用）顯示器效果：清晰度，最小尺寸（因顯示器分辨率而帶來的，等同線下平面設計的印刷效果）
2. 文字：內容主標副標決定字體、字體大小、粗細；狀態決定顏色（默認或者根據網站特殊統一）
3. 廣告、內容圖片：尺寸樣式的定位，同一頁面的和諧性，圖片的優化，位置的節奏，大小對比。
4. ICON：品牌性，表達準確合理，設計手法（依據品牌性），一致性，作用：吸引，醒目，方便識別、理解、操作、記憶。
5. BUTTON：區別（不可點擊），根據人的生活經驗：厚度，可按，質感（實體聯想），色彩（品牌性、統一性、對比性）；統一的樣式大小（依據裡面文字的內邊距統一）
6. 背景圖片：氛圍效果營造，同產品的統一性，優化（品質大小，色彩信息，實現方案）
7. 圖文排版：主圖次文，圖文節奏，空隙，樣板化。
8. 當前狀態：放大（形狀），變色（反色、對比色、明度純度區別色），鏈進鏈出後指定內容提示。
9. 交互控制項：樣式合理準確性（人對系統默認的認知和生活常規認知），狀態（視覺表現樣式和動作過程優化），創意。
10. LOADIONG：內容關聯性（loading前後的內容關聯），無聊等待的樂趣，體積、面積優化，創意。
11. 使用者回饋：包含了成功、出錯、提示、無結果等回饋，文案（明確、合理、人性化、創意），圖形（明確、醒目、色彩的心理認知準確度）。
12. 動畫效果：過程合理（模擬真實環境的合理化），連續，節奏感，用戶日常動作表現，音效配合，創意。
13. 首尾設計：首（品牌宣傳、自身特點、明確內容、氣氛表達、創意。)  尾(呼應、節奏，創意。
14. 適應屏設計(全屏設計)：最大最小屏幕的考慮（文字、圖片的位置、折行效果）
15. 固定尺寸的欄位設計：合理的單元格（考慮黃金分割），單元格面積節奏，邊距統一性
16. DEMO 設計樣稿：對內容最多最少的考慮。
17. 頁面：品牌性，基調元素一致性，復用性，節奏感、面積感，視覺第一吸引，引導瀏覽，點線面關係，素描原理（運用素描的基本規律來做頁面）。
18. 閱讀：背景對閱讀（視力）的舒適度，內容與背景的對比舒適度。