建站
咨詢
售后
建站咨詢
新聞中心
【專稿】Edge Code是一款輕量級(jí)的Web開(kāi)發(fā)工具，它主要為Web前端開(kāi)發(fā)者提供一個(gè)可以編寫(xiě)HTML，CSS和JavaScript代碼的工具。2012年，Adobe向Web前端開(kāi)發(fā)者發(fā)布了一個(gè)開(kāi)源項(xiàng)目(MIT License)，名稱為Brackets，這個(gè)開(kāi)源項(xiàng)目就是Edge Code這款工具的核心。Brackets由來(lái)自于Adobe和Web社區(qū)的眾多開(kāi)發(fā)者共同在Github上維護(hù)的開(kāi)源項(xiàng)目（https://github.com/adobe/brackets），Brackets這款開(kāi)源的Web前端代碼編輯工具推出后，版本更迭的非常之快，短短6個(gè)月的時(shí)間，穩(wěn)定的更新Build達(dá)到了20個(gè)，圖1是Brackets工具的使用界面。
成都創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),曲江企業(yè)網(wǎng)站建設(shè),曲江品牌網(wǎng)站建設(shè),網(wǎng)站定制,曲江網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,曲江網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。
圖1.Brackets的使用界面
Brackets這個(gè)工具在某些功能上與一些已經(jīng)非常流行的前端開(kāi)發(fā)工具類似，具備了代碼編輯，代碼高亮，關(guān)聯(lián)提示，文件結(jié)構(gòu)等很好用的功能。但是Brackets也有自己非常明顯的幾個(gè)特徵：
***，開(kāi)源。這個(gè)工具的開(kāi)源意味著前端的開(kāi)發(fā)者可以深度定制這款工具為自己所用，從擴(kuò)展的插件到hack的功能都可以完全按照開(kāi)發(fā)者不同的需求來(lái)定制。
第二，與瀏覽器可以實(shí)現(xiàn)Live Development同步，使用Brackets可以跟開(kāi)發(fā)者的瀏覽器進(jìn)行實(shí)時(shí)開(kāi)發(fā)同步，在Brackets上編輯的功能能即時(shí)的在瀏覽器端出現(xiàn)效果。
第三，簡(jiǎn)潔高效，Brackets沒(méi)有復(fù)雜的設(shè)定和UI，簡(jiǎn)潔的UI，高速的響應(yīng)，很少的資源占用，讓W(xué)eb開(kāi)發(fā)者更有效率的進(jìn)行代碼編寫(xiě)工作。
繼承了Brackets的這些特點(diǎn)，Adobe Edge Code在2012年下半年正式通過(guò)Adobe創(chuàng)意云發(fā)布了。
我們可以通過(guò)登錄Adobe Creative Cloud來(lái)獲取免費(fèi)的Edge Code工具，如圖2所示。
圖2. 登錄creative.adobe.com后在app欄目中可以找到EdgeCode
CreativeCloud會(huì)自動(dòng)檢測(cè)你登錄所使用的操作系統(tǒng)，從而提供對(duì)應(yīng)版本的EdgeCode。繼承了開(kāi)源工具Brackets的特點(diǎn)，Edge Code這款工具擁有以下幾個(gè)最出色的功能：
***，高效的Quick Edit功能。在很多Web前端開(kāi)發(fā)者傳統(tǒng)的代碼編寫(xiě)過(guò)程中，修改一個(gè)Web頁(yè)面可以牽扯到對(duì)很多文件的修改，主要包括了html,css和js文件的改動(dòng)，通常這些修改都是按順序逐個(gè)的修改正確后，Web頁(yè)面才會(huì)呈現(xiàn)出修改后的效果，這種工作方式就變的容易出錯(cuò)。EdgeCode工具為了改善這種繁瑣的工作流程，提高代碼修改時(shí)的工作效率，引入了Quick Edit功能。接下來(lái)我們將關(guān)注如何在Edge Code中使用Quick Edit。首先，我們通過(guò)Edge Code的菜單File->Open Folder...選項(xiàng)打開(kāi)一個(gè)要處理的html頁(yè)面所在的文件夾，Edge Code會(huì)在打開(kāi)文件夾后在Edge Code左側(cè)顯示出該文件夾的文件結(jié)構(gòu)目錄，如圖3所示。
圖3. EdgeCode打開(kāi)的一個(gè)本地網(wǎng)頁(yè)所在的文件夾
上圖中紅色框中的htdocs是選擇打開(kāi)的文件夾，該文件夾下的Edge文件夾內(nèi)的index.html就是我們要示範(fàn)Quick Edit的目標(biāo)文件。單擊index.html文件，Edge Code會(huì)在右側(cè)打開(kāi)此頁(yè)面的源代碼編輯環(huán)境，如圖4所示。圖4中紅色圓圈框中的箭頭表示編輯的是左側(cè)的哪一個(gè)文件。
圖4. EdgeCode進(jìn)行html代碼編輯的窗口界面
我們?cè)诰庉嫶a窗口中找到第66行，將div的class屬性值”hero-unit”選中，然後按快捷鍵CMD+E（Windows系統(tǒng)是Ctrl+E)，Edge Code將會(huì)在編輯區(qū)域出現(xiàn)一個(gè)有關(guān)”hero-unit”的內(nèi)置編輯器，將與”hero-unit”相關(guān)聯(lián)的文件和代碼顯示在其中，如圖5所見(jiàn)。
圖5 EdgeCode開(kāi)啟代碼QuickEdit功能界面
我們通過(guò)在index.html中開(kāi)啟Quick Edit功能，可以快速完成對(duì)于一個(gè)Web頁(yè)面中同樣元素在不同文件中的關(guān)聯(lián)編輯。上例，是我們?cè)趇ndex.html頁(yè)面中要對(duì)”hero-unit”的div class進(jìn)行修改，而QuickEdit找到了相關(guān)可以影響”hero-unit”類的css關(guān)聯(lián)文件，從而我們可以直接修改bootstrap.css等2個(gè)文件中對(duì)于hero-unit類的定義，而無(wú)需進(jìn)行額外的查找確認(rèn)等效率不高的操作。Edge Code的Quick Edit功能不僅僅可以對(duì)HTML,CSS,js代碼中的特定屬性，命名做統(tǒng)一的快速編輯，還可以提供CSS屬性的可視化快速編輯，比如色彩。接下來(lái)用Edge Code打開(kāi)本文涉及的範(fàn)例里的bootstrap.min.css里的hero-unit類的background-color屬性值，選中十六進(jìn)制的色彩屬性值，用CMD+E開(kāi)啟Quick Edit，會(huì)欣喜的發(fā)現(xiàn)，Edge Code在原有代碼下方顯示一個(gè)內(nèi)置的可視化色彩編輯工具，讓開(kāi)發(fā)者可以輕松的在可視化環(huán)境下設(shè)定想要的數(shù)值。圖6顯示了Edge Code的Quick Edit開(kāi)啟可視化色彩編輯的功能。
圖6. Edge Code Quick Edit功能下的CSS可視化編輯功能
#p#
第二，Edge Code具備了和瀏覽器同步的Live Development功能。與瀏覽器同步進(jìn)行Live Development是Edge Code的另一個(gè)特色功能。目前***的Edge Code是Preview 3的版本，它可以很好的同Google Chrome繼承實(shí)現(xiàn)HTML5的Live Development。Edge Code的Live Development主要體現(xiàn)在開(kāi)發(fā)者在Edge Code里編輯的HTML和CSS代碼，要看到修改過(guò)的***效果，無(wú)需重新刷新頁(yè)面，所有針對(duì)修改的結(jié)果會(huì)同一時(shí)間動(dòng)態(tài)的顯示在瀏覽器中。下面，我們還是用本文中涉及到的範(fàn)例bootstrap.min.css來(lái)觀察Live Development。我們?cè)贓dge Code中將編輯環(huán)境轉(zhuǎn)換到index.html上，然後點(diǎn)擊Edge Code主界面右上角的“閃電”圖標(biāo)，Edge Code會(huì)啟動(dòng)（或重啟）Google Chrome瀏覽器，然后，index.html會(huì)顯示在瀏覽器中。 接著上一個(gè)Quick Edit修改css中.hero-unit類的background-color屬性值的例子，我們?cè)贓dge Code中對(duì)bootstrap.min.css中的.hero-unit的background-color屬性開(kāi)啟Quick Edit功能，如果我們還未更改任何背景色彩，我們其實(shí)已經(jīng)可以看到Google Chrome隨著我們?cè)贓dge Code中對(duì).hero-unit類所定義的div區(qū)域已經(jīng)被一個(gè)藍(lán)色線框選中，這其實(shí)已經(jīng)證明Google Chrome和Edge Code啟動(dòng)了Live Development的同步功能。隨著我們對(duì)background-color屬性的更改，會(huì)很明顯的看到Google Chrome中對(duì)應(yīng).hero-unit類的div區(qū)域的背景色彩發(fā)生了即時(shí)的變化。恭喜，我們已經(jīng)很輕鬆的用到了Edge Code的Live Development功能，圖7就是Live Development啟動(dòng)的截圖。
圖7. Edge Code和Google Chrome瀏覽器啟用同步Live Development功能
上圖中的紅色圓圈選中的閃電圖標(biāo)就是啟用Edge Code的Live Development功能選項(xiàng)，紅色箭頭則是表示在Edge Code中對(duì)CSS屬性進(jìn)行修改，對(duì)應(yīng)瀏覽器頁(yè)面會(huì)即時(shí)發(fā)生變化。
接下來(lái)我們要談的一個(gè)重要功能是屬于Edge Code特有的，也是Adobe為Edge Code這款工具整合的一個(gè)Creative Cloud上的云服務(wù)，就是Edge Code的Web Font功能。我們知道HTML5和CSS3的有一個(gè)***的功能就是在指定字體時(shí)，可以指定特定網(wǎng)絡(luò)上的某種字體作為頁(yè)面某些元素的字體樣式。而Edge Web Font服務(wù)是Adobe將2012年收購(gòu)的TypeKit的字體庫(kù)和開(kāi)放Google Web Fonts庫(kù)做了統(tǒng)一整合后，嵌入在Edge Code中的一項(xiàng)擴(kuò)展。接下來(lái)我們用本文用到的示例來(lái)完成對(duì)Edge Web Font的使用演示。首先，我們用Edge Code打開(kāi)index.html文件，在第69行為
這個(gè)HTML標(biāo)簽添加一個(gè)class屬性，如圖8所示。
圖8. Edge Code中為HTML中的文字段落添加class設(shè)定
接著我們用Edge Code打開(kāi)css目錄下的main.css，加入對(duì)mycustomfont定義，這裡的重點(diǎn)是，當(dāng)我們?yōu)閙ycustomfont定義font-family屬性時(shí)，Edge Code會(huì)出現(xiàn)一個(gè)可以選擇字體的樣式列表，其中最下面的一個(gè)選項(xiàng)Browse Web Fonts...則是瀏覽云服務(wù)上的Web Font樣式，如圖9所示。
圖9. 在Edge Code中通過(guò)Browse Web Fonts...選擇云服務(wù)提供的字體
點(diǎn)選Browse Web Fonts...選項(xiàng)后，Edge Code Web Fonts窗口就會(huì)出現(xiàn)，里面羅列了所有可用的網(wǎng)絡(luò)字體，在選擇一個(gè)字體后，點(diǎn)擊Done來(lái)完成。圖10是Adobe Edge Web Fonts選擇窗口。
圖10. Edge Code中Adobe Edge Web Fonts選擇界面
在確定Web Font的選擇后，我們點(diǎn)擊Edge Code右上角閃電圖標(biāo)右側(cè)的”Wf”字樣的圖標(biāo)，Edge Code會(huì)出現(xiàn)圖11的窗口。
圖11. Adobe Edge Web Fonts的調(diào)用代碼
按照?qǐng)D11中的描述要求，我們將選中的兩段JavaScript代碼拷貝至index.html中，如圖12所示。
圖12. 將Web Fonts的調(diào)用腳本嵌入到index.html中
在完成這些操作后，點(diǎn)擊Edge Code右上角的閃電圖標(biāo)，開(kāi)啟瀏覽器的Live view，就會(huì)看到被mycustomfont樣式指定的文本字體發(fā)生了變化。圖13，是使用Web Fonts后的樣式。
圖13. Edge Web Fonts被調(diào)用后網(wǎng)頁(yè)顯示形式
Adobe Edge Code除了上述幾個(gè)最重要的核心功能外，還具備很多細(xì)微體貼的小功能，隨著各位深入地使用此款工具，就會(huì)發(fā)現(xiàn)越來(lái)越多的欣喜。
關(guān)于Adobe Edge Code以及Brackets開(kāi)源項(xiàng)目的更多信息，你可以訪問(wèn)下列資源站點(diǎn)：
? http://html.adobe.com/edge/code/
? http://blog.brackets.io/
關(guān)于本教程使用的sample范例文件，可以訪問(wèn)www.initializr.com網(wǎng)站，通過(guò)在線點(diǎn)擊pre-configuration的Bootstrap選項(xiàng)直接生成。
分享題目：探索AdobeEdgeCode-HTML5與CSS3開(kāi)發(fā)工具
URL分享：http://www.5511xx.com/article/djipddc.html
