前端工程師在當(dāng)今社會(huì)的價(jià)值-畢業(yè)論文

1、<p><b>　　高職高專(zhuān)論文</b></p><p>　　姓 名 </p><p>　　所學(xué)專(zhuān)業(yè) </p><p>　　所在班級(jí) </p><p>　　學(xué) 號(hào)

2、 </p><p>　　指導(dǎo)教師 </p><p>　　提交日期 2016年5月27 </p><p>　　山西林業(yè)職業(yè)技術(shù)學(xué)院</p><p><b>　　信息工程系</b></p><p><b>　　畢業(yè)設(shè)計(jì)任務(wù)書(shū)</b

3、></p><p>　　專(zhuān) 業(yè)：計(jì)算機(jī)信息管理</p><p>　　班 級(jí)： 6625 </p><p>　　姓 名： 高 建 </p><p>　　畢業(yè)設(shè)計(jì)題目： 前端工程師在當(dāng)今社會(huì)的價(jià)值 </p><p>　　指導(dǎo)教師姓名： 姚小兵

4、 </p><p>　　負(fù)責(zé)人簽字： </p><p>　　2016年 5 月 27日</p><p>　　內(nèi)容和要求（指導(dǎo)教師填寫(xiě)）：</p><p>　　指導(dǎo)教師（簽字）： 年 月 日</p&

5、gt;<p>　　山西林業(yè)職業(yè)技術(shù)學(xué)院學(xué)生畢業(yè)論文（設(shè)計(jì)）質(zhì)量評(píng)價(jià)方案</p><p>　　山西林業(yè)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)評(píng)審表（指導(dǎo)教師填）</p><p>　　指導(dǎo)教師： 日期： 年 月 日</p><p>　　山西林業(yè)職業(yè)技術(shù)學(xué)院畢業(yè)論文（設(shè)計(jì)）答辯評(píng)審表</p&

6、gt;<p>　　畢業(yè)論文（設(shè)計(jì)）評(píng)價(jià)</p><p><b>　　答辯評(píng)分：</b></p><p><b>　　指導(dǎo)教師評(píng)分：</b></p><p>　　綜合評(píng)定成績(jī)（指導(dǎo)教師評(píng)分占40%，答辯評(píng)分占60%）</p><p>　　答辯委員會(huì)負(fù)責(zé)人：

7、 年 月 日</p><p><b>　　摘 要</b></p><p>　　21世紀(jì)是信息高速發(fā)達(dá)的時(shí)代，網(wǎng)絡(luò)作為當(dāng)今最流行最方便快捷的媒介也越來(lái)越被人們接受，并且深入我們的生活。隨著高校信息化建設(shè)的不斷推進(jìn)，網(wǎng)站的作用超越了傳統(tǒng)的信息獲取，交流它更能體現(xiàn)組織機(jī)構(gòu)的風(fēng)采，性質(zhì)。</p><p>

8、　　在最近幾年中，前端工程師的出現(xiàn)，使得網(wǎng)站體現(xiàn)出更美好的界面，越來(lái)越好看的網(wǎng)站出現(xiàn)在我們的生活中，前端工程師也成為現(xiàn)在工作行業(yè)一個(gè)搶手的職業(yè)，只要你有過(guò)硬的技術(shù)，你就會(huì)找到一份不錯(cuò)的工作。</p><p>　　現(xiàn)在的社會(huì)上對(duì)于前端工程師這個(gè)職業(yè)那是相當(dāng)?shù)娜狈?，前端是近幾年才出?lái)的的一個(gè)有關(guān)于IT方面的職業(yè)，社會(huì)上的公司都要有關(guān)于前端這樣的職員，而學(xué)校卻沒(méi)有關(guān)于前端的課程，說(shuō)以現(xiàn)在社會(huì)上那是供不應(yīng)求，現(xiàn)在每天各個(gè)

9、求職網(wǎng)站都有公司在招聘前端工程師這個(gè)職位的。所以讓我們現(xiàn)在來(lái)說(shuō)說(shuō)“前端工程師”在現(xiàn)在社會(huì)的價(jià)值。</p><p>　　關(guān)鍵詞：前端工程師；互聯(lián)網(wǎng)。</p><p><b>　　目 錄</b></p><p>　　前言…………………………………………………………………………………… （1）</p><p>　　1.前端工

10、程師的內(nèi)涵………………………………………………‥………（2）</p><p>　　1.1前端工程師的簡(jiǎn)介……………………………………………………… （2）</p><p>　　1.2前端工程師的具體事項(xiàng)…………………………………………………（3）</p><p>　　1.2.1前端工程師的優(yōu)缺…………………………………………………（3）</p><

11、;p>　　1.2.2前端工程師的要素…………………………………………………（3）</p><p>　　1.2.3前端工程師的職能…………………………………………………（4）</p><p>　　1.2.4前端工程師的作用…………………………………………………（4）</p><p>　　1.2.5前端工程師的前景…………………………………………………（5）<

12、;/p><p>　　2.前端工程師需掌握的技能………………………………………………………（5）</p><p>　　2.1最基本的技能………………………………………………………………（5）</p><p>　　2.1.1 HTML………………………………………………………………（6）</p><p>　　2.1.2 CSS…………………………

13、………………………………………（8）</p><p>　　3.前端工程師在SEO工作中的重要性………………………………………（15）</p><p>　　3.1.1良好的用戶(hù)體驗(yàn)…………………………………………‥…………（15）</p><p>　　3.1.2站點(diǎn)代碼整齊有序，高效……………………………‥……………（15）</p><p>　

14、　3.1.3提升站點(diǎn)訪問(wèn)速錄…………………………………………………… （16）</p><p>　　3.1.4站點(diǎn)改版平穩(wěn)過(guò)度………………………………‥………………… （16）</p><p>　　4．現(xiàn)在前端的招聘事實(shí)…………………………………………………（17）</p><p>　　參考文獻(xiàn)……………………………………………………………………………（21）<

15、;/p><p>　　致 謝 ………………………………………………‥………………………… （22）</p><p><b>　　前言</b></p><p>　　計(jì)算機(jī)和計(jì)算機(jī)網(wǎng)絡(luò)的飛速發(fā)展，人們對(duì)計(jì)算機(jī)網(wǎng)絡(luò)的依賴(lài)是越來(lái)越大，尤其是電子商務(wù)大大的減少了人們對(duì)周?chē)h(huán)境的依賴(lài)，無(wú)論是哪里的網(wǎng)友，都可以瀏覽到世界各地的各類(lèi)信息，由于以上的優(yōu)勢(shì)，各類(lèi)網(wǎng)站如雨

16、后春筍般的出現(xiàn)。</p><p>　　網(wǎng)頁(yè)界面作為網(wǎng)站信息傳達(dá)的載體，網(wǎng)頁(yè)給人最直觀的感受就是它的頁(yè)面框架與構(gòu)造，網(wǎng)頁(yè)設(shè)計(jì)中的構(gòu)圖也足以影響到整個(gè)網(wǎng)站給人的感受。就網(wǎng)頁(yè)其構(gòu)圖而言，其視覺(jué)表現(xiàn)力具有影響受眾審美情感的作用。</p><p>　　現(xiàn)在社會(huì)上“前端工程師”這個(gè)職業(yè)是很搶手的一個(gè)職業(yè)。所以咱們就談?wù)勄岸斯處熯@個(gè)職業(yè)對(duì)于現(xiàn)在社會(huì)的價(jià)值。</p><p>&l

17、t;b>　　前端工程師的內(nèi)涵</b></p><p>　　1.1前端工程師的簡(jiǎn)介：</p><p><b>　　簡(jiǎn)介：　　</b></p><p>　　2005年以后，互聯(lián)網(wǎng)進(jìn)入Web 2.0時(shí)代，各種類(lèi)似桌面軟件的Web應(yīng)用大量涌現(xiàn)，網(wǎng)站的前端由此發(fā)生了翻天覆地的變化。網(wǎng)頁(yè)不再只是承載單一的文字和圖片，各種富媒體讓網(wǎng)頁(yè)的內(nèi)容

18、更加生動(dòng)，網(wǎng)頁(yè)上軟件化的交互形式為用戶(hù)提供了更好的使用體驗(yàn)，這些都是基于前端技術(shù)實(shí)現(xiàn)的。</p><p>　　隨著Web 2.0概念的普及和W3C組織的推廣，網(wǎng)站重構(gòu)的影響力正以驚人的速度增長(zhǎng)。XHTML+CSS布局、DHTML和Ajax像一陣旋風(fēng)，鋪天蓋地席卷</p><p>　　而來(lái)，包括新浪、搜狐、網(wǎng)易、騰訊、淘寶等在內(nèi)的各種規(guī)模的IT企業(yè)都對(duì)自己的網(wǎng)站進(jìn)行了重構(gòu)。</p>

19、;<p>　　為什么它們會(huì)對(duì)自己的網(wǎng)站進(jìn)行重構(gòu)呢?有兩個(gè)方面的原因：</p><p>　　第一，根據(jù)W3C標(biāo)準(zhǔn)進(jìn)行重構(gòu)后，可以讓前端的代碼組織更有序，顯著改善網(wǎng)站的性能，還能提高可維護(hù)性，對(duì)搜索引擎也更友好;</p><p>　　第二，重構(gòu)后的網(wǎng)站能帶來(lái)更好的用戶(hù)體驗(yàn)，用XHTML+CSS重新布局后的頁(yè)面，文件更小，下載速度更快。</p><p>　　

20、網(wǎng)站重構(gòu)的目的僅僅是為了讓網(wǎng)頁(yè)更符合Web標(biāo)準(zhǔn)嗎?不是!重構(gòu)的本質(zhì)是構(gòu)建一個(gè)前端靈活的MVC框架，即HTML作為信息模型(Model)，CSS控制樣式(View)，JavaScript負(fù)責(zé)調(diào)度數(shù)據(jù)和實(shí)現(xiàn)某種展現(xiàn)邏輯(Controller)。同時(shí)，代碼需要具有很好的復(fù)用性和可維護(hù)性。這是高效率、高質(zhì)量開(kāi)發(fā)以及協(xié)作開(kāi)發(fā)的基礎(chǔ)。</p><p>　　DHTML可以讓用戶(hù)的操作更炫，更吸引眼球;Ajax可以實(shí)現(xiàn)無(wú)刷新的數(shù)

21、據(jù)交換，讓用戶(hù)的操作更流暢。對(duì)于普通用戶(hù)來(lái)說(shuō)，一個(gè)網(wǎng)站是否專(zhuān)業(yè)、功能是否強(qiáng)大，服務(wù)器端是用J2EE+Oracle的強(qiáng)大組合，還是用ASP+Access</p><p>　　的簡(jiǎn)單組合，并沒(méi)有太明顯的區(qū)別。但是，前端的用戶(hù)體驗(yàn)卻給了用戶(hù)直觀的印象。</p><p>　　隨著人們對(duì)用戶(hù)體驗(yàn)的要求越來(lái)越高，前端開(kāi)發(fā)的技術(shù)難度越來(lái)越大，Web前端開(kāi)發(fā)工程師這一職業(yè)終于從設(shè)計(jì)和制作不分的局面中獨(dú)立出

22、來(lái)。</p><p>　　1.2 前端工程師的具體事項(xiàng)</p><p>　　1.2.1前端工程師的優(yōu)缺點(diǎn)：</p><p>　　優(yōu)點(diǎn)：現(xiàn)在我國(guó)web前端開(kāi)發(fā)人員缺口大，一般前后端開(kāi)發(fā)人員比例是1:1左右，但我國(guó)是1:3左右，可想而知web前端工程師比較吃香。</p><p>　　缺點(diǎn)：就是一個(gè)字：累(以下是我回答其他人問(wèn)題的答案，其實(shí)干哪一行

23、都累!)以前會(huì)PS和DW就可以制作網(wǎng)頁(yè)了，現(xiàn)在只掌握這些已遠(yuǎn)遠(yuǎn)不夠了。無(wú)論是開(kāi)發(fā)難度上，還是開(kāi)發(fā)方式上，現(xiàn)在的網(wǎng)頁(yè)制作都更接近傳統(tǒng)的網(wǎng)站后臺(tái)開(kāi)發(fā)，所以現(xiàn)在把網(wǎng)頁(yè)制作都叫做web前端發(fā)開(kāi)。建議必須掌握如下技術(shù)：1 掌握基本web前端開(kāi)發(fā)技術(shù)：HTML、CSS、JavaScript、DOM、BOM、AJAX等，而且要了解它們?cè)诓煌瑸g覽器上的兼容情況、渲染原理和存在的Bug2 必須掌握網(wǎng)站性能優(yōu)化、SEO和服務(wù)器端開(kāi)發(fā)技術(shù)的基礎(chǔ)知識(shí)3 必須學(xué)

24、會(huì)運(yùn)用各種web前端開(kāi)發(fā)與測(cè)試工具進(jìn)行輔助開(kāi)發(fā)4 除了掌握技術(shù)層面的知識(shí)，還要掌握理論層面的知識(shí)，包括代碼的可維護(hù)性、組件的易用性、分層語(yǔ)義模板和瀏覽器分級(jí)支持等5 未來(lái)web前端開(kāi)發(fā)工程師還要研究HTML5、web視覺(jué)設(shè)計(jì)、網(wǎng)站配色、網(wǎng)站交互設(shè)計(jì)模式等相關(guān)技術(shù)</p><p>　　1.2.2前端工程師的要素：</p><p>　　Web前端開(kāi)發(fā)技術(shù)包括三個(gè)要素：HTML、CSS和Java

25、Script，但隨著RIA的流行和普及，F(xiàn)lash/Flex、Silverlight、XML和服務(wù)器端語(yǔ)言也是前端開(kāi)發(fā)工程師應(yīng)該掌握的。Web前端開(kāi)發(fā)工程師既要與上游的交互設(shè)計(jì)師、視覺(jué)設(shè)計(jì)師和產(chǎn)品經(jīng)理溝通，又要與下游的服務(wù)器端工程師溝通，需要掌握的技能非常多。這就從知識(shí)的廣度上對(duì)Web前端開(kāi)發(fā)工程師提出了要求。如果要精于前端開(kāi)發(fā)這一行，也許要先精十行。然而，全才總是少有的。所以，對(duì)于不太重要的知識(shí)，我們只需要“通”即可。但“通”到什么程

26、度才算夠用呢?對(duì)于很多初級(jí)前端開(kāi)發(fā)工程師來(lái)說(shuō)，這個(gè)問(wèn)題是非常令人迷惑的。</p><p>　　前端開(kāi)發(fā)的入門(mén)門(mén)檻其實(shí)非常低，與服務(wù)器端語(yǔ)言先慢后快的學(xué)習(xí)曲線(xiàn)相比，前端開(kāi)發(fā)的學(xué)習(xí)曲線(xiàn)是先快后慢。所以，對(duì)于從事IT工作的人來(lái)說(shuō)，前端開(kāi)發(fā)是個(gè)不錯(cuò)的切入點(diǎn)。也正因?yàn)槿绱耍岸碎_(kāi)發(fā)領(lǐng)域有很多自學(xué)成“才”的同行，但大多數(shù)人都停留在會(huì)用的階段，因?yàn)楹竺娴膶W(xué)習(xí)曲線(xiàn)越來(lái)越陡峭，每前進(jìn)一步都很難。另一方面，正如前面所說(shuō)，前端開(kāi)發(fā)是個(gè)

27、非常新的職業(yè)，對(duì)一些規(guī)范和最佳實(shí)踐的研究都處于探索階段?？傆行碌撵`感和技術(shù)不時(shí)閃現(xiàn)出來(lái)，例如CSS sprite、負(fù)邊距布局、柵格布局等;各種JavaScript框架層出不窮，為整個(gè)前端開(kāi)發(fā)領(lǐng)域注入了巨大的活力;瀏覽器大戰(zhàn)也越來(lái)越白熱化，跨瀏覽器兼容方案依然是五花八門(mén)。為了滿(mǎn)足“高可維護(hù)性”的需要，需要更深入、更系統(tǒng)地去掌握前端知識(shí)，這樣才可能創(chuàng)建一個(gè)好的前端架構(gòu)，保證代碼的質(zhì)量。</p><p>　　1.2.3

28、前端工程師的職能：</p><p>　　什么是前端工程師?有人這樣來(lái)表述：我們是工程師中的設(shè)計(jì)師，是設(shè)計(jì)師中的工程師。上班不干別的，就是玩，弄點(diǎn)效果，攢兩頁(yè)面，搞點(diǎn)創(chuàng)新。我們就是前端攻城獅(工程師)。當(dāng)然這個(gè)表述有點(diǎn)輕巧、調(diào)侃的味道，工作絕對(duì)不是玩那么簡(jiǎn)單的，有時(shí)候會(huì)為一些效果的實(shí)現(xiàn)或優(yōu)化，弄得加班加點(diǎn)一起開(kāi)發(fā)，但其實(shí)有兩一句表述是非常中肯的，那就是：我們是工程師中的設(shè)計(jì)師，是設(shè)計(jì)師中的工程師。這句話(huà)將前端工程師

29、的角色的定位說(shuō)得很準(zhǔn)確。</p><p>　　1.2.4前端工程師的作用：</p><p>　　前端工程師，在網(wǎng)站開(kāi)發(fā)的初期，以工程師的身份來(lái)指導(dǎo)網(wǎng)頁(yè)的設(shè)計(jì)，前端工程師明白程序輸出的方法，指導(dǎo)設(shè)計(jì)師在設(shè)計(jì)的過(guò)程中避免一些不能輸出的數(shù)據(jù)排版，指出哪一些陰影、透明、圓角不能大范圍的使用等等;在進(jìn)行頁(yè)面重構(gòu)的過(guò)程中，又將以一個(gè)設(shè)計(jì)師的身份將設(shè)計(jì)頁(yè)面轉(zhuǎn)化為靜態(tài)頁(yè)面，需要用代碼對(duì)設(shè)計(jì)頁(yè)面進(jìn)行最初的還

30、原，實(shí)現(xiàn)好相應(yīng)的前臺(tái)效果，排列好相應(yīng)讓后臺(tái)開(kāi)發(fā)的工程師輸出數(shù)據(jù)的地方，以適應(yīng)后臺(tái)數(shù)據(jù)的輸出并保持頁(yè)面的不變形、不走位，在有數(shù)據(jù)輸出正常的情況下，配合程序去修改樣式，以盡量達(dá)到和設(shè)計(jì)的效果基本一致。所以在這個(gè)頁(yè)面設(shè)計(jì)和到程序的實(shí)現(xiàn)過(guò)程中，需要前端工程師起到一個(gè)橋梁的作用。</p><p>　　前端開(kāi)發(fā)是一項(xiàng)很特殊的工作，前端工程師的工作說(shuō)得輕松，看似輕巧，但做起來(lái)絕對(duì)不是那么的簡(jiǎn)單。在開(kāi)發(fā)過(guò)程中涵蓋的東西非常寬廣，

31、既要從技術(shù)的角度來(lái)思考界面的實(shí)現(xiàn)，規(guī)避技術(shù)的死角，又要從用戶(hù)的角度來(lái)思考，怎樣才能更好地接受技術(shù)呈現(xiàn)的枯燥的數(shù)據(jù)，更好的呈現(xiàn)信息。簡(jiǎn)單地說(shuō)，它的主要職能就將網(wǎng)站的數(shù)據(jù)和用戶(hù)的接受更好地結(jié)合在一起，為用戶(hù)呈現(xiàn)一個(gè)友好的數(shù)據(jù)界面。</p><p>　　1.2.5前端工程師的前景：</p><p>　　前端工程師是是一個(gè)很新的職業(yè)，在國(guó)內(nèi)乃至國(guó)際上真正開(kāi)始受到重視的時(shí)間不超過(guò)5年?；ヂ?lián)網(wǎng)的發(fā)展速

32、度迅猛，網(wǎng)頁(yè)由Web 1.0到Web 2.0，再到新生的HTML5、CSS3，到現(xiàn)在手機(jī)、3G網(wǎng)絡(luò)等新科技的興起，網(wǎng)頁(yè)也由最原先的圖文為主，到現(xiàn)在各種各樣的基于前端技術(shù)實(shí)現(xiàn)的應(yīng)用、交互和富媒體的呈現(xiàn)，更多的信息、更豐富的內(nèi)容、更友好的體驗(yàn)，已經(jīng)成為網(wǎng)站前端開(kāi)發(fā)的要求，網(wǎng)站的前端開(kāi)發(fā)發(fā)生了翻天可覆地的變化。</p><p>　　網(wǎng)站的開(kāi)發(fā)對(duì)前端的需要越來(lái)越重要，高質(zhì)量的前端開(kāi)發(fā)工程師將會(huì)是后五年內(nèi)一個(gè)非常熱門(mén)的職業(yè)

33、，發(fā)展的前景非?？捎^。</p><p>　　計(jì)算機(jī)和計(jì)算機(jī)網(wǎng)絡(luò)的飛速發(fā)展，人們對(duì)計(jì)算機(jī)網(wǎng)絡(luò)的依賴(lài)是越來(lái)越大，尤其是電子商務(wù)大大的減少了人們對(duì)周?chē)h(huán)境的依賴(lài)，無(wú)論是哪里的網(wǎng)友，都可以瀏覽到世界各地的各類(lèi)信息，由于以上的優(yōu)勢(shì)，各類(lèi)網(wǎng)站如雨后春筍般的出現(xiàn)</p><p>　　網(wǎng)頁(yè)界面作為網(wǎng)站信息傳達(dá)的載體，網(wǎng)頁(yè)給人最直觀的感受就是它的頁(yè)面框架與構(gòu)造，網(wǎng)頁(yè)設(shè)計(jì)中的構(gòu)圖也足以影響到整個(gè)網(wǎng)站給人的感受

34、。就網(wǎng)頁(yè)其構(gòu)圖而言，其視覺(jué)表現(xiàn)力具有很好的沖擊力，吸引人們的眼球。.</p><p>　　前端工程師需掌握的技能</p><p>　　2.1前端工程師的基本技能：</p><p>　　作為一個(gè)前端工程師，需要掌握的技能還真的不少。</p><p>　　最基本的三個(gè)技能：HTML、CSS、JavaScript</p><p&

35、gt;　　這個(gè)是前端開(kāi)發(fā)中最基本也是最必須的三個(gè)技能。前端的開(kāi)發(fā)中，在頁(yè)面的布局時(shí)， HTML將元素進(jìn)行定義，CSS對(duì)展示的元素進(jìn)行定位，再通過(guò)JavaScript實(shí)現(xiàn)相應(yīng)的效果和交互。雖然表面看起來(lái)這些很簡(jiǎn)單，但這里面需要掌握的東西絕對(duì)不會(huì)少。在進(jìn)行開(kāi)發(fā)前，需要對(duì)這些概念弄清楚、弄明白，這樣在開(kāi)發(fā)的過(guò)程中才會(huì)得心應(yīng)手。</p><p>　　2.11 HTML：</p><p>　　指的是

36、超文本標(biāo)記語(yǔ)言 (Hyper Text Markup Language)，這個(gè)也是我們網(wǎng)頁(yè)最常用普通的語(yǔ)言了，經(jīng)歷了多個(gè)版本的發(fā)展，現(xiàn)在已經(jīng)發(fā)展到4.01版了，得力于W3C建立的標(biāo)準(zhǔn)和規(guī)范，現(xiàn)在已普遍升級(jí)到了 XHTML，XHTML 指可擴(kuò)展超文本標(biāo)簽語(yǔ)言(EXtensible HyperText Markup Language)， XHTML 于2000年的1月26日成為 W3C 標(biāo)準(zhǔn)，是更嚴(yán)格更純凈的 HTML 代碼，XHTML 的

37、目標(biāo)是取代 HTML。XHTML 與 HTML 4.01 幾乎是相同的，XHTML 是作為一種 XML 應(yīng)用被重新定義的 HTML，是一個(gè) W3C 標(biāo)準(zhǔn)。W3C 將 XHTML 定義為最新的HTML版本。所有新的瀏覽器都支持 XHTML。</p><p>　　另外，W3C 與 WHATWG 合作創(chuàng)建一個(gè)新版本的 HTML，就是HTML5。HTML5 將成為 HTML、XHTML 以及 HTML DOM 的新標(biāo)準(zhǔn)，

38、為HTML世界注入更多驚喜，盡管HTML5 仍處于完善之中，然而，大部分現(xiàn)代瀏覽器已經(jīng)具備了某些 HTML5 支持，顯示出來(lái)的生機(jī)和活力已是那樣的激奮人心，特別是前端的工作中，那些針對(duì)瀏覽器兼容的問(wèn)題將能得到很好的解決，更多的效果和應(yīng)用也能更方便的實(shí)現(xiàn)。</p><p>　　前端工程師，也必然要與時(shí)俱進(jìn)，緊跟業(yè)界時(shí)代發(fā)展的前沿，不然永遠(yuǎn)只停留在舊的技術(shù)上，只會(huì)被無(wú)情的淘汰。</p><p>

39、;　　其實(shí)HTML的元素也就不過(guò)幾十個(gè)，常用的元素更少，所以掌握起來(lái)的話(huà)應(yīng)該不困難。但就是這些看似簡(jiǎn)單的元素，很多新手在剛開(kāi)始的時(shí)候就不注意規(guī)范，養(yǎng)成一些不好的習(xí)慣。</p><p>　　1、不要忽略一些細(xì)節(jié)</p><p>　　img必備和可選的參數(shù)都有寫(xiě)了上了，但是必備參數(shù)里的一個(gè)值alt沒(méi)寫(xiě)(其實(shí)一些大型的專(zhuān)業(yè)門(mén)戶(hù)網(wǎng)站其實(shí)也是有存在一些小問(wèn)題的，只要我們細(xì)心一點(diǎn)就能發(fā)現(xiàn))。雖然這樣a

40、lt不寫(xiě)，在頁(yè)面中也不會(huì)有任何的問(wèn)題，因?yàn)檫@個(gè)alt屬性也只是在圖像丟失、禁用或加載不到的情況下才顯示，但是如果一些其他特定的設(shè)備訪問(wèn)或一些其他條件下圖片不顯示的情況下，那這里就是一塊大紅XX和一大塊白塊，多影響用戶(hù)體驗(yàn)。</p><p>　　雖然只是一個(gè)小小的alt屬性，但是有時(shí)候是細(xì)節(jié)決定決定成敗，用與不用，表面上看不出有什么問(wèn)題，但是在某些特定的條件產(chǎn)生的作用是無(wú)法估計(jì)的，也就是從這些小小的細(xì)節(jié)就可以看出一

41、個(gè)前端工程師的水平如何。</p><p>　　一些前端的新同學(xué)甚至什么也不填，放一張無(wú)任意命名意義的圖上去就算了事，養(yǎng)成這樣的習(xí)慣是非常不好的。</p><p>　　2、規(guī)范語(yǔ)義使用標(biāo)簽</p><p>　　很多同學(xué)說(shuō)是學(xué)習(xí)div+css，其實(shí)這個(gè)說(shuō)法是存在誤區(qū)的，甚至是錯(cuò)誤的。一個(gè)規(guī)范標(biāo)準(zhǔn)的頁(yè)面是合理地使用標(biāo)簽，使其更加語(yǔ)義化，如果只是靠一堆堆的div通過(guò)層層的嵌

42、套來(lái)布局完成的話(huà)，那么，除了div和a標(biāo)簽這兩個(gè)標(biāo)簽外，所有的HTML元素都沒(méi)有存在的必要了。</p><p>　　例如這個(gè)導(dǎo)航可以用一個(gè)無(wú)序列表ul來(lái)就可以完成了，這樣簡(jiǎn)潔明了，不需要這么多div和巨量的樣式來(lái)進(jìn)行控制，最重要的是語(yǔ)義化也比較清晰了。</p><p>　　網(wǎng)頁(yè)布局就像是一篇文章那樣，有標(biāo)題、有段落、有加強(qiáng)、有突出，HTML提供了這么多的元素給我們使用，就是要求我們要按照其

43、語(yǔ)義來(lái)使用，該用標(biāo)題的時(shí)候用標(biāo)題(h)，該用段落的時(shí)候用段落(p)，該重點(diǎn)強(qiáng)調(diào)的時(shí)候用強(qiáng)調(diào)的強(qiáng)調(diào)(em、strong),而不是都不管三七二十一，千篇一律的先用div 來(lái)包裹再來(lái)進(jìn)行控制。我們使用了這些相應(yīng)語(yǔ)義的HTML元素，同樣可以使用css來(lái)進(jìn)行控制的，可以達(dá)到任何我們想要的布局效果的。css的魅力就在于此。</p><p>　　研究表明， 語(yǔ)義化的標(biāo)簽，越少的嵌套，對(duì)瀏覽器的解析就越快，顯示的速度就越快，當(dāng)然

44、對(duì)不同用戶(hù)群的用戶(hù)體驗(yàn)也就越好!特別是對(duì)于一些特殊群體和閱讀設(shè)備，如盲人，使用的是閱讀HTML的機(jī)器，對(duì)于一塊塊的div，就不知道哪里是標(biāo)題哪里是正文了，只能閱讀到的是這里有一整塊的內(nèi)容。如果使用的是語(yǔ)義化的標(biāo)簽就不一樣了，即使看不到屏幕，但也知道哪里是標(biāo)題哪里是標(biāo)題下相應(yīng)的正文。所以，我們有css這個(gè)這么神奇的東西幫助我們網(wǎng)頁(yè)布局的時(shí)候，語(yǔ)義化的使用HTML 標(biāo)簽，用最少的嵌套和代碼實(shí)現(xiàn)同樣的效果，就是我們前端工程師所追求的。<

45、/p><p>　　再次回到前面div+css布局的一些誤區(qū)，什么是div?它的英文名是division，意思是分開(kāi)、分割、分塊的意思。也就是說(shuō)div在網(wǎng)頁(yè)中是用來(lái)進(jìn)行分塊布局或是在沒(méi)有更適合的HTML元素的情況下用來(lái)配合分塊布局的，如果胡亂的濫用div，那么就會(huì)犯上"div控"了。剛?cè)腴T(mén)不久的新同學(xué)最容易會(huì)犯這種思想的。</p><p><b>　　2.12 CS

46、S：</b></p><p>　　CSS (Cascading Style Sheets)指的是層疊樣式表，現(xiàn)在普遍在用的版本是css2.1 ，雖然已經(jīng)發(fā)布了3.0的版本，且有一些個(gè)人的博客和站點(diǎn)已經(jīng)使用HTML5+CSS3了，但受目前國(guó)內(nèi)的主流瀏覽器IE6的影響，更多的人還是在使用 2.1的版本，在這個(gè)的基本上有選擇性的使用少量的不影響兼容的css3某些功能，css3的普及還需時(shí)日。不管如何，css

47、3的出現(xiàn)讓我們眼前一亮，增加了很多新的屬性，如圓角、陰影、漸變、動(dòng)畫(huà)、流媒體等等的效果，讓頁(yè)面實(shí)現(xiàn)的效果更加方便和容易。</p><p>　　現(xiàn)在要和大家分享的并不是css3哪些激動(dòng)人心的屬性如何使用和實(shí)現(xiàn)，因?yàn)檫@些當(dāng)我們學(xué)習(xí)到了一定階段的時(shí)候都會(huì)去學(xué)習(xí)到css3這個(gè)將來(lái)必將成為王者的使用，現(xiàn)在與大家分享一些與版本無(wú)關(guān)的東西，讓大家在學(xué)習(xí)的過(guò)程中少走一些彎路。</p><p><b&

48、gt;　　1、 Reset</b></p><p>　　關(guān)于重置也有太多的東西要說(shuō)了，YUI、Eric Meyer等都有各自不同的方法，甚至有些人是不用重置的，不管怎樣，只要遵循一個(gè)原則：適合自己的就好。所以不對(duì)這方面過(guò)多的強(qiáng)求，也不作過(guò)多的討論。因?yàn)橐懻摰脑?huà)幾大篇幅也討論不完。當(dāng)然我自己有一個(gè)自己用的reset的地方，究竟好與不好，大家有空的時(shí)候可以研究，最好能把研究的結(jié)果與我分享，我也很愿意聽(tīng)。

49、這個(gè)是我的Reset的文件，大家可以點(diǎn)擊下載(aqy106_lab.css)</p><p>　　2、 樣式書(shū)寫(xiě)要注意的事項(xiàng)</p><p>　　看過(guò)《Efficient, maintainable CSS》的譯文《如何書(shū)寫(xiě)高效、可維護(hù)、組件化的CSS》，里面講到一些樣式的書(shū)寫(xiě)要注意的事項(xiàng)。還是看一看這個(gè)同樣是一個(gè)新同學(xué)寫(xiě)的樣式，看上去很整齊，命名也很有次序，但是仔細(xì)一看，問(wèn)題還是很多的，

50、先不說(shuō)命名，因?yàn)檫@個(gè)得用另外的一個(gè)篇幅去說(shuō)了。</p><p>　　如果作為一般的小站這樣寫(xiě)，樣式的也許只是多幾個(gè)K的大小的問(wèn)題，在性能上影響并不大，但在大型的網(wǎng)站中，幾個(gè)K的大小就不容忽視了。</p><p>　　基于前人的總結(jié)，個(gè)人認(rèn)為高效的css書(shū)寫(xiě)應(yīng)該要注意：</p><p>　　1)、精簡(jiǎn)屬性寫(xiě)法，提高可觀賞性</p><p>　　

51、很多屬性是有精簡(jiǎn)的寫(xiě)法的，如padding、margin、background等等，這些寫(xiě)法雖然可拆可合，但我們習(xí)慣了精簡(jiǎn)的寫(xiě)法后，會(huì)讓css更加整潔、明了，看起來(lái)更加賞心悅目，感覺(jué)寫(xiě)css就是一個(gè)雕刻一件藝術(shù)作品。</p><p>　　2)、使用多重選擇器，提高可重用性</p><p>　　多重選擇器的寫(xiě)法相信很多人都會(huì)使用，但是多重選擇器的使用與進(jìn)行二次編輯或多次編輯的時(shí)候會(huì)有一個(gè)矛盾

52、，多次的修改，有可能需要重新定義的樣式不同，這時(shí)候又需要重新的將原先的選擇器進(jìn)行分享出來(lái)單獨(dú)定義，這不能不說(shuō)是一件痛苦的事情，所以在使用多重選擇器的時(shí)候，最好能將固定的版塊進(jìn)行使用多重選擇器，這樣大大降低你日后維護(hù)、編輯的成本。當(dāng)然，這是需要你的時(shí)間和經(jīng)驗(yàn)才能積累起來(lái)的。</p><p>　　3)、減少層級(jí)及繼承的寫(xiě)法，一般不輕易用id</p><p>　　相信很多人都會(huì)考慮到重用這一高效

53、的寫(xiě)法，所以越少的層級(jí)、越少的繼承就為重用這一方法的實(shí)現(xiàn)提供了可能。也許有人會(huì)說(shuō)，那我可以采用上面的"使用多重選擇器"來(lái)進(jìn)行提高css的可重用性啊。其實(shí)這里面還有另外一個(gè)原因，就是更少的層級(jí)，渲染所使用的時(shí)間更少。css的渲染與JavaScript的方式完全不一樣，JavaScript的篩選直接使用id，能夠精準(zhǔn)的定位到相應(yīng)的dom，但是css的層級(jí)多的話(huà)反而會(huì)影響到性能，但具體沒(méi)做相應(yīng)的測(cè)試。此處也許不嚴(yán)謹(jǐn)，請(qǐng)大家

54、賜教，哪位大俠有空來(lái)測(cè)試一下，給一些相應(yīng)的數(shù)據(jù)會(huì)有更好的說(shuō)服力。但基于重用的原則，個(gè)人還是建議用最直接、有效的簡(jiǎn)短的命名，也同樣就是這樣的一個(gè)原則，雖然id的唯一性解決了沖突了問(wèn)題，但違反了重用性的原則的同時(shí)也加大了維護(hù)和的成本，如非必要，盡量不用id。</p><p>　　4)、命名面向?qū)傩院兔嫦驅(qū)ο蠼Y(jié)合</p><p>　　其實(shí)命名這個(gè)方面有很長(zhǎng)的一個(gè)篇幅可以說(shuō)的，因命名的方法和各個(gè)人

55、的習(xí)慣也不樣，有人喜歡用駝峰式，有人喜歡下杠線(xiàn)，有人喜歡縮寫(xiě)，也有人喜歡全寫(xiě)，個(gè)人認(rèn)為這個(gè)主觀色彩太重了，不予作過(guò)多的展開(kāi)，不管哪一種，都是沒(méi)有問(wèn)題的。</p><p>　　和大家分享的是另外一個(gè)問(wèn)題，是樣式的命名是面向?qū)傩赃€是面向?qū)ο竽?相信這個(gè)也會(huì)困擾著一些同學(xué)。現(xiàn)在就和大家分享一些我的心得。在分享我的觀點(diǎn)之前，先跟大家解釋一下什么是面向?qū)傩?、什么是面向?qū)ο?。面向?qū)傩跃褪敲嫦騝ss的屬性來(lái)進(jìn)行命名，面向?qū)ο缶?/p>

56、是面向要重構(gòu)的頁(yè)面的模塊這個(gè)對(duì)象來(lái)進(jìn)行命名。</p><p><b>　　4.1面向?qū)傩悦?lt;/b></p><p><b>　　4.2面向?qū)ο竺?lt;/b></p><p>　　關(guān)于這個(gè)問(wèn)題，有人覺(jué)得面向?qū)傩院?，因?yàn)榭梢宰畲笙薅鹊睦煤胏ss的重用性;也有人認(rèn)為面向?qū)ο蠛?，因?yàn)槊嫦驅(qū)ο罂梢宰尯笃诘木S護(hù)更方便直接。既然各自都

57、有好處，那我們可不可以將兩者結(jié)合起來(lái)呢?答案是肯定的，而我個(gè)人也是這樣做的。</p><p>　　對(duì)于一些固定的、常用的、重用性非常高的css，可以將其按面向?qū)傩詠?lái)進(jìn)行命名，前面前的"面向?qū)傩悦?quot;的這個(gè)圖這樣，也可以說(shuō)是一個(gè)小小的框架或是作為一個(gè)底層來(lái)方便自己的開(kāi)發(fā)，放到哪里都是可以使用，具體可以見(jiàn)我整理的自已用的面向?qū)傩缘腸ss(點(diǎn)擊下載aqy106_lib.css)。另外對(duì)于于具體的版塊

58、就應(yīng)該使用面向?qū)ο?，針?duì)版塊的對(duì)象來(lái)進(jìn)行命名，這樣也讓后期維護(hù)或接手的人來(lái)編輯也不會(huì)困難。163采用的也是采用面向?qū)傩院兔嫦驅(qū)ο蠼Y(jié)合的方法來(lái)進(jìn)行命名的。</p><p>　　作為一名前端開(kāi)發(fā)的工程師，應(yīng)該要有一利節(jié)流的思想，把css的書(shū)寫(xiě)當(dāng)作一門(mén)藝術(shù)來(lái)學(xué)習(xí)、來(lái)追求。書(shū)寫(xiě)出一個(gè)高效、可維護(hù)的樣式往往是通向大師之路的必走之路。</p><p>　　樣式不僅僅是寫(xiě)給自己看的，更要給團(tuán)隊(duì)開(kāi)發(fā)或后來(lái)

59、接手的人看的，如果能做到簡(jiǎn)潔、高效、重用性、可讀性強(qiáng)，相信，你離大師的級(jí)別也不遠(yuǎn)了。</p><p>　　3、 CSS Sprite(圖片精靈、背景定位技術(shù))</p><p>　　現(xiàn)在的網(wǎng)頁(yè)，各種各樣的媒體、圖標(biāo)、背景都是多得眼花繚亂的，特別是背景圖片、圖標(biāo)是我們網(wǎng)頁(yè)中使用最多的，按照以前的使用的話(huà)，插入一個(gè)個(gè)的小圖標(biāo)或圖片用來(lái)控制來(lái)進(jìn)行修飾，這些不和內(nèi)容相關(guān)的圖標(biāo)圖片也一并混排在內(nèi)容中了

60、，且頁(yè)面中一大堆無(wú)關(guān)的圖標(biāo)圖片，還不方便管理。并且還有一個(gè)很大的弊病，一個(gè)圖片在頁(yè)面中是一個(gè)http的請(qǐng)求，頁(yè)面中存在n個(gè)的這樣的小圖標(biāo)的話(huà)，對(duì)服務(wù)器的請(qǐng)求也就有N個(gè)，也許對(duì)于一些小站來(lái)說(shuō)沒(méi)什么影響，但對(duì)于一個(gè)大型網(wǎng)站來(lái)說(shuō)的話(huà)，這個(gè)數(shù)字可就不得了，這時(shí)的服務(wù)器并發(fā)請(qǐng)求就會(huì)多上N乘以用戶(hù)的個(gè)數(shù)，這樣無(wú)疑加重了服務(wù)器的負(fù)擔(dān)。</p><p>　　而解決這個(gè)問(wèn)題的最好辦法就是CSS Sprite。</p>

61、<p>　　將所有的圖片整合到一張大圖上，通過(guò)css來(lái)進(jìn)行定位。首先能將內(nèi)容和修飾的元素進(jìn)行了分離;其次能減少頁(yè)面請(qǐng)求的個(gè)數(shù)，那么減輕了服務(wù)器的負(fù)擔(dān);再次，能夠提高頁(yè)面加載的速度，加快頁(yè)面載入速度，提升用戶(hù)體驗(yàn)。</p><p>　　另外，將圖標(biāo)圖片作為背景來(lái)進(jìn)行加載，都是在文檔的主要內(nèi)容進(jìn)行加載完畢，再加載樣式時(shí)才進(jìn)行請(qǐng)求的(細(xì)心的大家也許也發(fā)現(xiàn)，網(wǎng)絡(luò)不好的時(shí)候，頁(yè)面加載進(jìn)來(lái)的是亂七八糟的，待一會(huì)樣

62、式加載進(jìn)來(lái)后，頁(yè)面馬上正常了，其實(shí)這個(gè)就體現(xiàn)到了文檔加載的先后順序，如果不相信的話(huà)，可以用小bug或相應(yīng)的工具查看一下是不是這樣的加載順序)。</p><p>　　當(dāng)然，事物都是具有兩面性的，將小圖標(biāo)小圖片整合到一張圖片上，雖說(shuō)有百利，但仍有一害的，就是當(dāng)需要更換圖標(biāo)或調(diào)整的時(shí)候，必須要在這張圖片進(jìn)行處理和定位，需要在FireWork等這些圖像處理軟件中定位好坐標(biāo)再去寫(xiě)相應(yīng)的CSS，會(huì)增加一定的工作量，如果身邊沒(méi)

63、有這些工具，處理起來(lái)還是會(huì)有些麻煩的。但總的來(lái)說(shuō)，圖片整合，利大于弊，我們?yōu)楹尾挥媚?</p><p><b>　　1、 兼容性</b></p><p>　　2、 以Trident為內(nèi)核的IE、以Gecko為內(nèi)核的FireFox、以Presto為內(nèi)核的Opera、以Webkit為內(nèi)核的google chrome和Safari等四大內(nèi)核的瀏覽器四分天下。</p&g

64、t;<p>　　兼容性的問(wèn)題相信是很多前端工程師肯定會(huì)遇到且最頭痛的一個(gè)問(wèn)題，且不說(shuō)目前市面在有這么多的瀏覽器，就僅僅單一的IE系列家族的問(wèn)題也夠多的了，特別是IE6，雖然微軟宣布了IE6的死亡和下臺(tái)，但國(guó)內(nèi)的機(jī)器仍以IE6為主流，IE6在國(guó)內(nèi)的法消亡還需時(shí)日，作為前端開(kāi)發(fā)沒(méi)法規(guī)避的情況下，暫時(shí)也只能折衷的進(jìn)行兼容。不過(guò)雖然繁多復(fù)雜，但我們可以化繁為簡(jiǎn)，重點(diǎn)問(wèn)題重點(diǎn)處理，基本上IE6的問(wèn)題解決了，也就解決最大的問(wèn)題了。&l

65、t;/p><p>　　當(dāng)然，這個(gè)IE6的問(wèn)題太多了，需要用另外的篇幅去進(jìn)行說(shuō)明了，這里就不再跟大家再作深入的研究了，給大家提個(gè)醒，讓我們一些新同學(xué)在成長(zhǎng)過(guò)程中能夠有目的地去學(xué)習(xí)、發(fā)現(xiàn)和處理問(wèn)題就OK了。</p><p><b>　　3、 圖片的優(yōu)化</b></p><p>　　雖然現(xiàn)在的富媒體越來(lái)越多了，網(wǎng)頁(yè)展現(xiàn)的數(shù)據(jù)從單一的圖文向音頻、視頻、動(dòng)畫(huà)

66、等類(lèi)型擴(kuò)展，但受限于網(wǎng)絡(luò)傳送帶寬、速率等影響，圖片仍以最高的可壓縮比、傳送速度快、展現(xiàn)效果好等優(yōu)點(diǎn)作為一個(gè)主角在網(wǎng)頁(yè)呈現(xiàn)和展示方面活躍著。目前網(wǎng)頁(yè)主流的格式現(xiàn)在常用的也就不外乎幾種：png、gif、jpg，其他一些在網(wǎng)頁(yè)中不常用的格式暫不在本次的討論之列。</p><p>　　3.1圖片格式知多少</p><p>　　相信png、jpg、gif這些格式大家都能大概的了解和清楚一些使用，這里

67、就不再細(xì)說(shuō)，這里說(shuō)一些使用中注意的事項(xiàng)或是大家不夠深入了解的東西。</p><p>　　png：png有多個(gè)不同的位數(shù)的格式：png8、png24、png32。前端的新同學(xué)們常常遇到的就是png在IE6中不透明，其實(shí)IE6是支持PNG透明的，不過(guò)只支持png8的透明而已，具體可以看我的頁(yè)面中圖標(biāo)，就是用了png8的透明，但是png8下不支持半透明，所以頂部的這個(gè)有背景色的時(shí)候用了png32配合JS處理了一下透明效

68、果，不然有白白的邊在 IE6里太難看了。png8和gif都支持全透明和256色，所以在正常情況下兩者是可以互換的，兩者輸出的大小也差不多，甚至png8比gif更有優(yōu)勢(shì)，但png8不能像gif那樣做成動(dòng)畫(huà)。</p><p>　　而png24和png32也有一些不同。png24在png8的基礎(chǔ)上增加了顏色的支持?jǐn)?shù)，但是沒(méi)有透明信息，png32在png24的基礎(chǔ)上增加了透明的信息。Firework和Photoshop雖

69、然同為Adobe公司的產(chǎn)品，但是輸出的時(shí)候也是有些不太一致的。Firework能夠正常的輸出各種規(guī)格的png，但Photoshop不支持8位png+alpha透明的格式，而且Photoshop中也沒(méi)有32位png選項(xiàng)，其中的png24+ 透明實(shí)際上就是 png32(不信你可以嘗試用Photoshop輸出一個(gè)png24+透明的png再到Firework中看看就知道了)，如果要IE6支持png32的透明，就只能用別的方法了.</p&g

70、t;<p>　　現(xiàn)在還有一些更非常規(guī)的圖片的用法，大家可以看到google的404頁(yè)面(點(diǎn)擊打開(kāi)GOOGLE 的 404頁(yè)面)，將圖片進(jìn)行base64編碼再放到css中(當(dāng)然IE6、7是無(wú)法正常解析的，嘿嘿)。</p><p>　　這種data: URI的格式能把base64(或其他數(shù)據(jù))可以?xún)?nèi)嵌在image標(biāo)簽的屬性當(dāng)中(或者CSS中或JavaScript中)，通過(guò)對(duì)圖片進(jìn)行base64 編碼，可

71、以實(shí)現(xiàn)將圖片直接嵌入代碼中的目的，如此一來(lái)，可以減少HTTP請(qǐng)求，這對(duì)于提升web性能很有好處。對(duì)于較小的圖片，采用這樣處理是非常實(shí)用的，但是IE6、7不能支持這種方法，因此可以在IE6、7中采用傳統(tǒng)的方法，而在其他瀏覽器中使用這樣的方法來(lái)進(jìn)行全面的兼容。</p><p>　　這種做法有利有弊，好處是可以減少HTTP請(qǐng)求，不好的地方是圖像的大小會(huì)增加1/3。因此，這種內(nèi)嵌的方法適合對(duì)小的圖形、小圖標(biāo)等進(jìn)行處理，從

72、而減少瀏覽器打開(kāi)的連接數(shù)，但對(duì)大的照片、圖片等則不應(yīng)該使用base64編碼了，以免影響圖像下載的時(shí)間。</p><p>　　但這種圖像的處理也需要另外的軟件，所以不熟悉的情況下操作起來(lái)也有一定的困難，這里有一個(gè)在線(xiàn)版的轉(zhuǎn)換工具，有興趣的大家可以試試，嘗嘗鮮：點(diǎn)擊打開(kāi)</p><p>　　6.2如何輸出合適的圖片</p><p>　　說(shuō)了這么多的圖片格式相關(guān)的知識(shí)，現(xiàn)

73、在要實(shí)際操作來(lái)說(shuō)明一下我們?cè)鯓虞敵鲆粋€(gè)適合我們的圖片了。</p><p>　　其實(shí)淘寶UED： 《圖片格式與設(shè)計(jì)那點(diǎn)事兒》這里也說(shuō)明得夠詳細(xì)了，這里就不重復(fù)里面的一些方法了。我們最常用的圖像處理軟件莫過(guò)于Firework和 Photoshop，所以我們也以這兩個(gè)軟件就重點(diǎn)。雖然兩個(gè)軟件現(xiàn)在是同出一家，同屬一個(gè)Adobe Master套裝，但兩者的算法還是有一定的差別的。所以在做圖片處理的時(shí)候有時(shí)候可以在這兩個(gè)軟件

74、中分別進(jìn)行輸出對(duì)比來(lái)決定最后圖片的使用。</p><p>　　注：本文使用的是Adobe Master CS4開(kāi)發(fā)套裝的，其他的版本沒(méi)測(cè)，已知的是Firework8中圖片輸出的算法也沒(méi)有Firework CS4的好，具體可以親測(cè)。</p><p>　　這里不再進(jìn)行深入的論述，大家清楚了上面的格式的差別和軟件的問(wèn)題后，在具體的工作中通過(guò)不停的比較就能得出上面這些結(jié)論。</p>

75、<p>　　第三章前端工程師在SEO工作中的重要性</p><p>　　3.1前端工程師在SEO工作中的重要性</p><p>　　解析前端工程師在SEO工作中的重要性</p><p>　　針對(duì)SEO行業(yè)，網(wǎng)上曾經(jīng)有一種論調(diào)，稱(chēng)SEO低技術(shù)、門(mén)檻低，引發(fā)眾SEOER群起而攻之，這種看法確實(shí)很片面，但又不得不否認(rèn)相當(dāng)一部分SEOER缺乏最基本的編程知識(shí)，導(dǎo)致

76、在日常工作的效率很低，有時(shí)還會(huì)因?yàn)椴欢夹g(shù)鬧出一些啼笑皆非的笑話(huà)。 其實(shí)作為一名SEOER，不懂編程不可怕，可怕地是缺乏與技術(shù)人員(包括但不限于前端工程師，后臺(tái)開(kāi)發(fā)人員以及服務(wù)器維護(hù)人員)溝通的能力。 今天就從前端工程師說(shuō)起，談?wù)勗赟EO工作中前端開(kāi)發(fā)人員的重要性，看看與技術(shù)人員合理的溝通能如何增強(qiáng)SEO工作的效果。</p><p>　　3.1.1.良好的用戶(hù)體驗(yàn)</p><p>　　作為

77、前臺(tái)人員，確保良好的用戶(hù)體驗(yàn)是首當(dāng)其沖的。一名優(yōu)秀的前端工程師通過(guò)合理的頁(yè)面布局，整潔漂亮、主次分明的配色，可以輕易引導(dǎo)用戶(hù)找到網(wǎng)頁(yè)的重點(diǎn)部分，在十分舒適的瀏覽體驗(yàn)中完成對(duì)站點(diǎn)的瀏覽、對(duì)需求信息的尋找。這點(diǎn)毫無(wú)疑問(wèn)，對(duì)提高站點(diǎn)轉(zhuǎn)化率、降低網(wǎng)站跳出率有著十分重要的作用。與之相反的是，現(xiàn)在互聯(lián)網(wǎng)上鋪天蓋地的淘寶客單頁(yè)站點(diǎn)，看似頁(yè)面制作精美，實(shí)則用戶(hù)體驗(yàn)極差，大部分情況下，用戶(hù)都是找不到需要的內(nèi)容而誤點(diǎn)鏈接，其轉(zhuǎn)化率之低可想而知。2010年，

78、被神化的單頁(yè)模式實(shí)際上是在低的不可思議的轉(zhuǎn)化率下實(shí)現(xiàn)盈利的，這也注定了這種模式不會(huì)長(zhǎng)久。事實(shí)上，最近已經(jīng)經(jīng)常在一些論壇上聽(tīng)人抱怨，用單頁(yè)的網(wǎng)站成家率極低，這種模式已基本上走到盡頭了。</p><p>　　3.1.2.站點(diǎn)代碼整齊有序、高效</p><p>　　我們知道頁(yè)面代碼是否遵循W3C標(biāo)準(zhǔn)是搜索引擎排名的參考因素之一，可能在一般人看來(lái)現(xiàn)在已經(jīng)不用考慮相關(guān)問(wèn)題了，市面上常見(jiàn)的CMS都做到

79、了符合W3C標(biāo)準(zhǔn)，其實(shí)不然，符合不代表最優(yōu)。以常見(jiàn)的DEDE為例，其默認(rèn)模板就有過(guò)多的JS調(diào)用、頁(yè)面中依然有style屬性(不符合W3C的結(jié)構(gòu)與表現(xiàn)分離的思想)等問(wèn)題。盡管過(guò)度考慮這些問(wèn)題有點(diǎn)過(guò)度吹毛求疵了，其對(duì)排名的影響幾乎為零。但是一個(gè)優(yōu)秀的前端工程師會(huì)在布局設(shè)計(jì)時(shí)為你考慮到相關(guān)問(wèn)題，實(shí)現(xiàn)頁(yè)面代碼的最優(yōu)化，提高JS代碼的執(zhí)行效率，縮小Cookies，用js調(diào)用代替iframe等。 不積小流無(wú)以成江海，這些看似小問(wèn)題，但也許你比排名在

80、你前面的站點(diǎn)就差了這么點(diǎn)。</p><p>　　3.1.3.提升站點(diǎn)訪問(wèn)速率</p><p>　　這個(gè)其實(shí)跟第二點(diǎn)有點(diǎn)類(lèi)似，主要是代碼的優(yōu)化，用過(guò)百度統(tǒng)計(jì)新功能“網(wǎng)速診斷”的朋友們知道，</p><p>　　細(xì)致入微的百度沒(méi)有像其他測(cè)速網(wǎng)站一樣，僅僅給出頁(yè)面下載總時(shí)間完事兒，而是在服務(wù)器速度一定的情況下，給出了提高頁(yè)面加載速度的幾種方案，其中主要有合并JS文件、合并

81、CSS文件，使用Css Sprite以減少對(duì)服務(wù)器的請(qǐng)求次數(shù)等方法。 這些細(xì)節(jié)問(wèn)題，很少有人注意到，因?yàn)樘嵘膸缀撩胨俣葞缀蹩梢院雎圆挥?jì)，但有經(jīng)驗(yàn)的前端工程師會(huì)考慮到這些問(wèn)題，這樣你的站點(diǎn)的速度拼不過(guò)幾大門(mén)戶(hù)，但是卻獲得了百度的不少加分。 類(lèi)似的一些細(xì)節(jié)性可以提升頁(yè)面速度的技巧還有很多，比如，啟用gzip壓縮頁(yè)面體積(很多主機(jī)都擁有的功能，但是知道用的人很少)，將JS文件放在頁(yè)面的后面可以明顯提升頁(yè)面加載速度(這點(diǎn)多少人的站點(diǎn)做到了?)

82、，圖片限定大小可以避免瀏覽器重新渲染等。</p><p>　　3.1.4.站點(diǎn)改版平穩(wěn)過(guò)渡</p><p>　　最后一點(diǎn)，我想對(duì)很多站點(diǎn)是最重要的，伴隨著站點(diǎn)的發(fā)展，頁(yè)面改版是不可避免的，不過(guò)相信很多人都有站點(diǎn)改版造成的快照停滯、排名下跌甚至降權(quán)等問(wèn)題。其實(shí)，處理這個(gè)問(wèn)題相當(dāng)簡(jiǎn)單，站點(diǎn)改版時(shí)僅僅修改CSS文件，不動(dòng)結(jié)構(gòu)內(nèi)容代碼，可以輕易在搜索引擎不察覺(jué)的情況下完成改版，通常小改版只需要前端

83、工程師改幾行CSS代碼就行了，如果頁(yè)面布局的內(nèi)容需要大換血，可以分幾次小規(guī)模的改版完成修改，這期間只要不修改title等重要信息，站點(diǎn)完全可以平滑過(guò)渡，快照、排名、收錄不會(huì)有任何的異常。 下次站點(diǎn)改版需要換模板時(shí)，不要很匆忙的就換上模板，進(jìn)行適當(dāng)?shù)男薷?，盡可能與原來(lái)各頁(yè)面的代碼相似，效果要好很多。市面上主流CMS的結(jié)構(gòu)內(nèi)容都很固定，更改的通常只有幾個(gè)div標(biāo)簽，想通過(guò)css更改布局還是非常容易的。</p><p>

84、;　　第四章現(xiàn)在前端的招聘事實(shí)</p><p>　　現(xiàn)在的社會(huì)上對(duì)于前端工程師這個(gè)職業(yè)那是相當(dāng)?shù)娜狈Γ岸耸墙鼛啄瓴懦鰜?lái)的的一個(gè)有關(guān)于IT方面的職業(yè)，社會(huì)上的公司都要有關(guān)于前端這樣的職員，而學(xué)校卻沒(méi)有關(guān)于前端的課程，說(shuō)以現(xiàn)在社會(huì)上那是供不應(yīng)求，現(xiàn)在每天各個(gè)求職網(wǎng)站都有公司在招聘前端工程師這個(gè)職位的。所以讓我們現(xiàn)在來(lái)說(shuō)說(shuō)“前端工程師”在現(xiàn)在社會(huì)的價(jià)值。</p><p>　　下面是幾個(gè)招聘網(wǎng)站

85、上關(guān)于前端工程師招聘的信息:</p><p><b>　　(1)</b></p><p>　　圖4-1前端招聘信息</p><p><b>　　(2)</b></p><p>　　圖4-2前程無(wú)憂(yōu)網(wǎng)招聘前端信息</p><p><b>　　(3</b>&

86、lt;/p><p><b>　　)</b></p><p>　　圖4-3趕集網(wǎng)招聘前端信息</p><p><b>　　(4)</b></p><p>　　圖4-4招聘前端信息</p><p>　　以上就是網(wǎng)上的一些招聘網(wǎng)站的關(guān)于前端工程師的招聘信息，而且這些網(wǎng)站天天都有關(guān)于前端

87、工程師招聘的信息，而且招聘工作的報(bào)酬也都是很高的待遇，所以說(shuō)社會(huì)上的前端是很缺乏的。</p><p><b>　　參考文獻(xiàn)</b></p><p>　　[1] 聶斌.HTML+css+div網(wǎng)頁(yè)設(shè)計(jì)與布局 .人們郵電出版社.2013.10.</p><p>　　[2] 明日科技 .HTML5從入門(mén)到精通.清華大學(xué)出版社.2012.9</p

88、><p>　　[3] 李東博.HTML5+CSS3從入門(mén)到精通. 清華大學(xué)出版社.3013.06.01</p><p><b>　　致 謝</b></p><p>　　本人的論文是在我指導(dǎo)老師的精心指導(dǎo)下完成的，他嚴(yán)肅的治學(xué)態(tài)度，嚴(yán)謹(jǐn)?shù)闹螌W(xué)精神，精益求精的工作作風(fēng)，一直都激勵(lì)著我向前走。從課題的選擇到論文的最終完成，徐老師不時(shí)就往我的教師里面去，一

89、直都在給予我細(xì)心的指導(dǎo)，在此我要鄭重向徐老師致以誠(chéng)摯的感謝和無(wú)比崇高的敬意。</p><p>　　在這同時(shí)，我將還要感謝的就是和我們一起度過(guò)三年大學(xué)生活的每個(gè)可愛(ài)的同學(xué)們和尊敬的老師們，我想如果沒(méi)有他們這些年對(duì)我的幫助和支持，我是不可能在這三年來(lái)克服一個(gè)又一個(gè)的困難迎刃而上的。</p><p>　　論文在完成后，我的心情很舒暢，從一開(kāi)始進(jìn)行選課題到論文的順利完成，這一路上有多少可敬的師長(zhǎng)、