Web前端開(kāi)發(fā)第2章：開(kāi)發(fā)工具1本章主要內(nèi)容開(kāi)發(fā)工具綜述原型設(shè)計(jì)工具開(kāi)發(fā)工具調(diào)試工具代碼托管工具項(xiàng)目管理系統(tǒng)21.開(kāi)發(fā)工具綜述Web前端開(kāi)發(fā)工具根據(jù)開(kāi)發(fā)的階段和用途不同，可分為:原型設(shè)計(jì)工具開(kāi)發(fā)工具調(diào)試工具代碼托管工具342.原型設(shè)計(jì)工具原型設(shè)計(jì)是將頁(yè)面的模塊、元素、人機(jī)交互的形式，利用線框描述的方法，將功能具體、生動(dòng)地進(jìn)行表達(dá)。原型可劃分為以下3種類型：紙?jiān)停寒嬙谖臋n紙、白板上的設(shè)計(jì)原型、示意圖。特點(diǎn)為：便于修改和繪制，不便于保存和展示。低保真原型：基于現(xiàn)有的界面或系統(tǒng)，通過(guò)電腦進(jìn)行一些加工后的設(shè)計(jì)稿。特點(diǎn)為：示意更加明確，能夠包含設(shè)計(jì)的交互和反饋，但在美觀、效果等方面欠佳。高保真原型：產(chǎn)品演示Demo或概念設(shè)計(jì)展示。特點(diǎn)為：視覺(jué)上與實(shí)際產(chǎn)品等效，體驗(yàn)上與真實(shí)產(chǎn)品接近，但需要較多的投入，成本高。52.1什么是原型設(shè)計(jì)6原型設(shè)計(jì)的傳統(tǒng)流程2.原型設(shè)計(jì)工具簡(jiǎn)介Axure是一款專業(yè)的快速原型設(shè)計(jì)工具，可以通過(guò)組件的方式幫助網(wǎng)站或軟件設(shè)計(jì)師快速建立帶有注釋的原型（流程圖、線框圖），并憑借自定義的可重用元件、動(dòng)態(tài)面板以及豐富的腳本建立能夠展示基本功能或頁(yè)面邏輯的動(dòng)態(tài)演示文件。Axure為用戶提供了豐富的組件樣式，通過(guò)該工具能夠創(chuàng)建低保真、高保真甚至接近于實(shí)際效果的界面。72.2原型設(shè)計(jì)工具-AxureRP2.原型設(shè)計(jì)工具主要特點(diǎn)快速建構(gòu)原型擁有全套web控件庫(kù)，直接拖拽即可快捷而簡(jiǎn)便的制作產(chǎn)品原型。交互效果逼真，便于需求驗(yàn)證豐富的動(dòng)態(tài)面板可以用來(lái)模擬各種復(fù)雜的交互效果，導(dǎo)出HTML后可以更加準(zhǔn)確的傳達(dá)信息架構(gòu)和頁(yè)面跳轉(zhuǎn)。82.2原型設(shè)計(jì)工具-AxureRP9現(xiàn)場(chǎng)演示：在Windows7系統(tǒng)平臺(tái)上安裝AxureRP8。AxureRP軟件界面和基本使用方法。使用AxureRP實(shí)現(xiàn)百度登錄頁(yè)（或其他頁(yè)面）的原型設(shè)計(jì)。3.開(kāi)發(fā)工具開(kāi)發(fā)工具的作用：編寫HTML、CSS和JavaScript程序。提高開(kāi)發(fā)效率。103.1開(kāi)發(fā)工具的作用3.開(kāi)發(fā)工具簡(jiǎn)介AdobeDreamweaver是第一個(gè)針對(duì)專業(yè)網(wǎng)頁(yè)設(shè)計(jì)師特別開(kāi)發(fā)的視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具，可用于設(shè)計(jì)并部署極具吸引力的網(wǎng)站和Web應(yīng)用程序，利用Dreamweaver可以輕而易舉地制作出跨越平臺(tái)限制和跨越瀏覽器限制的網(wǎng)頁(yè)，并提供強(qiáng)大的編碼環(huán)境及基于標(biāo)準(zhǔn)的WYSIWYG（所見(jiàn)即所得）設(shè)計(jì)界面。113.2網(wǎng)站開(kāi)發(fā)工具-AdobeDreamweaver3.開(kāi)發(fā)工具主要特點(diǎn)最佳的制作效率：Dreamweaver可以用最快速的方式將Fireworks，F(xiàn)reeHand或Photoshop等文件移至網(wǎng)頁(yè)上。對(duì)菜單、快捷鍵與格式控制，只要一個(gè)簡(jiǎn)單步驟即可完成。網(wǎng)站管理：快速制作網(wǎng)站雛形、設(shè)計(jì)、更新和重組網(wǎng)頁(yè)。無(wú)可比擬的控制能力：該軟件是唯一提供RoundtripHTML、視覺(jué)化編輯與原始碼編輯同步的設(shè)計(jì)工具。所見(jiàn)即所得：整合動(dòng)態(tài)式出版視覺(jué)編輯及電子商務(wù)功能，用戶不需要透過(guò)瀏覽器就能預(yù)覽網(wǎng)頁(yè)。樣板和XML：將內(nèi)容與設(shè)計(jì)分開(kāi)，應(yīng)用于快速網(wǎng)頁(yè)更新和團(tuán)隊(duì)合作網(wǎng)頁(yè)編輯。123.2網(wǎng)站開(kāi)發(fā)工具-AdobeDreamweaver13現(xiàn)場(chǎng)演示：在Windows7系統(tǒng)平臺(tái)上的安裝AdobeDreamweaverCS6。AdobeDreamweaverCS6的軟件界面和基本操作方法。創(chuàng)建站點(diǎn)。創(chuàng)建網(wǎng)頁(yè)。3.開(kāi)發(fā)工具簡(jiǎn)介NetBeans是一個(gè)為軟件開(kāi)發(fā)者設(shè)計(jì)，自由、開(kāi)放的IDE（集成開(kāi)發(fā)環(huán)境），可建立桌面應(yīng)用、企業(yè)級(jí)應(yīng)用、Web開(kāi)發(fā)、Java移動(dòng)應(yīng)用程序開(kāi)發(fā)、C/C++等。NetBeans幫助開(kāi)發(fā)人員編寫、編譯、調(diào)試和部署應(yīng)用，并將版本控制融入其中。NetBeans可以實(shí)現(xiàn)跨平臺(tái)應(yīng)用，包括Windows、Linux、MacOS和Solaris等操作系統(tǒng)。143.3網(wǎng)站開(kāi)發(fā)工具-OracleNetbeans3.開(kāi)發(fā)工具主要特點(diǎn)功能全面的Web應(yīng)用開(kāi)發(fā)環(huán)境：開(kāi)發(fā)者可通過(guò)頁(yè)面檢查、CSS樣式編輯器和JavaScript編輯器、調(diào)試器等工具來(lái)提升開(kāi)發(fā)效率。NetBeansHTTP監(jiān)視器：開(kāi)發(fā)者可以通過(guò)HTTP監(jiān)視器來(lái)監(jiān)視請(qǐng)求、HTTPHeader、cookies、會(huì)話、servlet上下文及客戶端/服務(wù)器端參數(shù)，并將其輸出到一個(gè)日志中進(jìn)行查看。代碼自動(dòng)完成：NetBeans只需鍵入幾個(gè)字符，即可進(jìn)行代碼補(bǔ)全提醒。153.3網(wǎng)站開(kāi)發(fā)工具-OracleNetbeans3.開(kāi)發(fā)工具簡(jiǎn)介VisualStudioCodeMicrosoftVisualStudioCode是微軟公司發(fā)布的運(yùn)行于MacOSX、Windows和Linux環(huán)境，針對(duì)編寫現(xiàn)代Web和云應(yīng)用的跨平臺(tái)源代碼編輯器。163.4網(wǎng)站開(kāi)發(fā)工具-MicrosoftVisualStudio3.開(kāi)發(fā)工具主要特點(diǎn)跨平臺(tái)：VisualStudioCode支持MacOSX、Windows和Linux。海量語(yǔ)言支持：支持30多種語(yǔ)言的代碼編輯器，可以編輯C#，VB，JavaScript，HTML，CSS，TypeScript，Ruby，Objective-C，PHP，JSON，Less，Sass，Markdown等。并排編輯：可以支持三個(gè)同步的文件編輯，每個(gè)人都可以發(fā)射命令提示符。智能感應(yīng)：確?；谡Z(yǔ)言特性能夠獲得友好的提示，同時(shí)在編寫代碼時(shí)結(jié)合上下文智能感應(yīng)。調(diào)試：可設(shè)置斷點(diǎn)，查看調(diào)用堆棧或運(yùn)行時(shí)的變量，暫?；蛑鸩綀?zhí)行代碼。173.4網(wǎng)站開(kāi)發(fā)工具-MicrosoftVisualStudio18現(xiàn)場(chǎng)演示：在Windows7系統(tǒng)平臺(tái)上安裝MicrosoftVisualStudioCode。MicrosoftVSCode的軟件界面與基本操作。創(chuàng)建網(wǎng)站。創(chuàng)建網(wǎng)頁(yè)。4.調(diào)試工具什么是Web調(diào)試：在Web應(yīng)用開(kāi)發(fā)過(guò)程中，開(kāi)發(fā)人員需要借助工具了解程序的執(zhí)行情況，從而修正語(yǔ)法錯(cuò)誤和邏輯錯(cuò)誤，以確定程序的正確性、安全性和穩(wěn)定性等。Web調(diào)試的步驟：錯(cuò)誤定位修改設(shè)計(jì)和代碼排除錯(cuò)誤，防止新錯(cuò)誤產(chǎn)生194.1什么是Web調(diào)試4.調(diào)試工具M(jìn)ozillaFirefoxMozillaFirefox，中文名為“火狐”，是一個(gè)開(kāi)源網(wǎng)頁(yè)瀏覽器，使用Gecko引擎。Firefox由Mozilla基金會(huì)與數(shù)百個(gè)志愿者所開(kāi)發(fā)，原名“Phoenix”（鳳凰），之后改名“MozillaFirebird”（火鳥），再改為現(xiàn)在的名字。使用Firefox可以在瀏覽器實(shí)時(shí)運(yùn)行HTML、CSS等代碼。Firefox內(nèi)置有強(qiáng)大的JavaScript調(diào)試工具，可以隨時(shí)暫停JS動(dòng)畫，觀察靜態(tài)細(xì)節(jié)，還可以使用JS分析器來(lái)分析校準(zhǔn)，找到問(wèn)題原因。204.2網(wǎng)站調(diào)試工具-FireFox4.調(diào)試工具GoogleChromeGoogle瀏覽器，是由Google公司開(kāi)發(fā)的開(kāi)放源代碼的網(wǎng)頁(yè)瀏覽器。該瀏覽器是基于其他開(kāi)源軟件所撰寫，包括WebKit和Mozilla，目標(biāo)是提升穩(wěn)定性、速度和安全性，并創(chuàng)造出簡(jiǎn)單且有效率的使用者界面。Chrome對(duì)于HTML5和CSS3提供比較完善的支持。此外，Chrome還能夠模擬手機(jī)調(diào)試。214.3網(wǎng)站調(diào)試工具-GoogleChrome4.調(diào)試工具InternetExplorerInternetExplorer是微軟推出的一款隨所有新版本的Windows操作系統(tǒng)內(nèi)置的默認(rèn)網(wǎng)頁(yè)瀏覽器，同時(shí)也是微軟Windows操作系統(tǒng)的組成部分。InternetExplorer可以在瀏覽器中交互式地突出顯示被選擇的網(wǎng)頁(yè)元素，查看style元素，定位div等，用戶能夠直接在瀏覽器窗口中瀏覽、傳輸和更新HTMLDOM。224.4網(wǎng)站調(diào)試工具-InternetExplorer4.調(diào)試工具M(jìn)icrosoftEdgeMicrosoftEdge是微軟在2015年發(fā)布的，為了取代InternetExploer，設(shè)計(jì)注重實(shí)用和極簡(jiǎn)主義,渲染引擎為EdgeHTML。MicrosoftEdge加強(qiáng)了源代碼的導(dǎo)航能力，支持JavaScript和TypeScript跳轉(zhuǎn)至定義；對(duì)控制臺(tái)進(jìn)行改進(jìn)，標(biāo)出某個(gè)日志消息來(lái)自于源代碼的哪一部分，使用Esc鍵打開(kāi)控制臺(tái)，消息中的鏈接能夠進(jìn)行點(diǎn)擊；DOM瀏覽器的集成，支持元素高亮，從時(shí)間線中檢閱某個(gè)元素。234.4網(wǎng)站調(diào)試工具-InternetExplorer24現(xiàn)場(chǎng)演示：使用FireFox審查網(wǎng)頁(yè)頁(yè)面的元素。使用FireFox進(jìn)行網(wǎng)頁(yè)調(diào)試。5.代碼托管工具場(chǎng)景一：

某公司進(jìn)行方案設(shè)計(jì)，最初提供方案A，討論后更改成為B，進(jìn)一步討論仍然選擇A，此時(shí)發(fā)現(xiàn)A沒(méi)有備份。場(chǎng)景二：

一個(gè)項(xiàng)目需要多個(gè)工程師合作完成，工程師每天對(duì)修訂的文件進(jìn)行合并無(wú)法統(tǒng)一進(jìn)度，團(tuán)隊(duì)協(xié)作困難。場(chǎng)景三：

項(xiàng)目開(kāi)發(fā)中，開(kāi)發(fā)服務(wù)器硬盤故障，而程序無(wú)備份。255.1為什么要進(jìn)行代碼托管5.代碼托管工具代碼托管主要有以下方面功能：版本控制：每一次改動(dòng)是一個(gè)版本，在必要時(shí)可以迅速、準(zhǔn)確地取出相應(yīng)的版本。靈活：對(duì)于大型項(xiàng)目，可以根據(jù)需要從云端復(fù)制部分代碼到本地，開(kāi)發(fā)時(shí)間不受時(shí)間、地域的限制。備份：將代碼進(jìn)行托管，同時(shí)也是對(duì)代碼進(jìn)行備份，是項(xiàng)目安全的一個(gè)保障。并行開(kāi)發(fā)：允許多個(gè)團(tuán)隊(duì)同時(shí)開(kāi)發(fā)一個(gè)應(yīng)用程序的多個(gè)版本，從而提高了整體的效率。265.2代碼托管的基本功能5.代碼托管工具簡(jiǎn)介GitHub是面向開(kāi)源及私有軟件項(xiàng)目的托管平臺(tái)。GitHub簡(jiǎn)化了版本控制的管理和操作流程，為開(kāi)發(fā)者提供了更好的交流平臺(tái)。使用GitHub使創(chuàng)建項(xiàng)目變得非常輕松，創(chuàng)建者只需在GitHub上點(diǎn)擊一下鼠標(biāo)即可創(chuàng)建一個(gè)新版本庫(kù)。275.3代碼托管工具-GitHub5.代碼托管工具GitHub的操作過(guò)程為：285.3代碼托管工具-GitHub5.代碼托管工具主要特點(diǎn)對(duì)Git的完整支持：相比其他開(kāi)源項(xiàng)目托管平臺(tái)，GitHub對(duì)Git版本庫(kù)提供了完整的協(xié)議支持，支持HTTP協(xié)議、Git-daemon、SSH協(xié)議。在線編輯文件：GitHub提供了在線編輯文件的功能，不熟悉Git的用戶也可以直接通過(guò)瀏覽器修改版本庫(kù)里的文件。社交編程：將社交網(wǎng)絡(luò)引入項(xiàng)目托管平臺(tái)，用戶可以關(guān)注項(xiàng)目、關(guān)注其它用戶進(jìn)而了解項(xiàng)目和開(kāi)發(fā)者動(dòng)態(tài)。295.3代碼托管工具-GitHub5.代碼托管工具簡(jiǎn)介SVN（Subversion），是一個(gè)開(kāi)放源代碼的版本控制系統(tǒng)，用于團(tuán)隊(duì)開(kāi)發(fā)中的多人文檔操作的更新、處理和合并。SVN能夠跨平臺(tái)使用，支持大多數(shù)常見(jiàn)的操作系統(tǒng)。305.4代碼托管工具-SVN5.代碼托管工具主要特點(diǎn)統(tǒng)一的版本號(hào)：任何一次提交都會(huì)對(duì)所有文件增加到同一個(gè)新版本號(hào)，即使是提交并不涉及的文件。原子提交：進(jìn)行一系列相關(guān)的更改后，可以選擇要提交的內(nèi)容。一致的數(shù)據(jù)操作：Subversion用二進(jìn)制差異算法描述文件的變化，對(duì)于文本（可讀）和二進(jìn)制（不可讀）文件其操作方式是一致的。高效的分支和標(biāo)簽操作：在Subversion中，分支與標(biāo)簽操作的開(kāi)銷與工程的大小無(wú)關(guān)。Subversion的分支和標(biāo)簽操作的作用只是一種類似于硬鏈接的機(jī)制拷貝整個(gè)工程。315.4代碼托管工具-SVN5.代碼托管工具使用GitHub開(kāi)源平臺(tái)實(shí)現(xiàn)網(wǎng)站代碼托管的過(guò)程：創(chuàng)建GitHub賬號(hào)，填寫注冊(cè)信息325.5案例：使用GitHub開(kāi)源平臺(tái)實(shí)現(xiàn)網(wǎng)站代碼托管5.代碼托管工具創(chuàng)建項(xiàng)目335.5案例：使用GitHub開(kāi)源平臺(tái)實(shí)現(xiàn)網(wǎng)站代碼托管5.代碼托管工具指定用戶名和電子郵件345.5案例：使用GitHub開(kāi)源平臺(tái)實(shí)現(xiàn)網(wǎng)站代碼托管5.代碼托管工具GitHub選擇的默認(rèn)通信方式是SSH，所以要先在Git中生成公鑰文件。355.5案例：使用GitHub開(kāi)源平臺(tái)實(shí)現(xiàn)網(wǎng)站代碼托管5.代碼托管工具檢測(cè)是否能夠通過(guò)SSH連接Githu