【文章內(nèi)容簡介】 主流瀏覽器，并配合程序完成靜態(tài)頁面 的整合工作。另外，要對(duì)網(wǎng)站做一些相應(yīng)的更新，維護(hù)及優(yōu)化。整個(gè)網(wǎng)站開發(fā)的流程在后面有具體介紹 。前端開發(fā)在整個(gè)過程中占據(jù)著不可替代的地位，其它幾個(gè)環(huán)節(jié)主要給予相關(guān)的配合。 前端開發(fā)工具 （ 1） Dreamweare 簡介 7 Dreamweare 是美國 MA CROMEDIA 公司開發(fā)的集網(wǎng)頁制作和管理網(wǎng)站于一身的所見即所得 網(wǎng)頁編輯器，它是第一套針對(duì)專業(yè)網(wǎng)頁設(shè)計(jì)師特別發(fā)展的視覺化網(wǎng)頁開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺(tái)限制和跨越瀏覽器限制的充滿動(dòng)感的網(wǎng)頁。 使用網(wǎng)站地圖可以快速制作網(wǎng)站雛形，設(shè)計(jì)，更新和重組網(wǎng)頁。改變網(wǎng)頁位置或檔案名稱， Dreamweare 會(huì)自動(dòng)更新所有鏈接。使用支援文字， HTML 碼，HTML 屬性標(biāo)簽和一般語法的搜 尋及置換功能使得復(fù)雜的網(wǎng)站更新變得迅速又簡單。 （ 2） Photoshop 簡介 Adobe Photoshop，簡稱“ PS”，是一個(gè)由 Adobe Systems 開發(fā)和發(fā)行的圖像處理軟件。 Photoshop 主要處理以像素所構(gòu)成的數(shù)字圖像。使用其眾多的編修與繪圖工具，可以更有效的進(jìn)行圖片編輯工作。 在網(wǎng)站前端開發(fā)過程中需要把圖片用 Photoshop 處理成加載到網(wǎng)站頁面的圖片，用 Photoshop 的 切片工具獲得簡單的 css 代碼 。 （ 3） 谷歌 瀏覽器 簡介 Google Chrome，又稱 谷歌 瀏覽器，是一個(gè)由 Google（谷歌）公司開發(fā)的開放原始碼網(wǎng)頁瀏覽器。該瀏覽器是基于其他開放原始碼軟件所撰寫，包括WebKit 和 Mozilla，目標(biāo)是提升 穩(wěn)定 性 、速度 和安全性 ，并創(chuàng)造出簡單且有效率的使用者界面。 Google Chrome 的特點(diǎn)是簡潔、快速。 Google Chrome 支持多標(biāo)簽瀏覽，每個(gè)標(biāo)簽頁面都在獨(dú)立的 “ 沙箱 ” 內(nèi)運(yùn)行，在提高安全性的同時(shí)，一個(gè)標(biāo)簽頁面的崩潰也不會(huì)導(dǎo)致其他標(biāo)簽頁面被關(guān)閉。此外， Google Chrome 基于更強(qiáng)大的 JavaScript V8 引擎，這是當(dāng)前 Web 瀏覽器所無法實(shí)現(xiàn)的。 前端開發(fā)相關(guān)技術(shù) DIV+CSS 簡介 a. 什么是 div？ 8 di標(biāo)簽和其他 HTML 標(biāo)簽都是一樣的，都要由關(guān)閉標(biāo)志。要是不擦入 css樣式表，它的效果和 p標(biāo)記一樣。 div代碼如下： div內(nèi)容 /div 如果把 css 的擴(kuò)展屬性放入 div 標(biāo)簽中，那么可以控制 div 容器中的元素顯示在屏幕的具體位置，為了控制一一對(duì)應(yīng)，最好是給當(dāng)前的 div 加上標(biāo)識(shí) id名，以區(qū)分其他 div 標(biāo)記。另外一種情況是如果你想讓多個(gè)個(gè) div 具有相同的樣式屬性時(shí)，可以給每個(gè) div 加上相同的 class 屬性，這種具同樣 class 屬性的 div 標(biāo)記樣式相同。如下： div id=”wrap” 內(nèi)容 /div div class=”button” 內(nèi)容 /div b． 什么是 CSS？ CSS 是英文 Cascading Style Sheet 縮寫形式，中文意思為級(jí)聯(lián)樣式表或?qū)盈B樣式表。網(wǎng)頁設(shè)計(jì)師可用它來定義文檔的表現(xiàn)樣式，這里指的文檔不僅限于（ X） HTML。通過 CSS，設(shè)計(jì)師可控制文檔的顏色、字體、鏈接、圖像、表格和布局格式，設(shè)計(jì)師也可以將表現(xiàn)充網(wǎng)頁內(nèi)容中分離出來，放在網(wǎng)頁的某一處，而且可以保持一個(gè)獨(dú)立文件存放，大大得減少文件容量，節(jié)省網(wǎng)絡(luò)和空間的帶寬、節(jié)約網(wǎng)頁維護(hù)這的維護(hù)時(shí)間。 CSS 有如此多的好處，使用好和掌握 CSS技術(shù)對(duì)于網(wǎng)頁設(shè)計(jì)師來說是非常重要的。 c． 什么 是 DIV+CSS？ DIV+CSS 是網(wǎng)站標(biāo)準(zhǔn)中常用術(shù)語之一， div+css 是布局方式一種形式 ,這種網(wǎng)頁布局有有別于傳統(tǒng)的表格網(wǎng)頁布局 ,真正的達(dá)到由 w3c 提出的內(nèi)容與表現(xiàn)的分離。自從 以來， W3C 就沒有發(fā)布過新版本，因?yàn)?html 變得越來越復(fù)雜了、更專用化。 Xhtml 語言可以將 html 語言標(biāo)準(zhǔn)化，用 XHTML 語言編寫的 HTML 頁面，就可以使用 xml 技術(shù)。使得網(wǎng)頁有更好的擴(kuò)展性，適用數(shù)據(jù)自動(dòng)交換，而且更加規(guī)整?，F(xiàn)在大多網(wǎng)站都已經(jīng)使用 div+css 布局而放棄了表格布局 9 Javascript 基本特點(diǎn) (1) 基于對(duì)象的語言 javascript是一種基于對(duì)象的語言，同時(shí)也可以看作一種面向?qū)ο蟮?。這意味著它能運(yùn)用自己已經(jīng)創(chuàng)建的對(duì)象。因此，許多功能可以來自于腳本環(huán)境中對(duì)象的方法與腳本的相互作用。 (2) 簡單性 javascript 的簡單性主要體現(xiàn)在：首先它是一種基于 Java 基本語句和控制流之上的簡單而緊湊的設(shè)計(jì)， 從而對(duì)于學(xué)習(xí) Java 是一種非常好的過渡。其次它的變量類型是采用弱類型，并未使用嚴(yán)格的數(shù)據(jù)類型。 (3) 安全性 javascript 是一種安全性語言，它不允許訪問本地的硬盤，并不能將數(shù)據(jù)存入到服務(wù)器上，不允許對(duì)網(wǎng) 絡(luò)文檔進(jìn)行修改和刪除，只能通過瀏覽器實(shí)現(xiàn)信息瀏覽或動(dòng)態(tài)交互。從而有效地防止數(shù)據(jù)的丟失。 (4) 動(dòng)態(tài)性 javascript 是動(dòng)態(tài)的，它可以直接對(duì)用戶或客戶輸入做出響應(yīng)，無須經(jīng)過Web 服務(wù)程序。它對(duì)用戶的反映響應(yīng)，是采用以事件驅(qū)動(dòng)的方式進(jìn)行的。所謂事件驅(qū)動(dòng)，就是指在主頁 (Home Page)中執(zhí)行了某種操作所產(chǎn)生的動(dòng)作，就稱為“事件” (Event)。比如按下鼠標(biāo)，移動(dòng)窗口，選擇菜單等都可以視為事件。當(dāng)事件發(fā)生后，可能會(huì)引起相應(yīng)的事件響應(yīng)。 本章小結(jié) 本章介紹了開發(fā) XXXXXXXX 培訓(xùn)中心 網(wǎng) 站前端所需要的開發(fā)工具和他們的運(yùn)行環(huán)境，同時(shí)講述了相關(guān)的前端開發(fā)技術(shù)比如： Javascript ， DIV＋ CSS 等。以便以后的開發(fā)過程中能夠?qū)@些開發(fā)工具盒技術(shù)有深刻的理解。 10 第 3 章 前端布局分析與設(shè)計(jì) 前端總體開發(fā)流程及設(shè)計(jì) 前端設(shè)計(jì) Web 前端開發(fā)技術(shù)是一個(gè)先易后難的過程 ，主要包括三個(gè)要素：HTML， CSS 和 JavaScript ，這就要求前端開發(fā)工程師不僅要掌握基本的 Web前端開發(fā)技術(shù) ，網(wǎng)站性能優(yōu)化， SEO 和服務(wù)器端的基礎(chǔ)知識(shí)，而且要學(xué)會(huì)運(yùn)用各種工具進(jìn)行輔助開發(fā)以及理論層面的知識(shí) ，包括代 碼的可維護(hù)性，組件的易用性，分層語義模板和瀏覽器分級(jí)支持等。 分層開發(fā) 在 XXXXXXXX 培訓(xùn)中心 網(wǎng)站概要確定后就需要進(jìn)行分層開發(fā)的劃分， 根據(jù)項(xiàng)目內(nèi)容的 不同，劃分工作。大致分為，總體結(jié)構(gòu)搭建，模塊制作，頁面制作，底層 CSS 搭建， Javascript 動(dòng)態(tài) 效果，內(nèi)部測試，代碼優(yōu)化。 這樣做的好處是能根據(jù)項(xiàng)目的不同 ，劃分出不同的功能模塊，合理的 安排時(shí)間 ， 在有限的時(shí)間內(nèi)做出很多模塊和功能 。降低開發(fā)成本，提高開發(fā)效率。 代碼編寫 前期工作準(zhǔn)備好后，就開始進(jìn)入代碼編寫階 段 ，我們采用 LSM 方式進(jìn)行，大致流程為 總規(guī)劃和設(shè)計(jì)草稿完成 后，就進(jìn)行前期的前端開發(fā)（搭建大致的HTML 結(jié)構(gòu)），然后設(shè)計(jì)出完設(shè)計(jì)稿后再進(jìn)行頁面樣式的完善 ，最后完成正式的頁面后交給開發(fā)，嵌套程序。這樣做的好處不僅能有效的提高開發(fā)效率，實(shí)現(xiàn)逐層開發(fā)，讓前端提前介入，減少整體消耗的時(shí)間，確保產(chǎn)品有更多的時(shí)間修改和完善。 確定了流程后還需要對(duì)產(chǎn)品原型進(jìn)行分析，拆分，把復(fù)用性高的部分找出來制作成代碼模塊，方便以后的套用 。確認(rèn)二，三級(jí)頁面的風(fēng)格搭建統(tǒng)一框架。 11 前端 設(shè)計(jì) 樣式確定以 后，就進(jìn)行通用模塊樣式的設(shè)計(jì)（包括按鈕，分 頁，默認(rèn)字體顏色，連接顏色等），完成后并提交給前端，統(tǒng)一的搭建。 在代碼的編寫過程中 ，最重要的是標(biāo)準(zhǔn)和規(guī)范的執(zhí)行遵守，在編寫 HTML時(shí)候充分發(fā)揮想象盡可能的滿足后期樣式表現(xiàn)的需要 ， 如圖所示： 圖 1 編寫代碼流程圖 代碼編寫過程中讓前端提前進(jìn)入開發(fā)流程中來 ，在 樣式屬性 后就進(jìn)行 HTML結(jié)構(gòu)的編寫，頁面設(shè)計(jì)完成后，在進(jìn)行樣式表的開發(fā) ，這樣不僅能節(jié)省很多的開發(fā)時(shí)間，提高開發(fā)效率， 能在 前端對(duì)全局頁面的把控 。在此同時(shí)也強(qiáng)調(diào)規(guī)范和模塊化的重要性，正所謂無規(guī)矩不成方圓，這樣能便于后期維護(hù)，減少維護(hù)成本。而模塊化，是敏捷開發(fā)所必需的，重要性在這里也不做過多的描述。 內(nèi)部測試與后續(xù)優(yōu)化 前端的內(nèi)部測試，指出頁面與設(shè)計(jì)稿不匹配的地方，優(yōu)化部分細(xì)節(jié)頁面樣式。測試不僅能提高內(nèi)測的質(zhì)量，還能更早的發(fā)現(xiàn)問題并及時(shí)的修改，否則