Dreamweaver CC 2014新功能介紹

網(wǎng)頁(yè)設(shè)計(jì)軟件Dreamweaver CC 2014 版包含“實(shí)時(shí)檢查”和“CSS 設(shè)計(jì)工具”等多項(xiàng)增強(qiáng)功能，可以幫助用戶更加輕松地創(chuàng)建和更新桌面平臺(tái)和移動(dòng)設(shè)備的網(wǎng)頁(yè)內(nèi)容，另外，新的“元素快速檢查”功能可以幫助網(wǎng)頁(yè)設(shè)計(jì)師速檢查、預(yù)覽及編輯眾多的HTML標(biāo)記等。

　　下面我們?cè)敿?xì)介紹Dreamweaver CC 2014 帶來(lái)的新功能和其他增強(qiáng)功能：包括網(wǎng)頁(yè)元素快速檢查、實(shí)時(shí)檢查中的新編輯功能、CSS 設(shè)計(jì)工具增強(qiáng)功能、實(shí)時(shí)插入、使用身份文件支持 SFTP 連線、還原/重做增強(qiáng)功能、Business Catalyst 和 PhoneGap Build 工作流程的變化、存取 Dreamweaver 擴(kuò)展功能的變化、同步設(shè)置、直接從 Dreamweaver 發(fā)送錯(cuò)誤/功能要求、幫助中心(Help Center)、幫助菜單變化等等。

　　網(wǎng)頁(yè)元素快速檢查

　　Dreamweaver CC 2014 使用新增的“元素快速檢查”來(lái)檢查文件中的標(biāo)記，可為靜態(tài)和動(dòng)態(tài)內(nèi)容產(chǎn)生互動(dòng)式 HTML 樹(shù)狀結(jié)構(gòu)。直接在 HTML 樹(shù)狀結(jié)構(gòu)中修改您的靜態(tài)內(nèi)容結(jié)構(gòu)。

圖示：元素快速檢查

　　Dreamweaver CC 2014 推出“元素快速檢查”(菜單位置“檢查 > 元素快速檢查”) 是為了幫助網(wǎng)頁(yè)設(shè)計(jì)者簡(jiǎn)化設(shè)計(jì)過(guò)程、加快開(kāi)發(fā)速度。在之前版本的 Dreamweaver 中，用戶必須在“實(shí)時(shí)檢查”中標(biāo)示 HTML 元素，切換至代碼檢查，再編輯該元素。編輯之后必須再切換回到“實(shí)時(shí)檢查”才能預(yù)覽變化?，F(xiàn)在有了“元素快速檢查”，設(shè)計(jì)師就可以在清晰簡(jiǎn)的單一檢查界面中檢查所有元素，并編輯靜態(tài)內(nèi)容。

實(shí)時(shí)檢查中的新編輯功能

　　Dreamweaver CC 2014 可以直接在“實(shí)時(shí)檢查”中檢查及變化任何 HTML 元素的屬性，不需要重新整理任何項(xiàng)目即可查看其外觀。

　　A、快速屬性檢查器

　　“實(shí)時(shí)檢查”現(xiàn)在會(huì)針對(duì)您的頁(yè)面中的 HTML 元素顯示“快速屬性檢查器”。根據(jù)您選取的 HTML 元素，“快速屬性檢查器”可讓您直接在“實(shí)時(shí)檢查”中編輯屬性或文字。

圖示：用于編輯圖像屬性的快速屬性檢查

圖示：用于設(shè)置文字格式的快速屬性檢查

　　B、元素顯示

　　有了新的“元素顯示”，您現(xiàn)在可以直接在“實(shí)時(shí)檢查”中建立 HTML 元素與類(lèi)別和 ID 的關(guān)聯(lián)。“元素顯示”會(huì)提供您可用類(lèi)別和 ID 的提示，幫助您快速檢查及選擇所需的選項(xiàng)。

　　用于編輯類(lèi)別和 ID 的元素顯示

　　C、實(shí)時(shí)編輯文字

　　Dreamweaver CC 2014 可以直接在“實(shí)時(shí)”檢查中編輯文字并且預(yù)覽變化，而不需要在不同的檢查之間來(lái)回切換。

　　在“實(shí)時(shí)”檢查中的文字元素上按兩下，就會(huì)進(jìn)入編輯模式。

直接在實(shí)時(shí)檢查中編輯文字

　　D、實(shí)時(shí)檢查屬性檢查器

　　Dreamweaver CC 2014 現(xiàn)在可在“實(shí)時(shí)檢查”中使用“屬性檢查器”快速進(jìn)行頁(yè)面的編輯，而不必切換到“設(shè)計(jì)”或“代碼”檢查。

實(shí)時(shí)檢查屬性檢查器

CSS設(shè)計(jì)工具增強(qiáng)功能

　　A、邊框控制項(xiàng)界面增強(qiáng)

　　標(biāo)簽控制項(xiàng)可幫助您以簡(jiǎn)單而直覺(jué)的方式，設(shè)置四面邊框?qū)傩浴?/p>

　　標(biāo)簽控制可避免同時(shí)看到所有值，以減少混淆的情形。

　　直覺(jué)式方便的圖示，任何新手都能遵照?qǐng)?zhí)行。

　　有兩組圖示，可顯示未設(shè)置/已刪除與已停用狀態(tài)。

　　單一步驟“每一側(cè)”索引標(biāo)簽，可一次設(shè)置所有邊框?qū)傩浴?/p>

　　已計(jì)算的列可在檢查時(shí)引導(dǎo)您到最適當(dāng)?shù)乃饕龢?biāo)簽。

圖示：之前版本的Dreamweaver邊框控制項(xiàng)內(nèi)容

圖示：Dreamweaver CC 2014 的邊框控制項(xiàng)內(nèi)容

　　B、復(fù)制粘貼樣式

　　新的 Dreamweaver CC 2014 版本支持從一個(gè)選擇器復(fù)制樣式并貼入另一個(gè)選擇器中。用戶可以復(fù)制所有樣式，也可以僅復(fù)制特定樣式類(lèi)別，如“版面”、“文字”和“邊框”。

　　以鼠標(biāo)右鍵按一下選擇器，然后選擇可用選項(xiàng)：

圖示：使用 CSS 設(shè)計(jì)工具復(fù)制樣式

　　如果選擇器沒(méi)有樣式，會(huì)停用“復(fù)制”和“復(fù)制全部樣式”。

　　無(wú)法進(jìn)行編輯的遠(yuǎn)端網(wǎng)站會(huì)停用“貼上樣式”，但可以使用“復(fù)制”和“復(fù)制全部樣式”。

　　選擇器上已有的部分“貼上樣式”(重疊) 則可正常運(yùn)作。此時(shí)會(huì)貼上所有選擇器的聯(lián)集。

　　復(fù)制并貼上樣式也可以在各種不同的 CSS 文件連結(jié)中運(yùn)作：包括導(dǎo)入、連結(jié)、內(nèi)嵌樣式。

　　C、快速編輯文字塊

　　Dreamweaver CC 2014版本支持快速編輯文字塊，您可以在其中指定屬性的速記代碼，如邊界、間距、邊框和邊框半徑。這項(xiàng)變化是特別為偏好指定代碼的使用者設(shè)計(jì)，以便使用鼠標(biāo)/鍵盤(pán)來(lái)指定屬性。

　　D、自定義屬性工作流程增強(qiáng)功能

　　之前，您必須在 CSS 設(shè)計(jì)工具的“屬性”面板中按一下 +，以新增“Other”(或自定義) 屬性?，F(xiàn)在有一組文字方塊 - 屬性名稱和值 - 在“屬性”清單尾端隨時(shí)供您使用。這些文字方塊可讓您直接輸入屬性名稱及其值，而不必先按一下 +。

　　如果要新增自定義屬性的其他列，請(qǐng)按“索引標(biāo)簽”。

　　“other”屬性群組的名稱已變化為“Custom”。

　　E、鍵盤(pán)快捷鍵

　　Dreamweaver CC 2014新版支持使用鍵盤(pán)快捷鍵新增或刪除 CSS 選擇器和屬性，也可以在“屬性”面板中的屬性群組之間瀏覽。

　　CTRL+Alt+[Shift =] ：新增選擇器 (如果控制項(xiàng)位于選擇器區(qū)段之中)

　　Ctrl+Alt+S ：新增選擇器 (如果控制項(xiàng)位于應(yīng)用程序中任何位置)

　　CTRL+Alt+[Shift =] ：新增屬性 (如果控制項(xiàng)位于屬性區(qū)段之中)

　　CTRL+Alt+P ：新增屬性 (如果控制項(xiàng)位于應(yīng)用程序中任何位置)

　　選取 + 刪除 ：刪除選擇器 (如果已選取了選擇器)

　　CTRL+Alt+(PgUp/PgDn) ：位于屬性子面板時(shí)，在區(qū)段之間跳動(dòng)

　　F、較為特定/較不特定選擇器

　　Dreamweaver CC 2014新版會(huì)在加入選擇器時(shí)提供最多三條規(guī)則提示，用戶可以使用上/下鍵，在“較為特定/較不特定”之間切換。

圖示：較為特定/較不特定選擇器

　　G、滾動(dòng)至類(lèi)別

　　在之前版本中，當(dāng)您在 CSS 設(shè)計(jì)工具的“屬性”面板頂端按一下“背景”或“其他”類(lèi)別時(shí)，這些類(lèi)別會(huì)在面板中變得“可見(jiàn)”，但其實(shí)類(lèi)別并非確實(shí)顯示在面板頂端。

　　現(xiàn)在，Dreamweaver CC 2014新版的“背景”和“其他”類(lèi)別 (重新命名為“自定義”) 會(huì)在用戶按一下時(shí)顯示在面板的頂端。