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

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

第1章DreamweaverCC入門

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

1.1DreamweaverCC功能概述

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

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

1.1.1主要功能

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

1.1.2新增功能

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

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

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

(1)實時視圖編輯功能

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

(2)元素快速視圖

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

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

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

(4)使用jQueryWidget

用戶可以使用jQueryUI將Widget從“插入”面板拖放到Web項目以制作進度條、滑塊、菜單和其他有用的組件。

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

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

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

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

(7)新增EdgeAnimate插入動畫

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

(8)在Behance上分享作品

用戶可以在Behance上分享項目，并得到來自世界各地的即時反饋。

(9)使用CreativeCloud存儲作品

用戶可以通過CreativeCloud隨時隨地保存并訪問自己的作品，也可以使用AdobeCreativeCloud，檢查并安裝DreamweaverCC擴展功能。

1.2DreamweaverCC的工作界面

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

圖1-1

1.2.1菜單欄

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

圖1-2

1.2.2工具欄

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

圖1-3

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

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

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

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

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

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

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

1.2.3文檔窗口

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

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

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

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

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

1.2.4“屬性”面板

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

圖1-4

1.2.5面板組

DreamweaverCC中的面板可以自由組合成面板組。每個面板組都可以展開和折疊，并且可以和其他面板組�？吭谝黄鸹蛉∠��？俊Ｃ姘褰M還可以�？康郊�成的應(yīng)用程序窗口中。這樣就能夠很容易地訪問所需的面板，而不會使工作區(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)簽的整個正文。圖標(biāo)為“元素快速視圖”，用于顯示環(huán)繞當(dāng)前選定內(nèi)容的標(biāo)簽的層次結(jié)構(gòu)。通過單擊該層次結(jié)構(gòu)中的標(biāo)簽，可以選擇該標(biāo)簽及其全部內(nèi)容。

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

1.3自定義工作區(qū)

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

1.3.1瀏覽工作區(qū)

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

推薦閱讀

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

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

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

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

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

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

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