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

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

第1章DreamweaverCC入門

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

1.1DreamweaverCC功能概述

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

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

1.1.1主要功能

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

1.1.2新增功能

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

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

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

(1)實時視圖編輯功能

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

(2)元素快速視圖

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

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

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

(4)使用jQueryWidget

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

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

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

(6)使用Typekit設計高品質字體

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

(7)新增EdgeAnimate插入動畫

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

(8)在Behance上分享作品

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

(9)使用CreativeCloud存儲作品

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

1.2DreamweaverCC的工作界面

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

圖1-1

1.2.1菜單欄

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

圖1-2

1.2.2工具欄

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

圖1-3

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

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

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

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

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

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

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

1.2.3文檔窗口

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

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

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

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

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

1.2.4“屬性”面板

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

圖1-4

1.2.5面板組

DreamweaverCC中的面板可以自由組合成面板組。每個面板組都可以展開和折疊，并且可以和其他面板組�？吭谝黄鸹蛉∠��？俊Ｃ姘褰M還可以�？康郊�成的應用程序窗口中。這樣就能夠很容易地訪問所需的面板，而不會使工作區(qū)變得混亂，如圖1-5所示。

圖1-5

1.2.6文檔狀態(tài)欄

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

圖1-6

●“標簽選擇器”圖標為，單擊圖標可以選擇文檔中屬于該標簽的整個正文。圖標為“元素快速視圖”，用于顯示環(huán)繞當前選定內容的標簽的層次結構。通過單擊該層次結構中的標簽，可以選擇該標簽及其全部內容。

●“窗口大小”圖標為，可以調整文檔窗口的大小，使其達到預定義或自定義的尺寸。

1.3自定義工作區(qū)

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

1.3.1瀏覽工作區(qū)

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

推薦閱讀

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

IT圖書：《中公版·網絡營銷實戰(zhàn)派：零基礎學SEO/SEM》精彩書摘

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

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

了解更多相關內容

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

>>本文地址：//m.hqfphsz.com/jiaoxue/2020/57428.html