优九直播安卓版本免费安装 ,门童直播最新下载安装,兰茜直播app大全下载最新版本免费安装软件

您所在的位置：首頁 > 優(yōu)就業(yè)動態(tài) > IT圖書：《中公版·實用Web前端開發(fā)：零基礎學Dreamweaver》精彩書摘

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

發(fā)布：優(yōu)就業(yè)IT培訓
來源：優(yōu)就業(yè)
2017-10-26 13:51:32
分享

手機端入口

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

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

第1章DreamweaverCC入門

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

1.1DreamweaverCC功能概述

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

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

1.1.1主要功能

DreamweaverCC是一款功能強大的可視化網(wǎng)頁編輯與管理軟件。利用它，不僅可以輕松地創(chuàng)建跨平臺和跨瀏覽器的頁面，還可以直接創(chuàng)建具有動態(tài)效果的網(wǎng)頁而不用自己編寫源代碼。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設計高品質字體

在網(wǎng)頁中能夠使用的默認字體并不多，如果需要使用特殊的字體效果，通常都是將特殊文字制作成圖片的形式。在DreamweaverCC中新增了EdgeWebFonts的功能，在網(wǎng)頁中可以加載Adobe提供的EdgeWeb字體，從而在網(wǎng)頁中實現(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ū)