【文章內(nèi)容簡介】 MyEclipse6。0以前版本需先安裝Eclipse。MyEclipse6。0以后版本安裝時不需安裝Eclipse。(2) DreamweareDreamweare是美國MACROMEDIA公司開發(fā)的集網(wǎng)頁制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁編輯器，它是第一套針對專業(yè)網(wǎng)頁設(shè)計師特別發(fā)展的視覺化網(wǎng)頁開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網(wǎng)頁[[5] 黃軍寶. 網(wǎng)站設(shè)計透過Dreamwear CS3學(xué)習(xí)HTMLDIVCSS[J] . 科學(xué)出版社. 2008, 35(9): 81~97]。使用網(wǎng)站地圖可以快速制作網(wǎng)站雛形，設(shè)計，更新和重組網(wǎng)頁。改變網(wǎng)頁位置或檔案名稱，Dreamweare 會自動更新所有鏈接。使用支援文字，HTML碼，HTML屬性標簽和一般語法的搜尋及置換功能使得復(fù)雜的網(wǎng)站更新變得迅速又簡單。(3) Photoshop Adobe Photoshop，簡稱“PS”，是一個由Adobe Systems開發(fā)和發(fā)行的圖像處理軟件。Photoshop主要處理以像素所構(gòu)成的數(shù)字圖像。使用其眾多的編修與繪圖工具，可以更有效的進行圖片編輯工作。在網(wǎng)站前端開發(fā)過程中需要把圖片用Photoshop處理成加載到網(wǎng)站頁面的圖片，用Photoshop 制作矢量圖形用作網(wǎng)站頁面的修飾按鈕。 前端開發(fā)相關(guān)技術(shù) Java script 簡介Java script[[6] 賈素玲,王強. Javasqript 程序設(shè)計[M]. , 15(4): 91~94]的出現(xiàn)，它可以使得信息和用戶之間不僅只是一種顯示和瀏覽的關(guān)系，而是實現(xiàn)了一種實時的，動態(tài)的，可交互式的表達能力。從而基于CGI靜態(tài)的HTML頁面將被可提供動態(tài)實時信息，并對客戶操作進行反應(yīng)的Web頁面的取代。Java script腳本正是滿足這種需求而產(chǎn)生的語言。它深受廣泛用戶的喜愛和歡迎。它是眾多腳本語言中較為優(yōu)秀的一種，它與WWW的結(jié)合有效地實現(xiàn)了網(wǎng)絡(luò)計算和網(wǎng)絡(luò)計算機的藍圖。無疑Java家族將占領(lǐng)Internet網(wǎng)絡(luò)的主導(dǎo)地位。因此，盡快掌握java script腳本語言編程方法是我國廣大用戶日益關(guān)心的問題。 Java script 基本特點(1) 基于對象的語言 java script是一種基于對象的語言，同時也可以看作一種面向?qū)ο蟮?。這意味著它能運用自己已經(jīng)創(chuàng)建的對象。因此，許多功能可以來自于腳本環(huán)境中對象的方法與腳本的相互作用[[7] 費東東. 挑戰(zhàn)Java scriptamp。Ajax應(yīng)用開發(fā)[J] . , 7(5): 35~36]。(2) 簡單性 java script的簡單性主要體現(xiàn)在：首先它是一種基于Java基本語句和控制流之上的簡單而緊湊的設(shè)計， 從而對于學(xué)習(xí)Java是一種非常好的過渡。其次它的變量類型是采用弱類型，并未使用嚴格的數(shù)據(jù)類型。(3) 安全性 java script是一種安全性語言，它不允許訪問本地的硬盤，并不能將數(shù)據(jù)存入到服務(wù)器上，不允許對網(wǎng)絡(luò)文檔進行修改和刪除，只能通過瀏覽器實現(xiàn)信息瀏覽或動態(tài)交互。從而有效地防止數(shù)據(jù)的丟失。(4) 動態(tài)性 java script是動態(tài)的，它可以直接對用戶或客戶輸入做出響應(yīng)，無須經(jīng)過Web服務(wù)程序。它對用戶的反映響應(yīng)，是采用以事件驅(qū)動的方式進行的。所謂事件驅(qū)動，就是指在主頁(Home Page)中執(zhí)行了某種操作所產(chǎn)生的動作，就稱為“事件”(Event)。比如按下鼠標，移動窗口，選擇菜單等都可以視為事件。當(dāng)事件發(fā)生后，可能會引起相應(yīng)的事件響應(yīng)。 CSS簡介CSS[[8] 林小 . CSS那些事 掌握網(wǎng)絡(luò)樣式CSS樣式布局[J] . , 4(5): 11~14] (層疊樣式表)是用來進行網(wǎng)頁風(fēng)格設(shè)計的，它簡化并擴展了HTML中的各種標記，使得各個標記的屬性更具有一般性和通用性，大大提高了HTML開發(fā)的效率。在制作網(wǎng)頁時采用CSS技術(shù)，可以有效地對頁面的布局，字體，顏色，背景和其他效果實現(xiàn)更加精確的控制，只要對相應(yīng)的代碼作一些簡單的修改，就可以改變同一頁面的不同部分，或者頁數(shù)不同的網(wǎng)頁的外觀和格式。什么是CSS？CSS中，Cascading是“層疊”的意思，也就是說在同一個Web文檔中可以有多個樣式表存在，這些樣式表根據(jù)所在的位置，擁有不同的優(yōu)先級，優(yōu)先級越高，就會在最后顯示時被采用。從樣式表插入的形式看可以分為3種。(1) 內(nèi)聯(lián)式樣式表；(2) 嵌入式樣式表；(3) 外部式樣式表；CSS的特點 CSS是用來擴展HTML的，而不是用來替換HTML的，也就是說CSS不能脫離HTML，它只是一項輔助工具。除了可擴展HTML的樣式設(shè)定外，CSS使得網(wǎng)頁的設(shè)計與維護更加高效，這主要表現(xiàn)在以下幾個方面：減少圖形文件的使用，集中管理樣式信息，設(shè)定共享樣式，將樣式分類使用。 JQuery JQuery[[9] 單東飛, 張曉菲, 魏然. 鋒利的JQuery[M] . ,28(5): 91~94]是繼prototype之后又一個優(yōu)秀的Javascript框架。其宗旨是——WRITE LESS，DO MORE，寫更少的代碼，做更多的事情。它是輕量級的js庫(壓縮后只有21k) ，這是其它的js庫所不及的，它兼容CSS3，還兼容各種瀏覽器 （IE 6。0+， FF 1。5+， Safari 2。0+， Opera 9。0+）。JQuery是一個快速的，簡潔的JavaScript庫，使用戶能更方便地處理HTML documents，events，實現(xiàn)動畫效果。jQuery其模塊化的使用方式使開發(fā)者可以很輕松的開發(fā)出功能強大的網(wǎng)頁特效。本文主要論述了如何在Web開發(fā)中使用jQuery技術(shù)，豐富網(wǎng)站的交互性和用戶體驗性[[8] 林小 . CSS那些事 掌握網(wǎng)絡(luò)樣式CSS樣式布局[J] . , 4(5): 11~14] 。jQuery是一套Javascrip腳本庫。Javascript輕量級腳本庫系列文章。 Javascript腳本庫類似于。NET的類庫， 這些工具方法或?qū)ο蠓椒ǚ庋b在類庫中，方便用戶使用。注意jQuery是腳本庫， 而不是腳本框架。庫不等于框架， 比如System程序集是類庫，而ASP .NET MVC是框架。 jQuery并不能幫助我們解決腳本的引用管理和功能管理，這些都是腳本框架要做的事。腳本庫能夠幫助完成編碼邏輯，實現(xiàn)業(yè)務(wù)功能。使用jQuery將極大的提高編寫javascript代碼的效率，讓寫出來的代碼更加優(yōu)雅，更加健壯。jQuery有如下特點：(1) 提供了強大的功能函數(shù)使用這些功能函數(shù)，能夠幫助我們快速完成各種功能，而且會讓我們的代碼異常簡潔。(2) 解決瀏覽器兼容性問題javascript腳本在不同瀏覽器的兼容性一直是Web開發(fā)人員的噩夢，常常一個頁面在IE9，F(xiàn)irefox下運行正常，在IE6下就出現(xiàn)莫名其妙的問題。 針對不同的瀏覽器編寫不同的腳本是一件痛苦的事情。有了jQuery我們將從這個噩夢中醒來， 比如在jQuery中的Event事件對象已經(jīng)被格式化成所有瀏覽器通用的，從前要根據(jù)event獲取事件觸發(fā)者， 而ff等標準瀏覽器下下是event。target。 jQuery則通過統(tǒng)一event對象，讓我們可以在所有瀏覽器中使用event。target獲取事件對象。(3) 實現(xiàn)豐富的UIjQuery可以實現(xiàn)比如漸變彈出，圖層移動等動畫效果，讓我們獲得更好的用戶體驗。單以漸變效果為例，從前我自己寫了一個可以兼容IE和ff的漸變動畫，使用大量javascript代碼實現(xiàn)，費心費力不說，寫完后沒有太多幫助過一端時間就忘記了。 再開發(fā)類似的功能還要再次費心費力。 如今使用jQuery就可以幫助我們快速完成此類應(yīng)用。(4) 糾正錯誤的腳本知識大部分開發(fā)人員對于javascript存在錯誤的認識。比如在頁面中編寫加載時即執(zhí)行的操作DOM的語句，在HTML元素或者document對象上直接添加onclick屬性，不知道onclick其實是一個匿名函數(shù)等等。擁有這些錯誤腳本知識的技術(shù)人員也能完成所有的開發(fā)工作，但是這樣的程序是不健壯的。比如在頁面中編寫加載時即執(zhí)行的操作DOM的語句，當(dāng)頁面代碼很小用戶加載很快時沒有問題，當(dāng)頁面加載稍慢時就會出現(xiàn)瀏覽器終止操作的錯誤。jQuery提供了很多簡便的方法幫助我們解決這些問題， 一旦使用jQuery你就將糾正這些錯誤的知識因為我們都是用標準的正確的jQuery腳本編寫方法! 本章小結(jié)本章介紹了開發(fā)數(shù)字媒體技術(shù)系網(wǎng)站前端所需要的開發(fā)工具和他們的運行環(huán)境，同時講述了相關(guān)的前端開發(fā)技術(shù)比如：Java script ，CSS ，jqurey等。以便以后的開發(fā)過程中能夠?qū)@些開發(fā)工具盒技術(shù)有深刻的理解。第3章 前端布局分析與設(shè)計 前端總體開發(fā)流程及設(shè)計前端設(shè)計Web前端開發(fā)技術(shù)是一個先易后難的過程，主要包括三個要素：HTML，CSS和JavaScript，這就要求前端開發(fā)工程師不僅要掌握基本的Web前端開發(fā)技術(shù)，網(wǎng)站性能優(yōu)化，SEO和服務(wù)器端的基礎(chǔ)知識，而且要學(xué)會運用各種工具進行輔助開發(fā)以及理論層面的知識，包括代碼的可維護性，組件的易用性，分層語義模板和瀏覽器分級支持等。 分層開發(fā)在數(shù)字媒體技術(shù)系網(wǎng)站概要確定后就需要進行分層開發(fā)的劃分，根據(jù)項目內(nèi)容的不同，劃分工作。大致分為，總體結(jié)構(gòu)搭建，模塊制作，頁面制作，底層JS搭建，JS交互效果，內(nèi)部測試，代碼優(yōu)化。如圖31所示：圖31分層開發(fā)圖這樣做的好處是能根據(jù)項目的不同，劃分出不同的功能模塊，合理的安排時間，在有限的時間內(nèi)做出很多模塊和功能。降低開發(fā)成本，提高開發(fā)效率。 代碼編寫前期工作準備好后，就開始進入代碼編寫階端，我們采用LSM方式進行，大致流程為總規(guī)劃和設(shè)計草稿完成后，就進行前期的前端開發(fā)（搭建大致的HTML結(jié)構(gòu)），然后設(shè)計出完設(shè)計稿后再進行頁面樣式的完善，最后完成正式的頁面后交給開發(fā)，嵌套程序。這樣做的好處不僅能有效的提高開發(fā)效率，實現(xiàn)逐層開發(fā)，讓前端提前介入，減少整體消耗的時間，確保產(chǎn)品有更多的時間修改和完善。確定了流程后還需要對產(chǎn)品原型進行分析，拆分，把復(fù)用性高的部分找出來制作成代碼模塊，方便以后的套用。確認二，三級頁面的風(fēng)格搭建統(tǒng)一框架。前端設(shè)計樣式確定以后，就進行通用模塊樣式的設(shè)計（包括按鈕，分頁，默認字體顏色，連接顏色等），完成后并提交給前端，統(tǒng)一的搭建。在代碼的編寫過程中，最重要的是標準和規(guī)范的執(zhí)行遵守，在編寫HTML時候充分發(fā)揮想象盡可能的滿足后期樣式表現(xiàn)的需要 。如圖32所示：圖 32 編寫代碼流程圖代碼編寫過程中讓前端提前進入開發(fā)流程中來，在樣式屬性后就進行HTML結(jié)構(gòu)的編寫，頁面設(shè)計完成后，在進行樣式表的開發(fā)，這樣不僅能節(jié)省很多的開發(fā)時間，提高開發(fā)效率，能在前端對全局頁面的把控。在此同時也強調(diào)規(guī)范和模塊化的重要性，正所謂無規(guī)矩不成方圓，這樣能便于后期維護，減少維護成本。而模塊化，是敏捷開發(fā)所必需的，重要性在這里也不做過多