实战IT培训机构_黄色激情网站_IT培训班选大学生IT技术培训中心_黄色激情视频网站_中公优就业

《中公版·實(shí)用Web前端開(kāi)發(fā)：零基礎(chǔ)學(xué)Dreamweaver》主要針對(duì)網(wǎng)頁(yè)制作領(lǐng)域的初學(xué)者，從Dreamweaver工作界面開(kāi)始介紹，逐步深入，以綜合實(shí)例講解結(jié)尾。具體內(nèi)容包括DreamweaverCC入門(mén)、站點(diǎn)的創(chuàng)建與管理、HTML基礎(chǔ)知識(shí)、CSS樣式、DIV+CSS網(wǎng)頁(yè)布局、文字和段落等在網(wǎng)頁(yè)中的應(yīng)用、使用表格布局網(wǎng)頁(yè)、創(chuàng)建超鏈接、使用圖片修飾網(wǎng)頁(yè)、創(chuàng)建多媒體對(duì)象、表單應(yīng)用、模板和庫(kù)等的應(yīng)用、使用行為創(chuàng)建網(wǎng)頁(yè)特效、網(wǎng)站的發(fā)布與推廣、綜合實(shí)例。同時(shí)，本書(shū)每一章都配有二維碼視頻進(jìn)行重難點(diǎn)講解，力求讓讀者輕松掌握并學(xué)以致用。

IT圖書(shū)：《中公版·實(shí)用Web前端開(kāi)發(fā)：零基礎(chǔ)學(xué)Dreamweaver》精彩書(shū)摘

第1章DreamweaverCC入門(mén)

DreamweaverCC是Adobe公司推出的一款擁有可視化編輯界面的網(wǎng)頁(yè)制作與管理軟件的最新版本，其提供了強(qiáng)大的可視化布局工具、應(yīng)用開(kāi)發(fā)功能和代碼編輯支持，使設(shè)計(jì)和開(kāi)發(fā)的人員能夠有效地創(chuàng)建非常吸引人的、基于標(biāo)準(zhǔn)的網(wǎng)站和應(yīng)用。業(yè)界通常將Dreamweaver、Flash、Fireworks稱(chēng)為“網(wǎng)頁(yè)三劍客”。本章將帶領(lǐng)讀者認(rèn)識(shí)DreamweaverCC。

1.1DreamweaverCC功能概述

DreamweaverCC使用所見(jiàn)即所得的接口，亦有HTML(HyperTextMarkupLanguage，超文本標(biāo)記語(yǔ)言)編輯的功能，其目前有Mac和Windows系統(tǒng)的版本。

DreamweaverCC提供了功能強(qiáng)大的站點(diǎn)管理工具，通過(guò)它可以輕松實(shí)現(xiàn)站點(diǎn)名稱(chēng)及所在路徑定義、遠(yuǎn)程服務(wù)器連接、版本控制等功能，并且可以在這個(gè)基礎(chǔ)上實(shí)現(xiàn)文件管理等功能。

1.1.1主要功能

DreamweaverCC是一款功能強(qiáng)大的可視化網(wǎng)頁(yè)編輯與管理軟件。利用它，不僅可以輕松地創(chuàng)建跨平臺(tái)和跨瀏覽器的頁(yè)面，還可以直接創(chuàng)建具有動(dòng)態(tài)效果的網(wǎng)頁(yè)而不用自己編寫(xiě)源代碼。DreamweaverCC最主要的優(yōu)勢(shì)在于能夠進(jìn)行多任務(wù)工作，并且在操作方法、界面風(fēng)格方面更加人性化。用戶(hù)可以根據(jù)自己的喜好和工作方式，重新排列面板和面板組，自定義工作區(qū)。

1.1.2新增功能

DreamweaverCC包含新增功能預(yù)覽和新功能操作視頻，視頻講解了新功能的操作方法。該版本也提供選項(xiàng)，讓用戶(hù)略過(guò)預(yù)覽，直接開(kāi)始工作。

新功能視頻解說(shuō)是在用戶(hù)安裝或更新DreamweaverCC時(shí)，或刪除偏好設(shè)置并重新啟動(dòng)DreamweaverCC時(shí)顯示，也可以通過(guò)執(zhí)行“幫助”>“新增功能視頻”菜單命令隨時(shí)查看。

相較于以前的版本，DreamweaverCC新增了以下功能。

(1)實(shí)時(shí)視圖編輯功能

用戶(hù)可以直接在實(shí)時(shí)視圖中編輯并查看設(shè)計(jì)，連接或退出瀏覽器的時(shí)間會(huì)更短。實(shí)時(shí)視圖可以使用全新的基于Chromium的渲染引擎，因此在DreamweaverCC和常用瀏覽器中顯示的內(nèi)容看起來(lái)一樣。實(shí)時(shí)視圖編輯功能包括快速屬性檢查器、元素的顯示方式、現(xiàn)場(chǎng)查看屬性檢查器等。

(2)元素快速視圖

借助新的“元素快速視圖”，用戶(hù)可以在單個(gè)列表視圖中查看HTML元素，并能輕松地重新排列、復(fù)制和刪除。

(3)使用“CSS設(shè)計(jì)器”面板

用戶(hù)可以使用新的“CSS設(shè)計(jì)器”面板應(yīng)用和創(chuàng)建基于標(biāo)準(zhǔn)的CSS布局、顏色、字體、文本以及快速響應(yīng)的設(shè)計(jì)。“CSS設(shè)計(jì)器”面板的邊框控制項(xiàng)界面增強(qiáng)，標(biāo)簽控制項(xiàng)可幫助用戶(hù)以簡(jiǎn)單而直接的方式，設(shè)置四面邊框?qū)傩裕�可避免同時(shí)看到所有值，以減少混淆的情形。新的面板支持從一個(gè)選擇器復(fù)制樣式并貼入另一個(gè)選擇器中，用戶(hù)可以復(fù)制所有樣式，也可以?xún)H復(fù)制特定樣式類(lèi)別，支持快速編輯文字塊。用戶(hù)還可以在其中指定屬性的速記代碼，如邊界、間距、邊框和邊框半徑。

(4)使用jQueryWidget

用戶(hù)可以使用jQueryUI將Widget從“插入”面板拖放到Web項(xiàng)目以制作進(jìn)度條、滑塊、菜單和其他有用的組件。

(5)從PSD中提取資源和CSS

用戶(hù)可以復(fù)制PSD復(fù)合元素中的所有或特定CSS屬性，并直接將這些樣式粘貼到CSS設(shè)計(jì)器、實(shí)時(shí)視圖的元素顯示中，或直接粘貼到用戶(hù)的代碼(CSS源或HTML文檔)中，然后在PSD復(fù)合中選擇的元素的CSS屬性會(huì)自動(dòng)填充到代碼提示。如果希望使用編碼，則可以使用這些代碼提示將CSS屬性提取到代碼中。Extract提供了完整獨(dú)立的解決方案，可供從PSD復(fù)合中提取樣式信息和資源，無(wú)須頻繁地在Photoshop和DreamweaverCC之間來(lái)回切換。

(6)使用Typekit設(shè)計(jì)高品質(zhì)字體

在網(wǎng)頁(yè)中能夠使用的默認(rèn)字體并不多，如果需要使用特殊的字體效果，通常都是將特殊文字制作成圖片的形式。在DreamweaverCC中新增了EdgeWebFonts的功能，在網(wǎng)頁(yè)中可以加載Adobe提供的EdgeWeb字體，從而在網(wǎng)頁(yè)中實(shí)現(xiàn)特殊字體效果。執(zhí)行“修改”>“管理字體”命令，在彈出的“管理字體”對(duì)話(huà)框中選擇AdobeEdgeWebFonts選項(xiàng)卡，即可使用Adobe提供的EdgeWeb字體。

(7)新增EdgeAnimate插入動(dòng)畫(huà)

在全新的DreamweaverCC中可以插入AdobeEdgeAnimate動(dòng)畫(huà)(OAM文件)，默認(rèn)情況下，用戶(hù)在DreamweaverCC中插入AdobeEdgeAnimate動(dòng)畫(huà)后，會(huì)自動(dòng)在當(dāng)前站點(diǎn)的根目錄中生成一個(gè)名為edgeanimate_assets的文件夾，將AdobeEdgeAnimate動(dòng)畫(huà)的提取內(nèi)容放入該文件夾中。如果需要在DreamweaverCC中插入AdobeEdgeAnimate動(dòng)畫(huà)，可以單擊“插入”面板“媒體”選項(xiàng)卡中的“EdgeAnimate作品”按鈕。

(8)在Behance上分享作品

用戶(hù)可以在Behance上分享項(xiàng)目，并得到來(lái)自世界各地的即時(shí)反饋。

(9)使用CreativeCloud存儲(chǔ)作品

用戶(hù)可以通過(guò)CreativeCloud隨時(shí)隨地保存并訪(fǎng)問(wèn)自己的作品，也可以使用AdobeCreativeCloud，檢查并安裝DreamweaverCC擴(kuò)展功能。

1.2DreamweaverCC的工作界面

DreamweaverCC的工作界面主要由菜單欄、自定義快捷鍵、工具欄、文檔窗口、屬性面板、面板組、文檔狀態(tài)欄等構(gòu)成，如圖1-1所示。

圖1-1

1.2.1菜單欄

菜單欄包括“文件”“編輯”“查看”“插入”“修改”“格式”“命令”“站點(diǎn)”“窗口”和“幫助”10個(gè)菜單，如圖1-2所示。菜單欄上的每個(gè)菜單選項(xiàng)下面都有多個(gè)子菜單，每一個(gè)菜單命令都可以進(jìn)行一些相關(guān)的命令執(zhí)行或?qū)傩缘脑O(shè)置。

圖1-2

1.2.2工具欄

工具欄中包含一些按鈕，用來(lái)在“代碼”視圖、“拆分”視圖以及“設(shè)計(jì)”視圖、“實(shí)時(shí)視圖”間進(jìn)行切換。此外，工具欄還包含一些與文檔操作有關(guān)的常用命令和選項(xiàng)，如圖1-3所示。

圖1-3

●“代碼”視圖的按鈕為，用于只在文檔窗口中顯示“代碼”視圖。

●同時(shí)顯示“代碼”視圖和“設(shè)計(jì)”視圖的按鈕為，選中后文檔窗口將拆分為“代碼視圖”和“設(shè)計(jì)視圖”。其中文檔窗口中左側(cè)為“代碼”視圖，右側(cè)為“設(shè)計(jì)”視圖。

●“設(shè)計(jì)”視圖的按鈕為，用于只在文檔窗口中顯示“設(shè)計(jì)”視圖。

●“實(shí)時(shí)視圖”的按鈕為，其中顯示的內(nèi)容與用戶(hù)在瀏覽器中預(yù)覽的效果一樣。

●“在瀏覽器中預(yù)覽/調(diào)試”按鈕為，可根據(jù)用戶(hù)需求，在用戶(hù)選擇的瀏覽器中進(jìn)行預(yù)覽或調(diào)試文檔。

●“標(biāo)題文本框”圖標(biāo)為，用于為文檔輸入一個(gè)標(biāo)題，該標(biāo)題將顯示在瀏覽器的標(biāo)題欄中。如果文檔已有標(biāo)題，則該標(biāo)題將顯示于該區(qū)域中。

●“文件管理”按鈕為，用于對(duì)文件進(jìn)行管理，如對(duì)文件進(jìn)行獲取、取出、上傳、存回等操作。

1.2.3文檔窗口

文檔窗口用于顯示當(dāng)前的文檔，包括“設(shè)計(jì)”視圖、“代碼”視圖、“拆分”視圖、“實(shí)時(shí)視圖”。

●“設(shè)計(jì)”視圖：是一個(gè)用于可視化頁(yè)面布局、可視化編輯以及快速進(jìn)行應(yīng)用程序開(kāi)發(fā)的設(shè)計(jì)環(huán)境。在該視圖中，DreamweaverCC顯示文檔的完全可編輯的可視化表示形式，類(lèi)似于在瀏覽器中查看頁(yè)面時(shí)看到的內(nèi)容。用戶(hù)可以配置“設(shè)計(jì)”視圖，以在處理文檔時(shí)顯示動(dòng)態(tài)內(nèi)容。

●“代碼”視圖：一個(gè)用于編寫(xiě)和編輯HTML、JavaScript、服務(wù)器語(yǔ)言代碼以及任何其他類(lèi)型代碼的手工編碼環(huán)境。

●“拆分”視圖：該視圖使用戶(hù)可以在一個(gè)窗口中同時(shí)看到同一文檔的“代碼”視圖和“設(shè)計(jì)”視圖。

●實(shí)時(shí)視圖：該視圖使用戶(hù)可以直接在文檔窗口預(yù)覽設(shè)計(jì)效果。

1.2.4“屬性”面板

“屬性”面板主要用于查看和更改所選對(duì)象的各種屬性，每種對(duì)象都具有不同的屬性。在“屬性”面板中包括兩種選項(xiàng)，一種是“HTML”選項(xiàng)，將默認(rèn)顯示文本的格式、樣式和對(duì)齊方式等屬性。另一種是“CSS”選項(xiàng)，單擊屬性面板中的“CSS”選項(xiàng)，可以在“CSS”選項(xiàng)中設(shè)置各種屬性。“屬性”面板顯示當(dāng)前選定的對(duì)象或文本的屬性，也可以在這里直接修改屬性。如圖1-4所示。

圖1-4

1.2.5面板組

DreamweaverCC中的面板可以自由組合成面板組。每個(gè)面板組都可以展開(kāi)和折疊，并且可以和其他面板組停靠在一起或取消停靠。面板組還可以停靠到集成的應(yīng)用程序窗口中。這樣就能夠很容易地訪(fǎng)問(wèn)所需的面板，而不會(huì)使工作區(qū)變得混亂，如圖1-5所示。

圖1-5

1.2.6文檔狀態(tài)欄

文檔狀態(tài)欄可以提供與正在創(chuàng)建的文檔有關(guān)的其他信息，如圖1-6所示。

圖1-6

●“標(biāo)簽選擇器”圖標(biāo)為，單擊圖標(biāo)可以選擇文檔中屬于該標(biāo)簽的整個(gè)正文。圖標(biāo)為“元素快速視圖”，用于顯示環(huán)繞當(dāng)前選定內(nèi)容的標(biāo)簽的層次結(jié)構(gòu)。通過(guò)單擊該層次結(jié)構(gòu)中的標(biāo)簽，可以選擇該標(biāo)簽及其全部?jī)?nèi)容。

●“窗口大小”圖標(biāo)為，可以調(diào)整文檔窗口的大小，使其達(dá)到預(yù)定義或自定義的尺寸。

1.3自定義工作區(qū)

DreamweaverCC包括兩個(gè)主要的工作區(qū)，用于適應(yīng)多種不同的計(jì)算機(jī)配置和各種工作流程。用戶(hù)可以根據(jù)自己的喜好，調(diào)整DreamweaverCC中的編碼環(huán)境，使之適合自己的習(xí)慣。如果任何預(yù)設(shè)的工作區(qū)都不能完全滿(mǎn)足用戶(hù)需要，則可以自定義工作區(qū)。

1.3.1瀏覽工作區(qū)

DreamweaverCC是行業(yè)領(lǐng)先的HTML編輯器，其功能十分強(qiáng)大。不論是編碼人員、開(kāi)發(fā)的人員還是設(shè)計(jì)人員，都可以根據(jù)自己的喜好來(lái)自定義工作區(qū)，使其滿(mǎn)足自己的需求。DreamweaverCC中用戶(hù)可配置的面板和工具箱如圖1-7所示。

推薦閱讀

IT圖書(shū)：《中公版·UI設(shè)計(jì)師養(yǎng)成記：零基礎(chǔ)學(xué)Illustrator》精彩書(shū)摘

IT圖書(shū)：《中公版·網(wǎng)絡(luò)營(yíng)銷(xiāo)實(shí)戰(zhàn)派：零基礎(chǔ)學(xué)SEO/SEM》精彩書(shū)摘

IT圖書(shū)：《中公版·UI設(shè)計(jì)師養(yǎng)成記：零基礎(chǔ)學(xué)Photoshop》精彩書(shū)摘

IT圖書(shū)：《中公版·網(wǎng)絡(luò)營(yíng)銷(xiāo)實(shí)戰(zhàn)派：玩轉(zhuǎn)新媒體營(yíng)銷(xiāo)》精彩書(shū)摘

了解更多相關(guān)內(nèi)容

這篇關(guān)于“IT圖書(shū)：《中公版·實(shí)用Web前端開(kāi)發(fā)：零基礎(chǔ)學(xué)Dreamweaver》精彩書(shū)摘” 已幫助112人，希望也能幫到你!

>>本文地址：//m.jecan.cn/jiaoxue/2020/57428.html