網(wǎng)站設(shè)計(jì)手冊(cè)

前言                  
 第1章  網(wǎng)站結(jié)構(gòu) 1                  
 1.1  網(wǎng)站結(jié)構(gòu)圖 1                  
 1.2  網(wǎng)站邏輯模型圖的設(shè)計(jì) 3                  
 1.3  選題 4                  
 1.3.1  企業(yè)網(wǎng)站 4                  
 1.3.2  非企業(yè)網(wǎng)站 4                  
 1.4  劃分信息 6                  
 1.4.1  自頂向下劃分 6                  
 1.4.2  自底向上劃分 8                  
 1.5  層次劃分和優(yōu)化 10                  
 1.5.1  網(wǎng)站的頂層結(jié)構(gòu) 11                  
 1.5.2  網(wǎng)站的下層結(jié)構(gòu) 12                  
 1.6  目錄安排 15                  
 1.7  網(wǎng)頁關(guān)系 16                  
 1.7.1  信息片段 17                  
 1.7.2  順序關(guān)系 17                  
 1.7.3  矩陣關(guān)系 18                  
 1.7.4  樹形關(guān)系 19                  
 1.7.5  網(wǎng)狀關(guān)系 19                  
 本章小結(jié) 21                  
 第2章  導(dǎo)航系統(tǒng)和用戶接口 22                  
 2.1  導(dǎo)航系統(tǒng) 22                  
 2.1.1  菜單 24                  
 2.1.2  站內(nèi)目錄 26                  
 2.1.3  站點(diǎn)目錄的建立 26                  
 2.1.4  站內(nèi)搜索 28                  
 2.1.5  網(wǎng)站地圖及實(shí)例 28                  
 2.1.6  你的位置 37                  
 2.1.7  腳注及其他 38                  
 2.1.8  設(shè)計(jì)導(dǎo)航系統(tǒng)的注意事項(xiàng) 39                  
 2.2  用戶接口 47                  
 2.2.1  Step by Step 47                  
 2.2.2  錯(cuò)誤校驗(yàn) 49                  
 2.2.3  關(guān)于用戶名 50                  
 本章小結(jié) 52                  
 第3章  頁面設(shè)計(jì) 53                  
 3.1  頁面大小 53                  
 3.1.1  瀏覽器的偏移量 54                  
 3.1.2  畫布（canvas）大小 55                  
 3.1.3  安裝了Microsoft Office之后的問題 56                  
 3.1.4  建議的頁面大小 56                  
 3.2  頁面主題 57                  
 3.2.1  分隔線 58                  
 3.2.2  標(biāo)題圖 60                  
 3.2.3  頁眼圖 60                  
 3.2.4  制作按鈕和條形圖標(biāo) 61                  
 3.2.5  制作編目圖標(biāo) 63                  
 3.2.6  主題參考 65                  
 3.3  頁面劃分 69                  
 3.3.1  兩欄式結(jié)構(gòu) 69                  
 3.3.2  三欄式結(jié)構(gòu) 69                  
 3.3.3  兩欄/三欄式相結(jié)合 70                  
 3.3.4  兩欄. 三欄式的變形 71                  
 3.4  設(shè)計(jì)頁面原始結(jié)構(gòu)框圖 72                  
 3.4.1  綜合性站點(diǎn)的原始結(jié)構(gòu)框圖 72                  
 3.4.2  企業(yè)網(wǎng)站的原始結(jié)構(gòu)框圖 72                  
 3.4.3  企業(yè)站點(diǎn)與非企業(yè)站點(diǎn)對(duì)于頁面原始結(jié)構(gòu)規(guī)劃的不同之處 72                  
 3.5  設(shè)計(jì)頁面圖 75                  
 3.5.1  關(guān)于設(shè)計(jì)的幾點(diǎn)建議 76                  
 3.5.2  利用工具設(shè)計(jì)頁面圖 77                  
 3.6  拆分頁面 78                  
 3.6.1  第一次拆分 78                  
 3.6.2  輸出HTML代碼及初步優(yōu)化 81                  
 3.6.3  第二次頁面拆分 85                  
 3.6.4  第三次頁面拆分 87                  
 3.7  代碼優(yōu)化（使網(wǎng)頁苗條） 91                  
 3.7.1  在HTML中明確地標(biāo)注圖像尺寸（不要省略圖像的                  
       WIDTH和HEIGHT屬性） 91                  
 3.7.2  去掉多余的圖像 93                  
 3.7.3  使用適用的圖像格式 93                  
 3.7.4  使用緩存 95                  
 3.7.5  保證圖像中一行里的顏色數(shù)盡可能得少 95                  
 3.7.6  盡可能使用文本而不用圖形 96                  
 3.7.7  制作快速表格的技巧 98                  
 3.7.8  測試你的網(wǎng)頁 103                  
 3.8  模板的創(chuàng)建 104                  
 3.8.1  半模板 104                  
 3.8.2  全模板 105                  
 3.9  頁面更新和管理計(jì)劃 108                  
 3.10  幾種例行頁面的設(shè)計(jì)制作 108                  
 3.10.1  歡迎頁面的制作 108                  
 3.10.2  聯(lián)系頁面的制作 110                  
 3.10.3  雇員信息頁面的制作 110                  
 3.10.4  新聞頁面的制作 113                  
 3.10.5  產(chǎn)品/服務(wù)頁面的制作 116                  
 3.10.6  客戶支持頁面的制作 118                  
 3.11  創(chuàng)意頁面的設(shè)計(jì)制作 120                  
 3.12  頁面實(shí)例 121                  
 3.12.1  歡迎頁面的實(shí)例 121                  
 3.12.2  創(chuàng)意頁面的實(shí)例 122                  
 3.12.3  新聞頁面的實(shí)例 122                  
 3.12.4  雇員頁面的實(shí)例 124                  
 3.12.5  產(chǎn)品頁面的實(shí)例 125                  
 3.12.6  FAQ頁面實(shí)例 127                  
 本章小結(jié) 130                  
 第4章  配色方案 132                  
 4.1  關(guān)于計(jì)算機(jī)的色彩表示 132                  
 4.1.1  顏色十六進(jìn)制數(shù)值 133                  
 4.1.2  RGB值 134                  
 4.2  關(guān)于瀏覽器的安全色彩問題 135                  
 4.3  關(guān)于顏色的語言 136                  
 4.3.1  顏色符號(hào)論圖表 137                  
 4.3.2  不同文化的顏色符號(hào)論 137                  
 4.3.3  顏色與心理 137                  
 4.4  Web頁面的用色要求 141                  
 4.5  頁面顏色的選擇 141                  
 4.5.1  主色 142                  
 4.5.2  輔色 142                  
 4.6  配色方法 145                  
 4.6.1  配色竅門 146                  
 4.6.2  幾種配色方案 147                  
 4.7  給色彩制作檔案 149                  
 本章小結(jié) 150                  
 第5章  CSS樣式表 151                  
 5.1  樣式表的寫法 151                  
 5.1.1  樣式表寫法分類 151                  
 5.1.2  文字屬性控制 153                  
 5.1.3  表單屬性控制 154                  
 5.1.4  鏈接 155                  
 5.2  樣式表舉例 156                  
 本章小結(jié) 160                  
 第6章  表格的應(yīng)用 161                  
 6.1  表格的作用 161                  
 6.1.1  確定頁面布局 161                  
 6.1.2  隨心所欲地安排頁面內(nèi)容 161                  
 6.1.3  在某種程度上替代圖像 161                  
 6.2  表格的放置 162                  
 6.2.1  單級(jí)表格式 162                  
 6.2.2  多級(jí)嵌套式 162                  
 6.2.3  重復(fù)單級(jí)式 163                  
 6.3  表格的制作 163                  
 6.3.1  表格的寬度 163                  
 6.3.2  表格的邊框 164                  
 6.3.3  表元的間隙 166                  
 6.3.4  表格的分隔線 169                  
 6.3.5  表元內(nèi)容的對(duì)齊布局 170                  
 6.3.6  表格在頁面中的對(duì)齊/布局 172                  
 6.4  表格的使用竅門 173                  
 6.4.1  制作按鈕 173                  
 6.4.2  制作線條 176                  
 6.4.3  替代圖像 183                  
 6.5  關(guān)于表格的幾點(diǎn)建議 189                  
 6.5.1  表格的多級(jí)嵌套最好不超過三層 189                  
 6.5.2  盡量不要使用不規(guī)則表格 189                  
 本章小結(jié) 189                  
 第7章  圖的應(yīng)用 190                  
 7.1  網(wǎng)頁圖片的使用原則 190                  
 7.1.1  盡量使用小圖 190                  
 7.1.2  使用高中質(zhì)量的圖片 190                  
 7.2  網(wǎng)頁圖片的選擇 191                  
 7.2.1  內(nèi)容的選擇 191                  
 7.2.2  色調(diào)的選擇 191                  
 7.2.3  質(zhì)量的選擇 191                  
 7.2.4  選擇圖片的方法 192                  
 7.3  網(wǎng)頁圖片的修飾 192                  
 7.3.1  圖的淡化 192                  
 7.3.2  圖的羽化 193                  
 7.3.3  圖的單色化 194                  
 7.3.4  修改背景色 196                  
 7.3.5  背景透明化 198                  
 7.3.6  背景模糊 201                  
 7.3.7  圖像的組合 202                  
 7.3.8  圖像勾邊 202                  
 7.4  增加網(wǎng)頁立體效果 206                  
 7.4.1  陰影效果 206                  
 7.4.2  倒影效果 207                  
 7.4.3  光影效果 212                  
 7.4.4  浮雕效果 213                  
 7.5  在哪里使用圖最恰當(dāng) 214                  
 7.5.1  背景 214                  
 7.5.2  首頁 215                  
 7.5.3  coverpage 215                  
 7.5.4  文字密集處 215                  
 7.5.5  提交按扭 215                  
 7.6  隱形圖的使用 215                  
 7.7  圖和表格的結(jié)合 216                  
 7.7.1  圖和表格底色的結(jié)合 216                  
 7.7.2  巧用表格背景圖 217                  
 7.8  用CSS的濾鏡功能處理圖片 220                  
 7.8.1  Alpha濾鏡 220                  
 7.8.2  Blur濾鏡 222                  
 7.8.3  FlipH和FlipV濾鏡 223                  
 7.8.4  Chroma濾鏡 225                  
 7.8.5  Dropshadow濾鏡 226                  
 7.8.6  Glow濾鏡 227                  
 7.8.7  Gray濾鏡 228                  
 7.8.8  Light濾鏡 228                  
 7.8.9  Shadow濾鏡 230                  
 7.8.10  Wave濾鏡 231                  
 7.8.11  CSS濾鏡的綜合應(yīng)用 232                  
 7.9  用Script程序使圖片產(chǎn)生意想不到的效果 233                  
 7.10  關(guān)于GIF動(dòng)畫 234                  
 7.11  圖的替代品 234                  
 7.11.1  表格 234                  
 7.11.2  特殊字符 234                  
 本章小結(jié) 235                  
 第8章  分隔線的應(yīng)用 236                  
 8.1  線的類型 236                  
 8.1.1  復(fù)雜型 236                  
 8.1.2  簡單型 237                  
 8.1.3  其他型 237                  
 8.2  線的制作 238                  
 8.2.1  制作精美的線條 238                  
 8.2.2  制作10×10像素的小圖 238                  
 8.2.3  在HTML中勾勒表格邊框 238                  
 8.2.4  用表格背景色做線 239                  
 8.2.5  用表格背景圖做線 239                  
 8.2.6  使用HTML中的 239                  
 本章小結(jié) 240                  
 第9章  文字的處理 241                  
 9.1  文字的擺放 241                  
 9.1.1  文字的布局 241                  
 9.1.2  文字的擺放規(guī)則 243                  
 9.2  使用CSS的濾鏡效果處理文字 244                  
 9.2.1  Alpha濾鏡 244                  
 9.2.2  Blur濾鏡 245                  
 9.2.3  FlipH, FlipV濾鏡 246                  
 9.2.4  DropShadow濾鏡 247                  
 9.2.5  Glow濾鏡 248                  
 9.2.6  Shadow濾鏡 248                  
 9.2.7  Wave濾鏡 249                  
 9.2.8  CSS濾鏡的綜合應(yīng)用 249                  
 9.3  使用Script程序處理文字 250                  
 本章小結(jié) 253                  
 第10章  按鈕及圖標(biāo) 254                  
 10.1  根據(jù)頁面主題收集按鈕和圖標(biāo) 254                  
 10.2  根據(jù)頁面主題設(shè)計(jì)按鈕和圖標(biāo) 255                  
 10.3  使用Script程序制作按鈕 256                  
 10.4  實(shí)戰(zhàn)：借助軟件制作導(dǎo)航按鈕和圖標(biāo) 257                  
 10.4.1  ActionBars 257                  
 10.4.2  AllWebMenus 265                  
 本章小結(jié) 275                  
 第11章  表單應(yīng)用 276                  
 11.1  創(chuàng)建表單頁面 276                  
 11.1.1  創(chuàng)建表單頁面的準(zhǔn)備工作 277                  
 11.1.2  設(shè)計(jì)表單頁面 278                  
 11.2  表單元素的修飾 282                  
 11.2.1  增加表單邊框 282                  
 11.2.2  隱藏表單邊框 283                  
 11.2.3  修改表單邊框 284                  
 11.2.4  修改submit外表 285                  
 11.3  表單區(qū)域的修飾 285                  
 11.3.1  增加表單區(qū)域外框 286                  
 11.3.2  使用小圖片 287                  
 11.3.3  使用區(qū)域背景圖 287                  
 11.3.4  使用精心制作的按鈕圖片 288                  
 11.3.5  使用標(biāo)題圖片 288                  
 11.4  表單頁面實(shí)例 288                  
 本章小結(jié) 289                  
 第12章  隱藏信息, 換取空間 290                  
 12.1  隱藏文字 290                  
 12.2  菜單的應(yīng)用 293                  
 12.2.1  彈出式菜單 294                  
 12.2.2  伸縮式菜單 294                  
 12.2.3  下拉菜單 295                  
 12.3  標(biāo)簽的應(yīng)用 296                  
 12.3.1  圖像的標(biāo)簽 296                  
 12.3.2  鏈接的標(biāo)簽 297                  
 12.4  共享空間 297                  
 12.4.1  圖像共享空間 298                  
 12.4.2  文字共享空間 299                  
 本章小結(jié) 299                  
 第13章  網(wǎng)頁廣告 300                  
 13.1  廣告的分類 300                  
 13.1.1  留給別人的廣告 300                  
 13.1.2  留給自己的廣告 301                  
 13.2  廣告的規(guī)格 301                  
 13.2.1  468×60 301                  
 13.2.2  88×31 301                  
 13.2.3  120×60 302                  
 13.2.4  125×125 302                  
 13.2.5  其他 302                  
 13.3  廣告的位置 303                  
 13.3.1  頁眉 304                  
 13.3.2  頁中 304                  
 13.3.3  頁腳 305                  
 13.3.4  專辟的廣告區(qū) 305                  
 13.4  設(shè)置廣告收費(fèi)標(biāo)準(zhǔn) 306                  
 13.5  跟蹤Web廣告 307                  
 13.6  廣告隨機(jī)顯示系統(tǒng)的制作 308                  
 13.6.1  用JavaScript實(shí)現(xiàn)廣告的互換顯示 308                  
 13.6.2  使用Meta + iframe 技術(shù) 309                  
 13.7  網(wǎng)頁廣告的設(shè)計(jì)制作 311                  
 13.7.1  廣告的設(shè)計(jì) 313                  
 13.7.2  制作GIF格式的動(dòng)畫廣告 316                  
 13.8  關(guān)于Rich Media Banner 322                  
 本章小結(jié) 323                  
 附錄一  相關(guān)網(wǎng)址 324                  
 附錄二  CSS的基本語法 329                  
 附錄三  網(wǎng)頁廣告常見問答 335                  
 附錄四  瀏覽器相容性圖表 338