IT培訓(xùn)網(wǎng)
IT在線學(xué)習(xí)
《中公版·實(shí)用Web前端開發(fā):零基礎(chǔ)學(xué)Dreamweaver》主要針對網(wǎng)頁制作領(lǐng)域的初學(xué)者,從Dreamweaver工作界面開始介紹,逐步深入,以綜合實(shí)例講解結(jié)尾。具體內(nèi)容包括DreamweaverCC入門、站點(diǎn)的創(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ā)布與推廣、綜合實(shí)例。同時(shí),本書每一章都配有二維碼視頻進(jìn)行重難點(diǎn)講解,力求讓讀者輕松掌握并學(xué)以致用。
第1章DreamweaverCC入門
DreamweaverCC是Adobe公司推出的一款擁有可視化編輯界面的網(wǎng)頁制作與管理軟件的最新版本,其提供了強(qiáng)大的可視化布局工具、應(yīng)用開發(fā)功能和代碼編輯支持,使設(shè)計(jì)和開發(fā)的人員能夠有效地創(chuàng)建非常吸引人的、基于標(biāo)準(zhǔn)的網(wǎng)站和應(yīng)用。業(yè)界通常將Dreamweaver、Flash、Fireworks稱為“網(wǎng)頁三劍客”。本章將帶領(lǐng)讀者認(rèn)識DreamweaverCC。
1.1DreamweaverCC功能概述
DreamweaverCC使用所見即所得的接口,亦有HTML(HyperTextMarkupLanguage,超文本標(biāo)記語言)編輯的功能,其目前有Mac和Windows系統(tǒng)的版本。
DreamweaverCC提供了功能強(qiáng)大的站點(diǎn)管理工具,通過它可以輕松實(shí)現(xiàn)站點(diǎn)名稱及所在路徑定義、遠(yuǎn)程服務(wù)器連接、版本控制等功能,并且可以在這個基礎(chǔ)上實(shí)現(xiàn)文件管理等功能。
1.1.1主要功能
DreamweaverCC是一款功能強(qiáng)大的可視化網(wǎng)頁編輯與管理軟件。利用它,不僅可以輕松地創(chuàng)建跨平臺和跨瀏覽器的頁面,還可以直接創(chuàng)建具有動態(tài)效果的網(wǎng)頁而不用自己編寫源代碼。DreamweaverCC最主要的優(yōu)勢在于能夠進(jìn)行多任務(wù)工作,并且在操作方法、界面風(fēng)格方面更加人性化。用戶可以根據(jù)自己的喜好和工作方式,重新排列面板和面板組,自定義工作區(qū)。
1.1.2新增功能
DreamweaverCC包含新增功能預(yù)覽和新功能操作視頻,視頻講解了新功能的操作方法。該版本也提供選項(xiàng),讓用戶略過預(yù)覽,直接開始工作。
新功能視頻解說是在用戶安裝或更新DreamweaverCC時(shí),或刪除偏好設(shè)置并重新啟動DreamweaverCC時(shí)顯示,也可以通過執(zhí)行“幫助”>“新增功能視頻”菜單命令隨時(shí)查看。
相較于以前的版本,DreamweaverCC新增了以下功能。
(1)實(shí)時(shí)視圖編輯功能
用戶可以直接在實(shí)時(shí)視圖中編輯并查看設(shè)計(jì),連接或退出瀏覽器的時(shí)間會更短。實(shí)時(shí)視圖可以使用全新的基于Chromium的渲染引擎,因此在DreamweaverCC和常用瀏覽器中顯示的內(nèi)容看起來一樣。實(shí)時(shí)視圖編輯功能包括快速屬性檢查器、元素的顯示方式、現(xiàn)場查看屬性檢查器等。
(2)元素快速視圖
借助新的“元素快速視圖”,用戶可以在單個列表視圖中查看HTML元素,并能輕松地重新排列、復(fù)制和刪除。
(3)使用“CSS設(shè)計(jì)器”面板
用戶可以使用新的“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)可幫助用戶以簡單而直接的方式,設(shè)置四面邊框?qū)傩,可避免同時(shí)看到所有值,以減少混淆的情形。新的面板支持從一個選擇器復(fù)制樣式并貼入另一個選擇器中,用戶可以復(fù)制所有樣式,也可以僅復(fù)制特定樣式類別,支持快速編輯文字塊。用戶還可以在其中指定屬性的速記代碼,如邊界、間距、邊框和邊框半徑。
(4)使用jQueryWidget
用戶可以使用jQueryUI將Widget從“插入”面板拖放到Web項(xiàng)目以制作進(jìn)度條、滑塊、菜單和其他有用的組件。
(5)從PSD中提取資源和CSS
用戶可以復(fù)制PSD復(fù)合元素中的所有或特定CSS屬性,并直接將這些樣式粘貼到CSS設(shè)計(jì)器、實(shí)時(shí)視圖的元素顯示中,或直接粘貼到用戶的代碼(CSS源或HTML文檔)中,然后在PSD復(fù)合中選擇的元素的CSS屬性會自動填充到代碼提示。如果希望使用編碼,則可以使用這些代碼提示將CSS屬性提取到代碼中。Extract提供了完整獨(dú)立的解決方案,可供從PSD復(fù)合中提取樣式信息和資源,無須頻繁地在Photoshop和DreamweaverCC之間來回切換。
(6)使用Typekit設(shè)計(jì)高品質(zhì)字體
在網(wǎng)頁中能夠使用的默認(rèn)字體并不多,如果需要使用特殊的字體效果,通常都是將特殊文字制作成圖片的形式。在DreamweaverCC中新增了EdgeWebFonts的功能,在網(wǎng)頁中可以加載Adobe提供的EdgeWeb字體,從而在網(wǎng)頁中實(shí)現(xiàn)特殊字體效果。執(zhí)行“修改”>“管理字體”命令,在彈出的“管理字體”對話框中選擇AdobeEdgeWebFonts選項(xiàng)卡,即可使用Adobe提供的EdgeWeb字體。
(7)新增EdgeAnimate插入動畫
在全新的DreamweaverCC中可以插入AdobeEdgeAnimate動畫(OAM文件),默認(rèn)情況下,用戶在DreamweaverCC中插入AdobeEdgeAnimate動畫后,會自動在當(dāng)前站點(diǎn)的根目錄中生成一個名為edgeanimate_assets的文件夾,將AdobeEdgeAnimate動畫的提取內(nèi)容放入該文件夾中。如果需要在DreamweaverCC中插入AdobeEdgeAnimate動畫,可以單擊“插入”面板“媒體”選項(xiàng)卡中的“EdgeAnimate作品”按鈕。
(8)在Behance上分享作品
用戶可以在Behance上分享項(xiàng)目,并得到來自世界各地的即時(shí)反饋。
(9)使用CreativeCloud存儲作品
用戶可以通過CreativeCloud隨時(shí)隨地保存并訪問自己的作品,也可以使用AdobeCreativeCloud,檢查并安裝DreamweaverCC擴(kuò)展功能。
1.2DreamweaverCC的工作界面
DreamweaverCC的工作界面主要由菜單欄、自定義快捷鍵、工具欄、文檔窗口、屬性面板、面板組、文檔狀態(tài)欄等構(gòu)成,如圖1-1所示。
圖1-1
1.2.1菜單欄
菜單欄包括“文件”“編輯”“查看”“插入”“修改”“格式”“命令”“站點(diǎn)”“窗口”和“幫助”10個菜單,如圖1-2所示。菜單欄上的每個菜單選項(xiàng)下面都有多個子菜單,每一個菜單命令都可以進(jìn)行一些相關(guān)的命令執(zhí)行或?qū)傩缘脑O(shè)置。
圖1-2
1.2.2工具欄
工具欄中包含一些按鈕,用來在“代碼”視圖、“拆分”視圖以及“設(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)容與用戶在瀏覽器中預(yù)覽的效果一樣。
●“在瀏覽器中預(yù)覽/調(diào)試”按鈕為,可根據(jù)用戶需求,在用戶選擇的瀏覽器中進(jìn)行預(yù)覽或調(diào)試文檔。
●“標(biāo)題文本框”圖標(biāo)為,用于為文檔輸入一個標(biāo)題,該標(biāo)題將顯示在瀏覽器的標(biāo)題欄中。如果文檔已有標(biāo)題,則該標(biāo)題將顯示于該區(qū)域中。
●“文件管理”按鈕為,用于對文件進(jìn)行管理,如對文件進(jìn)行獲取、取出、上傳、存回等操作。
1.2.3文檔窗口
文檔窗口用于顯示當(dāng)前的文檔,包括“設(shè)計(jì)”視圖、“代碼”視圖、“拆分”視圖、“實(shí)時(shí)視圖”。
●“設(shè)計(jì)”視圖:是一個用于可視化頁面布局、可視化編輯以及快速進(jìn)行應(yīng)用程序開發(fā)的設(shè)計(jì)環(huán)境。在該視圖中,DreamweaverCC顯示文檔的完全可編輯的可視化表示形式,類似于在瀏覽器中查看頁面時(shí)看到的內(nèi)容。用戶可以配置“設(shè)計(jì)”視圖,以在處理文檔時(shí)顯示動態(tài)內(nèi)容。
●“代碼”視圖:一個用于編寫和編輯HTML、JavaScript、服務(wù)器語言代碼以及任何其他類型代碼的手工編碼環(huán)境。
●“拆分”視圖:該視圖使用戶可以在一個窗口中同時(shí)看到同一文檔的“代碼”視圖和“設(shè)計(jì)”視圖。
●實(shí)時(shí)視圖:該視圖使用戶可以直接在文檔窗口預(yù)覽設(shè)計(jì)效果。
1.2.4“屬性”面板
“屬性”面板主要用于查看和更改所選對象的各種屬性,每種對象都具有不同的屬性。在“屬性”面板中包括兩種選項(xiàng),一種是“HTML”選項(xiàng),將默認(rèn)顯示文本的格式、樣式和對齊方式等屬性。另一種是“CSS”選項(xiàng),單擊屬性面板中的“CSS”選項(xiàng),可以在“CSS”選項(xiàng)中設(shè)置各種屬性。“屬性”面板顯示當(dāng)前選定的對象或文本的屬性,也可以在這里直接修改屬性。如圖1-4所示。
圖1-4
1.2.5面板組
DreamweaverCC中的面板可以自由組合成面板組。每個面板組都可以展開和折疊,并且可以和其他面板組?吭谝黄鸹蛉∠?。面板組還可以?康郊傻膽(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)整文檔窗口的大小,使其達(dá)到預(yù)定義或自定義的尺寸。
1.3自定義工作區(qū)
DreamweaverCC包括兩個主要的工作區(qū),用于適應(yīng)多種不同的計(jì)算機(jī)配置和各種工作流程。用戶可以根據(jù)自己的喜好,調(diào)整DreamweaverCC中的編碼環(huán)境,使之適合自己的習(xí)慣。如果任何預(yù)設(shè)的工作區(qū)都不能完全滿足用戶需要,則可以自定義工作區(qū)。
1.3.1瀏覽工作區(qū)
DreamweaverCC是行業(yè)領(lǐng)先的HTML編輯器,其功能十分強(qiáng)大。不論是編碼人員、開發(fā)的人員還是設(shè)計(jì)人員,都可以根據(jù)自己的喜好來自定義工作區(qū),使其滿足自己的需求。DreamweaverCC中用戶可配置的面板和工具箱如圖1-7所示。
推薦閱讀
IT圖書:《中公版·UI設(shè)計(jì)師養(yǎng)成記:零基礎(chǔ)學(xué)Illustrator》精彩書摘
IT圖書:《中公版·網(wǎng)絡(luò)營銷實(shí)戰(zhàn)派:零基礎(chǔ)學(xué)SEO/SEM》精彩書摘
IT圖書:《中公版·UI設(shè)計(jì)師養(yǎng)成記:零基礎(chǔ)學(xué)Photoshop》精彩書摘
IT圖書:《中公版·網(wǎng)絡(luò)營銷實(shí)戰(zhàn)派:玩轉(zhuǎn)新媒體營銷》精彩書摘
這篇關(guān)于“IT圖書:《中公版·實(shí)用Web前端開發(fā):零基礎(chǔ)學(xué)Dreamweaver》精彩書摘” 已幫助112人,希望也能幫到你!
>>本文地址://www.yceu.cn/jiaoxue/2020/57428.html