大巧不工:Web前端設(shè)計(jì)修煉之道
第1章Web前端開發(fā)
1.1 Web大局觀
1.1.1 混沌初開——Web的誕生
1.1.2 網(wǎng)絡(luò)技術(shù)的領(lǐng)導(dǎo)者
1.1.3 不斷優(yōu)化的客戶端技術(shù)
1.1.4 服務(wù)端技術(shù)的成熟
1.2 地位、曲線和使命
1.2.1 前端開發(fā)路漫漫
1.2.2 千軍易得，一將難求
1.2.3 令人望而卻步的學(xué)習(xí)曲線
1.2.4 前端開發(fā)人員如何自身定位
1.3 前端開發(fā)所需掌握的技術(shù)
1.4 前端開發(fā)常用的工具
1.4.1 設(shè)計(jì)類工具
1.4.2 原型類工具
1.4.3 調(diào)試類工具／27
1.Firebug
2.HttpWatch
3.Yslow
7大類、35條準(zhǔn)則
□盡量減少HTTP請(qǐng)求
□緩存Ajax
□推遲加載
□提前加載
□減少DOM元素?cái)?shù)量
□使用域名劃分頁(yè)面內(nèi)容
□盡量減少iframe的數(shù)量
□盡可能地減少DNS的查找
□避免404錯(cuò)誤
□避免頁(yè)面的重定向
1.4.4 輔助類工具／32
CSS Sprites:http://www.cssforest.org/blog
1.5 小結(jié)／33
第2章 打造前端設(shè)計(jì)的基石——交出你的原型稿／34
2.1 UCD——以用戶為中心的設(shè)計(jì)原則／35
原型設(shè)計(jì)、可用性設(shè)計(jì)、模型設(shè)計(jì)
2.1.1 關(guān)注用戶／36
1.用戶群分析
□按照之前的維度進(jìn)行用戶群分類
□分析不同用戶群體的使用習(xí)慣
□為不同的用戶群制定不同的方案
□確定用戶群的重要級(jí)別
2.人物角色分析
2.1.2 用戶調(diào)研／39
1.問卷調(diào)查
2.可用性測(cè)試
2.1.3 更含蓄的方式／42
1.服務(wù)器端數(shù)據(jù)
WEB服務(wù)器日志文件、網(wǎng)絡(luò)監(jiān)視器
2.客戶端數(shù)據(jù)
熱點(diǎn)圖
3.數(shù)據(jù)挖掘
2.2 交出第一份設(shè)計(jì)稿／46
2.2.1 為什么原型設(shè)計(jì)很重要／47
2.2.2 原型如何表現(xiàn)／48
1.需求
2.精簡(jiǎn)
37Signals例子
精簡(jiǎn)：清晰、好用、漂亮、簡(jiǎn)單
3.規(guī)則
一致性，設(shè)計(jì)風(fēng)格貫穿軟件的始終，顏色的感觀，舒適度
在做原型時(shí)，需要在視覺層次、元素的比例、排版、空間保持一致
4.重構(gòu)
（1）讓交互變得更友好
（2）向好的事例看齊
（3）再加一點(diǎn)點(diǎn)創(chuàng)新
2.2.3 做好原型產(chǎn)品的注意事項(xiàng)／56
1.目標(biāo)
了解目標(biāo)、制定計(jì)劃、提出問題
2.為人而設(shè)計(jì)
對(duì)不同層次的人發(fā)掘他們的行為
3.重功能，輕外觀
4.不要懶惰
5.頭腦風(fēng)暴
6.選擇適合的工具
2.3 讓工具幫助你／57
2.3.1 創(chuàng)建用戶模型／58
整個(gè)產(chǎn)品設(shè)計(jì)流程可以分為幾個(gè)階段：
1.基礎(chǔ)調(diào)研
2.產(chǎn)品分析
3.原型設(shè)計(jì)
4.詳細(xì)設(shè)計(jì)
5.設(shè)計(jì)維護(hù)
2.3.2 BalsamiqMockups設(shè)計(jì)概念圖／59
2.3.3 AxureRP設(shè)計(jì)交互原型／60
2.3.4 更真實(shí)的表現(xiàn)／66
2.4 小結(jié)／71
第3章 從過去到未來——前端設(shè)計(jì)演變之路／72
3.1 最熟悉的陌生人／73
3.1.1 瀏覽器之爭(zhēng)／73
3.1.2 性能對(duì)比／74
3.1.3 IEPKWeb標(biāo)準(zhǔn)／77
3.2 結(jié)構(gòu)的變遷／83
3.2.1 表格噩夢(mèng)／83
1.可用性問題
2.兼容性問題
3.可維護(hù)性問題
3.2.2 基于DIV和CSS的布局結(jié)構(gòu)／86
原則：首先要結(jié)構(gòu)清晰、簡(jiǎn)潔；其次必須要有語(yǔ)義
1.清除不必要的DIV標(biāo)記
2.使用語(yǔ)義化的標(biāo)簽及命名標(biāo)識(shí)
3.盡量減少使用DIV標(biāo)記
4.格式化代碼
5.在布局結(jié)尾加上注釋
3.3 不單純是腳本／90
3.3.1 JavaScript的原貌／90
3.3.2 華麗的進(jìn)化／92
3.3.3 AjaX不得不提／95
3.3.4 腳本框架的出現(xiàn)／96
3.4 接觸未來(一)——初探HTML5／101
3.4.1 摘要／101
3.4.2 結(jié)構(gòu)／102
<header>，表示頁(yè)面主體的頭部
<nav>，標(biāo)記一些鏈接的結(jié)合體，常用的是導(dǎo)航條、邊欄常用的鏈接
<section>，表示一塊區(qū)域
<article>，表示一條獨(dú)立的記錄
<aside>，可以用來表示標(biāo)記、側(cè)欄、摘要、引用
<footer>，頁(yè)腳
3.4.3 Flash殺手Canvas?／105
3.4.4 設(shè)計(jì)一個(gè)布局結(jié)構(gòu)文檔／107
1.骨架
2.頁(yè)眉
<header>
<nav>
<ul><li></li></ul>
</nav>
</header>
3.主體內(nèi)容
<section id=”content”>..</section>
<aside id=”news”>..</aside>
4.頁(yè)腳
<footer>
<section id=”about”></section>
<section id=”links”></section>
</footer>
3.4.5 對(duì)表單的支持／109
1.新增的控件類型
Url/email/date/tel/search/datetime/date/month/week/number/range/color
2.Data屬性
<select data=”http://”>
3.內(nèi)建的表單校驗(yàn)
<input type=”number” min=”10” max=”50”/>
4.表單XML支持
3.5 接觸未來(二)——CSS3的世界很精彩／110
1.圓角
2.陰影
□邊框陰影
□文字陰影
3.5.1 選擇器的變化／113
1.標(biāo)簽選擇器
2.ID選擇器
#
3.類選擇器
.
4.后代選擇器
#header .logo h2{...}
5.組合選擇器
Input,select{line-height:1em;}
6.屬性選擇器
alt^=”value”
a[title$=”info”]{
top:0;
right:0;
}
7.同級(jí)組合選擇
div~img{}
8.偽類
td:not([class*=”old”])(...)
3.5.2 布局的變化／116
3.5.3 樣式的變化／119
1.自定義字體
2.邊框背景
3.透明及RGBA
3.5.4 動(dòng)畫／120
3.6 小結(jié)／121
第4章 讓你的設(shè)計(jì)深入人心——可用性設(shè)計(jì)／122
□有效性
□效率
□可記憶性
□容錯(cuò)性
□易學(xué)性
4.1 可用性原則／123
4.1.1 別讓我思考／124
1.一目了然
2.可用性暗礁
（1）鏈接
（2）按鈕
4.1.2 停止你的假設(shè)／129
1.用戶喜歡掃描而不是閱讀
2.用戶喜歡嘗試性選擇
3.用戶喜歡勉強(qiáng)應(yīng)付
□用戶不關(guān)心產(chǎn)品的內(nèi)部機(jī)制：只要通過瀏覽器搜索達(dá)到目的
□只要能使用，就不會(huì)輕易去改變
4.1.3 針對(duì)掃描而設(shè)計(jì)／132
1.層次清晰
2.尊重習(xí)慣
3.明確能點(diǎn)擊的元素
4.降低視覺噪聲
4.2 高可用性頁(yè)面／136
4.2.1 導(dǎo)航之道／137
1.web導(dǎo)航的要素
要素：網(wǎng)站標(biāo)識(shí)、主導(dǎo)航和搜索
2.網(wǎng)站ID
網(wǎng)站LOGO
3.主導(dǎo)航條
主導(dǎo)航條：到達(dá)最主要位置的鏈接，一般位于頁(yè)面正上方，而且非常醒目
導(dǎo)航架構(gòu)：深窄型和寬淺型
4.工具導(dǎo)航
主要包括：幫助、聯(lián)系我們、站點(diǎn)地圖
5.我要“回家”
無論到什么地方，用戶都可以依靠主頁(yè)重新回來。
6.提供搜索
□用詞：用詞準(zhǔn)確、通用
□選項(xiàng)：慎用選項(xiàng)
7.頁(yè)面名稱
? □每個(gè)頁(yè)面都是頁(yè)面名稱
? □頁(yè)面名稱總是在合適的位置，而且位置有持久性
? □名稱讓人一目了然
? □名稱與鏈接最好保持一致
8.我在哪里
□當(dāng)前位于什么位置
□通過顏色和粗體的方式來區(qū)別其他欄目
9.面包屑導(dǎo)航
□位于頁(yè)面上方
□使用“>>”號(hào)間隔
□使用小字體，因?yàn)樗禽o助機(jī)制
□路徑與當(dāng)前位置要區(qū)分
4.2.2 當(dāng)鏈接變成云／145
鏈接生來不平等，我們要想盡辦法讓用戶容易定位到那些重要的鏈接
4.2.3 設(shè)計(jì)可用的表單／147
1.最短時(shí)間完成表單
首先：使用適合用戶快速掃描的布局方式
其次：盡量減少表單的內(nèi)容項(xiàng)
最后：要更好的利用鍵盤
2.無約束
表單設(shè)計(jì)必須簡(jiǎn)潔，將不必要的信息放一邊，排版清晰易懂
3.有效的幫助和反饋
如果表單項(xiàng)目比較多，建議分多頁(yè)進(jìn)行填寫，但必須清楚告訴當(dāng)前在第幾個(gè)步驟。
（1）在輸入域后加上色彩區(qū)別的幫助信息
（2）在內(nèi)容校驗(yàn)時(shí)實(shí)時(shí)的錯(cuò)誤提示幫助
（3）在標(biāo)簽欄加上彈出的幫助信息
（4）在操作成功后提醒用戶的反饋信息
4.2.4 拒絕寫作藝術(shù)／153
1.頁(yè)面需要簡(jiǎn)潔
2.說明也需要簡(jiǎn)潔
3.試著簡(jiǎn)化一下
4.3 可用性測(cè)試／156
4.3.1 如何測(cè)試／157
4.3.2 現(xiàn)象與本質(zhì)／158
4.4 巧妙地應(yīng)對(duì)錯(cuò)誤／159
4.4.1 提前預(yù)防／162
發(fā)現(xiàn)錯(cuò)誤及時(shí)引導(dǎo)用戶改正，出現(xiàn)錯(cuò)誤后不能輸入的內(nèi)容都消失了
4.4.2 設(shè)計(jì)有用的信息／165
錯(cuò)誤信息的設(shè)計(jì)并不是要設(shè)計(jì)“警告信息”，而是要設(shè)計(jì)“提示信息”，幫助用戶解決使用中所出現(xiàn)的問題。
□告訴用戶在哪個(gè)業(yè)務(wù)環(huán)節(jié)出現(xiàn)了問題，可以使用文字或編號(hào)來標(biāo)識(shí)
□不是每個(gè)人都能夠記住客服電話，請(qǐng)加上聯(lián)系方式，更好的方式是提供直接反饋渠道的鏈接。
□注意用詞和目的導(dǎo)向，提示的目的是告訴用戶下一步要怎么做，同時(shí)方便運(yùn)維人員來定位錯(cuò)誤
404頁(yè)面也要設(shè)計(jì)與系統(tǒng)的整體風(fēng)格保持一致
4.4.3 人性化操作／169
操作不需要太復(fù)雜，要盡量在交互過程中提供友好、合理的操作流程。
4.5 系統(tǒng)一致性設(shè)計(jì)／170
一致原則：視覺一致、操作一致、內(nèi)外一致
4.5.1 規(guī)范設(shè)計(jì)／172
規(guī)范包括：信息架構(gòu)規(guī)范、界面設(shè)計(jì)規(guī)范、交互規(guī)范、語(yǔ)言文字使用規(guī)范等
4.5.2 有始有終／172
色彩，文字的字體選擇和排版上都需要一致
4.6 小結(jié)／173
第5章 原型模型化／174
5.1 布局之道／175
1.固定的布局
2.流性的布局
當(dāng)瀏覽器窗口大小變化時(shí)，布局也隨之發(fā)生變化-放大或縮小
3.彈性的布局
隨著尺寸的變化，布局會(huì)作相應(yīng)的調(diào)整
5.1.1 基本布局樣式屬性
1.單位
2.浮動(dòng)
3.定位
相對(duì)定位和絕對(duì)定位
5.1.2 基于網(wǎng)格系統(tǒng)的CSS框架布局
5.1.3 流體布局
5.2 樣式就是設(shè)計(jì)
5.2.1 必須了解的樣式技術(shù)
1.規(guī)劃樣式的文件
1）規(guī)劃樣式文件：開發(fā)態(tài)和運(yùn)行態(tài)
2）質(zhì)量需要著重指出重置樣式的重要性
3）為樣式加上清晰的注釋
2.重置樣式
3.為樣式加上清晰的注釋
（1）簡(jiǎn)寫
減少樣式的方法，即將多行合并在一個(gè)屬性內(nèi)。
（2）圖像合并
減少HTTP的請(qǐng)求數(shù)量，節(jié)省寬帶并加快頁(yè)面的裝載速度。
設(shè)計(jì)時(shí)要有效規(guī)劃圖片背景
（3）優(yōu)先權(quán)
□元素的內(nèi)聯(lián)樣式屬性
□每個(gè)ID選擇器
□每個(gè)class選擇器、屬性選擇器及偽類
□每個(gè)元素或偽元素
□其他選擇器
□！Important優(yōu)先權(quán)最高
（4）Hack
將一些Hack語(yǔ)法剖離至一個(gè)單獨(dú)的文件，最后通過條件判斷是否需要引用Hack
IE：任意的IE版本
It IE version：低于指定IE版本
Ite IE version：低于或等于指定IE版本
IE version：指定IE版本
gt IE version：高于指定IE版本
gte IE version：高于或等于指定IE版本
IE6及以下版本：*html{} ”寫法
IE7及以下版本：*:first-child+html{} *html{}
IE7? *:first-child+html{}
IE7及現(xiàn)代瀏覽器：html>body
現(xiàn)代瀏覽器（除IE7）：html>/**/body{}
現(xiàn)代瀏覽器（除IE6及以下版本）：!important
（5）驗(yàn)證
W3C驗(yàn)證工具
5.2.2 使用樣式完成所有事情
1.圓角
分為上、中、下
.inside{width:344px;}
.topgap{background:url(fix-cornes-top.png)? no-repeat; height:9px;}
.middlegap{background:url(fix-cornes-middle.png)? repeat-y; padding:5px;}
.bottomgap{background:url(fix-cornes-bottom.png)? no-repeat; height:9px;}
<div>
? <p class=”topgap”></p>
? <p class=”middlegap”>內(nèi)容區(qū)域</p>
? <p class=”bottomgap”></p>
</div>
? ? ? ? 分為：左上角、右上角、內(nèi)容角、左下角、右下角
? ? ? ? <div id=”cornerexample”>
? ? ? ? ? ? <div class=”top-left”/>
? ? ? ? ? ? <div class=”top-right”/>
? ? ? ? ? ? <div class=”inside”>
? ? ? ? ? <h2>流動(dòng)圓角例子</h2>
</div>
<div class=”bottom-left”/>
? ? ? ? ? ? <div class=”bottom-right”/>
? ? ? ? </div>
2.圖像替換
圖像替換的中心思想就是使用背景圖像來替換文本，還可以使用display屬性將文本設(shè)置為none
3.列表
（1）無序列表
LI
（2）有序列表
OL
（3）定義列表
以DL標(biāo)記開始，每個(gè)自定義列表項(xiàng)以DT開始，每個(gè)列表項(xiàng)的定義以DD開始
4.表單
1）為給表單容器添加邊框及背景，將表單輸入域與按鈕操作區(qū)域進(jìn)行視覺區(qū)分
2）將表單輸入域部分設(shè)置為自上而下的布局
3）字體及輸入框設(shè)置。為<legend>內(nèi)的文字、<label>、<p>
4）去除fieldset上的默認(rèn)邊框，重寫表單中的輸入域及復(fù)選框樣式
5.3 動(dòng)態(tài)交互之美
5.3.1 javascript設(shè)計(jì)新思維
1.事件驅(qū)動(dòng)的腳本設(shè)計(jì)
2.不要過分依賴腳本
通過javascript完成一些校驗(yàn)可以減輕服務(wù)器壓力。
3.前端需要分層
分為三層次：結(jié)構(gòu)HTML、表現(xiàn)CSS、行為javascript
□腳本代碼更加簡(jiǎn)潔、規(guī)范、便于代碼維護(hù)
□獨(dú)立的腳本代碼更容易測(cè)試與調(diào)試
□行為層次的獨(dú)立增加了腳本代碼復(fù)用的可能
基本原則：
□.javascript只出現(xiàn)在.js文件中
□在html中不會(huì)出現(xiàn)onload、onclick等元素，所有的行為都使用綁定的方式來實(shí)現(xiàn)。
□只關(guān)注與行為，不能在javascript中定義CSS樣式
5.3.2 jquery是最佳實(shí)踐
1.為什么選擇jquery
□簡(jiǎn)潔之美
□架構(gòu)之美
□擴(kuò)展之美
2.Javascript的最佳實(shí)踐
□剝離功能邏輯
□不要依賴腳本，嘗試從設(shè)計(jì)上避免錯(cuò)誤的發(fā)生
□設(shè)計(jì)良好的結(jié)構(gòu)
□用ready方法來進(jìn)行初始化
5.3.3 一個(gè)關(guān)于Tab導(dǎo)航的交互例子
□樣式獨(dú)立定義在tab.css中
□樣式設(shè)計(jì)也體現(xiàn)出結(jié)構(gòu)性，所有樣式的作用域在tabs的作用域下
□關(guān)于導(dǎo)航的背景使用了圖片位移技術(shù)，減少了服務(wù)器與客戶端之間的交互
□對(duì)于導(dǎo)航，使用手型的游標(biāo)，讓客戶可以很輕易的知道“這個(gè)東西可以點(diǎn)擊”
5.4 設(shè)計(jì)理念的碰撞與融合
5.4.1 PNG透明色應(yīng)用
□更高的壓縮率
□更高的顏色深度
□基于alpha通道的透明色
5.4.2 大菜單
5.4.3 Tab選項(xiàng)卡
5.4.4 模態(tài)窗口
1.圖像/視頻預(yù)覽
2.注冊(cè)/登錄
3.幫助/提示
5.4.5 unobtrusive的web開發(fā)
1.unobtrusive的HTML
（1）使用更具有語(yǔ)義的HTML標(biāo)簽
<dl>
<dt></dt>
</dl>
（2）只將<table>用于表格式的數(shù)據(jù)
（3）避免使用無意義的<div>和<span>
2.unobtrusive的CSS
（1）所有的CSS都應(yīng)該是非必要的，就算沒有加載CSS也應(yīng)該可以正常訪問頁(yè)面
（2）盡量使用可重用的class，控制class的數(shù)量
（3）將CSS放在外部.css文件或者<style>標(biāo)簽中
（4）活用HTML標(biāo)簽
提倡活用現(xiàn)成的HTML標(biāo)簽，如使用H1，而不是<div class=”header”>
3.unobtrusive的FLASH對(duì)象
4.Unobtrusive的javascript
（1）從純HTML方面來考慮交互設(shè)計(jì)
（2）為了保證應(yīng)用的可訪問性,javascript只用于增加交互效果而不是成為必需品
（3）測(cè)試每一段javascript腳本
（4）將javascript代碼保存在外部的.js文件中，不使用onclick這種內(nèi)聯(lián)屬性的方式來綁定事件，也不使用javascript:void(0)之類的代碼
需要遵循的一些原則：
（1）代碼更加簡(jiǎn)潔，并且易于維護(hù)
1）可讀性意味著更容易被維護(hù)
2）修改樣式只需要修改CSS文件
3）Javascript代碼更容易維護(hù)和測(cè)試
4）修改HTML所造成的風(fēng)險(xiǎn)降低
（2）能夠提高可訪問性
1）所有人都可以訪問你的內(nèi)容
2）不能預(yù)估所有客戶端的情況，但可以肯定的是所有瀏覽器都能夠處理HTML
3）有一部分用戶并不能正常使用javascript的功能
4）有些人使用的是屏幕閱讀器，有些人甚至無法使用鼠標(biāo)
（3）有利于搜索引擎優(yōu)化
1）搜索爬蟲無法解釋CSS和javascript
2）搜索爬蟲只會(huì)順著<a>繼續(xù)爬行
3）Javascript和flash中的內(nèi)容無法被搜索到
4）更多的內(nèi)容、更結(jié)構(gòu)化的HTML使得頁(yè)面相關(guān)性更高
第6章 探索、品味、總結(jié)——經(jīng)典設(shè)計(jì)思維
6.1平衡網(wǎng)站的色彩
6.1.1色彩的聯(lián)想
1.紅色：給人沖動(dòng)、憤怒、熱情、有活力
2.橙色：給人快樂而幸福的顏色
3.黃色：快樂、希望、智慧和輕快的個(gè)性，也代表希望和祝福
4.綠色：健康、與環(huán)保
5.藍(lán)色：海洋、和平、寧?kù)o與深邃，給人有內(nèi)涵和可靠
6.紫色：高貴神秘
7.黑色：深沉、神秘、寂靜、悲哀、壓抑的感覺
8.白色：純潔給人明快、清潔
9.灰色：時(shí)尚感
6.1.2色彩三要素
1.色相
2.飽和度
3.明度
6.1.3流行配色
以暖色為主，還是以冷色為主，再配以輔助色彩，在視覺上達(dá)到一個(gè)平衡點(diǎn)。
四種常見的配色方案：
1.單色系配色
2.相似色配色
3.互補(bǔ)色配色
4.三色配色
6.2簡(jiǎn)潔的思想斗爭(zhēng)
功能、操作流程、視覺效果上也需要簡(jiǎn)潔。
□可以讓站點(diǎn)更容易進(jìn)行導(dǎo)航，站點(diǎn)內(nèi)沒有冗余的信息，頁(yè)面中擁有更少的欄目及內(nèi)容，可以讓用戶輕松的找到所需的內(nèi)容。
□不會(huì)分散用戶的注意力，站點(diǎn)中有突出的重要內(nèi)容，不會(huì)有令人煩躁的內(nèi)容影響用戶的視覺操作。
□目的性明確，可以更精細(xì)的表達(dá)想要表達(dá)的元素
6.2.1有效利用空白
首頁(yè)分為四部分：
□首頁(yè)頂部是一個(gè)帶搜索的主導(dǎo)航條
□突出的產(chǎn)品及鏈接
□相關(guān)產(chǎn)品視頻及其他鏈接
□包含全部導(dǎo)航項(xiàng)的頁(yè)腳
6.2.2是時(shí)候“減肥”了
6.2.3簡(jiǎn)潔的背后
1.簡(jiǎn)潔是一種需求
2.簡(jiǎn)潔是一種文化
3.簡(jiǎn)潔是一種潮流
4.持續(xù)設(shè)計(jì)
6.3排版藝術(shù)
6.3.1充分了解你要使用的字體
1.襯線與無襯線的字體
2.合適的font-family
3.自定義字體
6.3.2其他重要排版要素
1.H1
2.去除原有的空行及空格
6.4 80%的情況下我們可以這樣做
6.4.1輕松導(dǎo)航
1.主導(dǎo)航
2.區(qū)域?qū)Ш?/p>
1）手風(fēng)琴導(dǎo)航
2）標(biāo)簽導(dǎo)航
3.面包屑導(dǎo)航
6.4.2便捷檢索
1.標(biāo)簽云
2.搜索框
3.分頁(yè)
6.4.3快速選擇
1.日期范圍選擇
2.滑門
6.4.4有效幫助
1.操作步驟
2.表單提示
第7章 讓你的設(shè)計(jì)更加完美——優(yōu)化技巧和最佳實(shí)踐
7.1性能在前端的重要性
1.page speed
2.Yslow
7.2前端性能優(yōu)化的基本原則
7.2.1頁(yè)面內(nèi)容的優(yōu)化
1.降低請(qǐng)求數(shù)
（1）合并文件
（2）CSS Sprites
注意：
□不能濫用這樣的技術(shù)，使用不當(dāng)也可能造成后期維護(hù)困難
□若在系統(tǒng)架構(gòu)中緩存策略做得好，同樣可以盡可能少的使用這項(xiàng)技術(shù)，因?yàn)榧虞d時(shí)間會(huì)更長(zhǎng)
□在制作合并背景圖時(shí)，需要合理歸納，盡量將后期變動(dòng)不多的圖片合并在一張圖內(nèi)，并使用多張合并圖
（3）剔除重復(fù)腳本
2.減少交互通信量
（1）壓縮技術(shù)
1）壓縮javascript和CSS
2）優(yōu)化圖像
3）減少cookie體積
（2）合理的利用緩存
1）使用外部javascript和CSS
2）緩存ajax
（3）減少不必要的通信量
1）剔除未用到的腳本和樣式
2）推遲加載內(nèi)容
3）使用GET來完成Ajax請(qǐng)求
4）對(duì)于靜態(tài)內(nèi)容使用無cookie請(qǐng)求
3.合理利用“并行”
（1）盡量避免重定向
（2）慎用iframe
（3）把樣式表置于頂部
（4）腳本放到樣式后面加載
4.節(jié)約系統(tǒng)消耗
（1）避免使用CSS表達(dá)式
（2）避免使用濾鏡
7.2.2服務(wù)器的優(yōu)化
1.使用內(nèi)容分發(fā)網(wǎng)絡(luò)
2.配置合理的緩存機(jī)制
3.Gzip壓縮文件內(nèi)容
4.減少DNS查找次數(shù)
7.3讓自己更容易被發(fā)現(xiàn)
7.3.1SEO策略
1.網(wǎng)站內(nèi)容的規(guī)劃和組織
2.鏈接策略-SEO的重點(diǎn)
（1）導(dǎo)入鏈接
原則：
□導(dǎo)入鏈接的內(nèi)容和你的網(wǎng)站的內(nèi)容相關(guān)
□頁(yè)面中的導(dǎo)入鏈接不宜過多
□避免與未被收錄的或被搜索引擎懲罰的網(wǎng)站交換鏈接
□導(dǎo)入鏈接的可點(diǎn)擊部分要包含我們指定的關(guān)鍵詞
（2）導(dǎo)出鏈接
每個(gè)頁(yè)面導(dǎo)出鏈接不宜過多，一般在10-15個(gè)
原則：
□導(dǎo)出鏈接的內(nèi)容和網(wǎng)站內(nèi)容相關(guān)
□頁(yè)面中的導(dǎo)出鏈接不宜過多，否則會(huì)降低該頁(yè)面在搜索引擎上的權(quán)重
□避免與未被收錄的或被搜索引擎懲罰的網(wǎng)站交換鏈接
（3）內(nèi)部鏈接
注意：
□穿插在主題文章的鏈接數(shù)量控制在3-8個(gè)
□鏈接的對(duì)象要和主題相關(guān)
□更好使用絕對(duì)路徑
3.站點(diǎn)地圖
4.關(guān)鍵詞的選擇和分析
（1）關(guān)鍵詞的選擇原則
□必須是流行的
□不宜太廣泛或者太流行
□長(zhǎng)度不宜太長(zhǎng)
□要與頁(yè)面內(nèi)容保持高度一致
□從搜索者的角度組織關(guān)鍵詞
□切忌關(guān)鍵詞千篇一律
（2）關(guān)鍵詞的選擇方法
□確定核心關(guān)鍵詞
□核心關(guān)鍵詞定義上的擴(kuò)展
□模擬用戶思維設(shè)計(jì)關(guān)鍵詞
□研究競(jìng)爭(zhēng)者的關(guān)鍵詞
（3）關(guān)鍵詞的優(yōu)化
要素：
□在頁(yè)面上安排關(guān)鍵詞要遵循“自左上角向下”的策略，即“從上到下，從左到右”
□在頁(yè)面標(biāo)題title，主要標(biāo)題h1，文本標(biāo)題，小標(biāo)題，摘要，文本主體貨強(qiáng)調(diào)的文本
□在meta標(biāo)簽中設(shè)置關(guān)鍵詞
□盡量避免使用圖片表現(xiàn)關(guān)鍵詞
□可以在URL中放入關(guān)鍵詞，即目錄文件名
□可在網(wǎng)頁(yè)的導(dǎo)入、導(dǎo)出鏈接的可點(diǎn)擊部分包含關(guān)鍵詞
□關(guān)鍵詞盡量出現(xiàn)在頁(yè)面的前200個(gè)字中
（4）關(guān)鍵詞的分析優(yōu)化工具
7.3.2前端搜索引擎友好
1.友好的用戶界面
2.友好的搜索引擎HTML代碼
□確保HTML代碼是嚴(yán)格遵循W3C標(biāo)準(zhǔn)的
□將CSS，javascript和HTML代碼分開
□建立站點(diǎn)地圖
□盡量避免iframe,flash,javascript中創(chuàng)建鏈接
□使用圖片表示關(guān)鍵詞時(shí)必須設(shè)置alt屬性
7.3.3其他
1.謹(jǐn)慎的使用用戶重定向
2.避免URL參數(shù)
3.服務(wù)器響應(yīng)速度
7.3.4維護(hù)SEO效果
1.排名監(jiān)控
2.網(wǎng)站分析
3.關(guān)鍵詞監(jiān)控
4.鏈接監(jiān)控
□這些外部鏈接的數(shù)量和質(zhì)量
□每頁(yè)的導(dǎo)入和導(dǎo)出鏈接是否過多
□導(dǎo)入鏈接是否來自垃圾網(wǎng)站
5.內(nèi)容更新
第8章 思考與展望——淺談Web發(fā)展的未來
8.1不可思意的WEB2.0
8.1.1WEB2.0是一場(chǎng)必然的革命
8.1.2WEB 2.0的新生活
1.博客
2.網(wǎng)站個(gè)性化
3.WIKI
4.社會(huì)化書簽
5.SNS
8.1.3云時(shí)代的腳步
8.2 REST
8.2.1什么是REST
8.2.2 REST初探
8.2.3AJAX和REST組合
8.3 Mashup與Widget
8.3.1 什么是Mashup
他是一種概念，是一個(gè)整合的過程
8.3.2Mashup實(shí)踐
1.API
2.HTML與樣式
3.JQUERY交互
8.3.3 1+1 > 2
□可以從不同的數(shù)據(jù)源聚合內(nèi)容
□輕量級(jí)的表現(xiàn)方法
□服務(wù)端與客戶端分離
8.3.4 Widge
8.4擁抱未來，擁抱WEB3.0
8.4.1WEB 3.0到底怎么樣
1.個(gè)人檔案
2.通用的API
3.語(yǔ)義識(shí)別
8.4.2語(yǔ)義網(wǎng)
1.為什么需要語(yǔ)義網(wǎng)
2.語(yǔ)義網(wǎng)的技術(shù)基礎(chǔ)
8.4.3WEB 3.0先行者
1.知道你的愛好-twine
2.分析語(yǔ)句的DNS-textwise
3.傳統(tǒng)搜索引擎終結(jié)者-powerset
4.語(yǔ)義時(shí)代的簡(jiǎn)歷搜索引擎-zoominfor
5.語(yǔ)義關(guān)系數(shù)據(jù)庫(kù)引擎-semantra
6.豐富你的閱讀-headup
