《中文版Dreamweaver+Flash+Photoshop CC網(wǎng)頁(yè)設(shè)計(jì)與制作從入門(mén)到精通(全彩版)》以目前新的CC版本為例,結(jié)合這3個(gè)軟件在網(wǎng)頁(yè)中的應(yīng)用進(jìn)行講解。全書(shū)共24章,主要包括網(wǎng)頁(yè)基礎(chǔ)知識(shí)、Dreamweaver CC的基本操作、美化網(wǎng)頁(yè)、頁(yè)面布局、表單和行為的應(yīng)用、模板和庫(kù)、移動(dòng)設(shè)備網(wǎng)頁(yè)和應(yīng)用程序的創(chuàng)建、動(dòng)態(tài)網(wǎng)站及網(wǎng)站維護(hù)、Flash CC基本操作、繪制與編輯圖形、文本與對(duì)象的編輯、元件與庫(kù)的使用、動(dòng)畫(huà)和ActionScript、Photoshop CC基本操作、圖層和文本編輯、圖形繪制和調(diào)色、圖像優(yōu)化與輸出等內(nèi)容。
本書(shū)知識(shí)講解由淺入深,將所有內(nèi)容有效地分布在入門(mén)篇、實(shí)戰(zhàn)篇和精通篇中,書(shū)中包括了大量的實(shí)例操作及知識(shí)解析,配合光盤(pán)的視頻演示,讓學(xué)習(xí)變得輕松易學(xué)。
本書(shū)適合廣大網(wǎng)頁(yè)制作初學(xué)者,以及有一定網(wǎng)頁(yè)制作經(jīng)驗(yàn)的讀者,可作為高等院校相關(guān)專(zhuān)業(yè)的學(xué)生和培訓(xùn)機(jī)構(gòu)學(xué)員的參考用書(shū),同時(shí)也可供讀者自學(xué)使用。
中文版 Dreamweaver+Flash+Photoshop CC網(wǎng)頁(yè)設(shè)計(jì)與制作 從入門(mén)到精通(全彩版)
認(rèn)識(shí)Dreamweaver+Flash+Photoshop CC
Dreamweaver是目前制作網(wǎng)頁(yè)最簡(jiǎn)單、最方便的軟件之一,可以將用戶構(gòu)思的網(wǎng)頁(yè)內(nèi)容全部呈現(xiàn)出來(lái);Flash用來(lái)制作動(dòng)畫(huà),可以讓靜止不動(dòng)的畫(huà)面變得絢麗動(dòng)感;Photoshop用來(lái)進(jìn)行圖像的設(shè)計(jì)與處理,可以在其中直接制作網(wǎng)頁(yè)的平面結(jié)構(gòu)圖并將其輸出為Dreamweaver可以識(shí)別的格式。隨著科技的發(fā)展,這些軟件也在不停地更新,Dreamweaver CC、Flash CC和Photoshop CC是目前最新的版本,軟件功能更加強(qiáng)大,操作更加便捷,能夠制作出更加符合用戶需要的網(wǎng)頁(yè)。
本書(shū)的內(nèi)容和特點(diǎn)
本書(shū)將網(wǎng)頁(yè)設(shè)計(jì)和制作用到的相關(guān)知識(shí)合理分布到“入門(mén)篇”、“實(shí)戰(zhàn)篇”和“精通篇”中,各篇的內(nèi)容安排及結(jié)構(gòu)設(shè)計(jì)只考慮讀者的需要,所以最終您會(huì)發(fā)現(xiàn)本書(shū)的特點(diǎn)極其樸實(shí),那就是實(shí)用。
{ 入門(mén)篇 }
入門(mén)篇中講解了使用Dreamweaver、Flash和Photoshop進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)與制作相關(guān)的所有基礎(chǔ)知識(shí),包含網(wǎng)頁(yè)和Dreamweaver CC的基礎(chǔ)知識(shí)、美化與布局網(wǎng)頁(yè)、表單和行為的應(yīng)用、移動(dòng)設(shè)備網(wǎng)頁(yè)和應(yīng)用程序的創(chuàng)建、動(dòng)態(tài)網(wǎng)站和網(wǎng)站維護(hù)、Flash CC基本操作、繪制與編輯圖形、文本與對(duì)象的編輯、元件與庫(kù)的使用、動(dòng)畫(huà)和ActionScript、Photoshop CC基本操作、圖層和文本編輯、圖形繪制和調(diào)色、圖像優(yōu)化與輸出等內(nèi)容。通過(guò)本篇內(nèi)容的學(xué)習(xí),可讓讀者對(duì)這3個(gè)軟件的功能有一個(gè)整體認(rèn)識(shí),并可制作出具有簡(jiǎn)單功能的網(wǎng)頁(yè)。
為幫助讀者更好地學(xué)習(xí),本篇知識(shí)講解靈活,或以正文描述,或以實(shí)例操作,或以項(xiàng)目列舉,并穿插了“操作解謎”、“技巧秒殺”和“答疑解惑”等小欄目,不僅豐富了版面,還使知識(shí)更加全面。
知識(shí)解析:將理論知識(shí)細(xì)分,逐個(gè)講解
技巧秒殺:匯集了與當(dāng)前相關(guān)的一些操作技巧
操作解謎:講解相關(guān)操作的意義,使讀者不僅知其然,而且知其所以然
實(shí)例操作: 以步驟形式一步步講解知識(shí)的
答疑解惑:對(duì)初學(xué)者最易感到疑惑的問(wèn)題進(jìn)行解答
{ 實(shí)戰(zhàn)篇 }
實(shí)戰(zhàn)篇是入門(mén)篇知識(shí)的靈活運(yùn)用,將Dreamweaver、Flash和Photoshop這3個(gè)軟件結(jié)合起來(lái),以網(wǎng)頁(yè)制作的一般模式為基礎(chǔ),介紹并實(shí)際制作完整的網(wǎng)頁(yè)。實(shí)戰(zhàn)篇分為4章,每章均為一個(gè)實(shí)戰(zhàn)主題,每個(gè)主題下又包含多個(gè)實(shí)例,從而立體地將這3個(gè)軟件與網(wǎng)頁(yè)制作結(jié)合起來(lái)。有需要的讀者只需稍加修改即可將這些例子應(yīng)用到現(xiàn)實(shí)工作中。實(shí)戰(zhàn)篇中的實(shí)例多樣,配以“操作解謎”和“還可以這樣做”等小欄目,使讀者不僅可以知道所講解知識(shí)的操作方法,更能明白操作的含義,以及該效果的多種實(shí)現(xiàn)方式,使讀者的技術(shù)水平得到提升,能夠綜合應(yīng)用。
{ 精通篇 }
精通篇中匯合了網(wǎng)頁(yè)制作的高級(jí)操作技巧,如JavaScript代碼、畫(huà)布的應(yīng)用、CSS的高級(jí)使用技巧、網(wǎng)頁(yè)色彩搭配、網(wǎng)頁(yè)文字搭配、網(wǎng)頁(yè)排版方式和網(wǎng)頁(yè)構(gòu)圖等,從而讓讀者更加全面地感受到網(wǎng)頁(yè)制作的技巧,并能加以靈活運(yùn)用,提高后期網(wǎng)頁(yè)制作的能力。
本書(shū)的配套光盤(pán)
本書(shū)配套多媒體光盤(pán),書(shū)盤(pán)結(jié)合,使學(xué)習(xí)更加容易。配套光盤(pán)中包括如下內(nèi)容。
視頻演示:本書(shū)所有的實(shí)例操作均在光盤(pán)中提供了視頻演示,并在書(shū)中指出了相對(duì)應(yīng)的路徑和視頻文件名稱(chēng),打開(kāi)視頻文件即可學(xué)習(xí)。
交互式練習(xí):配套光盤(pán)中提供了交互式練習(xí)功能,光盤(pán)不僅可以“看”,還可以實(shí)時(shí)操作,查看自己的學(xué)習(xí)成果。
超值設(shè)計(jì)素材:配套光盤(pán)中不僅提供了本書(shū)實(shí)例需要的素材、效果,還附送了多種類(lèi)型的筆刷、圖案、樣式等庫(kù)文件,以及經(jīng)常使用的設(shè)計(jì)素材。
為了更好地使用光盤(pán)中的內(nèi)容,保證光盤(pán)內(nèi)容不丟失,讀者最好將光盤(pán)中的內(nèi)容復(fù)制到硬盤(pán)中,然后從硬盤(pán)中運(yùn)行。
本書(shū)的作者和服務(wù)
本書(shū)由九州書(shū)源組織編寫(xiě),參加本書(shū)編寫(xiě)、排版和校對(duì)的工作人員有廖宵、向萍、彭小霞、何曉琴、李星、劉霞、陳曉穎、蔡雪梅、羅勤、包金鳳、張良軍、曾福全、徐林濤、賀麗娟、簡(jiǎn)超、張良瑜、朱非、張娟、楊強(qiáng)、王君、付琦、羊清忠、王春蓉、叢威、任亞炫、周洪熙、馮紹柏、楊怡、張麗麗、李洪、林科炯、廖彬宇。
由于編者水平有限,書(shū)中的疏漏和不足之處在所難免,請(qǐng)各位讀者朋友們不吝賜教。
中文版 Dreamweaver+Flash+Photoshop CC網(wǎng)頁(yè)設(shè)計(jì)與制作 從入門(mén)到精通(全彩版)
入門(mén)篇
Chapter 01 初識(shí)網(wǎng)頁(yè)制作..........................2
1.1 網(wǎng)頁(yè)基礎(chǔ)...........................................................3
1.1.1 網(wǎng)站和網(wǎng)頁(yè)的關(guān)系 ................................................3
1.1.2 網(wǎng)頁(yè)的構(gòu)成要素 ....................................................3
1.1.3 網(wǎng)頁(yè)的分類(lèi) ............................................................4
1.1.4 屏幕分辨率和網(wǎng)頁(yè)編輯器 ....................................4
1.2 制作網(wǎng)站的基本流程.........................................5
1.2.1 網(wǎng)站策劃 ................................................................5
1.2.2 制作網(wǎng)站的準(zhǔn)備工作 ............................................6
1.2.3 制作及上傳網(wǎng)站 ....................................................7
1.2.4 網(wǎng)站的更新與維護(hù) ................................................7
1.3 了解Dreamweaver CC .....................................7
1.3.1 Dreamweaver CC簡(jiǎn)介 ............................................7
1.3.2 Dreamweaver CC新增功能 ....................................7
1.3.3 啟動(dòng)Dreamweaver CC ............................................9
1.3.4 退出Dreamweaver CC ..........................................10
1.3.5 Dreamweaver CC視圖模式 ..................................10
1.3.6 代碼工具欄 ..........................................................12
1.4 Dreamweaver CC的工作界面 ........................12
1.4.1 菜單欄 ..................................................................13
1.4.2 文檔窗口 ..............................................................15
1.4.3 面板組 ..................................................................15
1.4.4 “屬性”面板 ......................................................16
1.4.5 Dreamweaver CC的環(huán)境設(shè)置 ..............................16
1.4.6 標(biāo)尺、網(wǎng)格和輔助線的使用 ..............................18
1.5 制作網(wǎng)頁(yè)的常用軟件和語(yǔ)言 ............................18
1.5.1 網(wǎng)頁(yè)設(shè)計(jì)的常用軟件 ..........................................19
1.5.2 制作網(wǎng)頁(yè)的核心語(yǔ)言 ..........................................19
知識(shí)大爆炸——認(rèn)識(shí)Dreamweaver的過(guò)去及安裝要求 ..................22
Chapter 02 快速掌握Dreamweaver CC .................24
2.1 創(chuàng)建與管理站點(diǎn) ..............................................25
2.1.1 創(chuàng)建本地站點(diǎn) ......................................................25
※ 實(shí)例操作:創(chuàng)建裝飾網(wǎng)站點(diǎn)....................................25
2.1.2 “管理站點(diǎn)”對(duì)話框 ..........................................26
2.1.3 管理站點(diǎn) ..............................................................27
※ 實(shí)例操作:導(dǎo)出裝飾網(wǎng)站點(diǎn)....................................27
※ 實(shí)例操作:導(dǎo)入食品網(wǎng)站點(diǎn)....................................27
※ 實(shí)例操作:編輯食品網(wǎng)站點(diǎn)....................................28
※ 實(shí)例操作:復(fù)制和刪除美食天下站點(diǎn)....................29
2.1.4 站點(diǎn)的結(jié)構(gòu)規(guī)劃 ..................................................30
※ 實(shí)例操作:創(chuàng)建文件夾及文件................................30
2.2 創(chuàng)建與編輯網(wǎng)頁(yè) ..............................................31
2.2.1 創(chuàng)建網(wǎng)頁(yè) ..............................................................31
※ 實(shí)例操作:新建一個(gè)空白網(wǎng)頁(yè)................................31
※ 實(shí)例操作:創(chuàng)建jQuery Mobile網(wǎng)頁(yè) ........................33
2.2.2 打開(kāi)與關(guān)閉網(wǎng)頁(yè) ..................................................34
2.2.3 保存網(wǎng)頁(yè) ..............................................................35
2.3 在網(wǎng)頁(yè)中添加文字內(nèi)容 ...................................35
2.3.1 輸入文字 ..............................................................35
※ 實(shí)例操作:復(fù)制文字................................................36
2.3.2 添加空格、換行與分段 ......................................37
2.3.3 使用日期和水平線 ..............................................37
2.3.4 插入列表 ..............................................................39
2.3.5 設(shè)置文本屬性 ......................................................39
※ 實(shí)例操作:設(shè)置文本屬性........................................40
2.4 添加圖像豐富網(wǎng)頁(yè) ..........................................41
2.4.1 常用的圖像類(lèi)型 ..................................................42
2.4.2 在網(wǎng)頁(yè)中插入圖像 ..............................................42
※ 實(shí)例操作:插入圖像................................................42
2.4.3 設(shè)置圖像屬性 ......................................................43
2.4.4 插入鼠標(biāo)經(jīng)過(guò)圖像 ..............................................45
※ 實(shí)例操作:設(shè)置鼠標(biāo)經(jīng)過(guò)時(shí)變換的圖像................45
2.4.5 插入Fireworks HTML ..........................................46
2.5 為網(wǎng)頁(yè)添加多媒體文件 ...................................47
2.5.1 使用Edge Animate作品 ........................................47
※ 實(shí)例操作:插入Edge Animate動(dòng)畫(huà) .........................47
2.5.2 使用HTML5 Video文件 .......................................48
※ 實(shí)例操作:設(shè)置HTML5 Video的屬性 ....................49
2.5.3 HTML5 Audio的應(yīng)用 ..........................................50
2.5.4 使用Flash SWF文件 .............................................51
※ 實(shí)例操作:插入Flash并設(shè)置屬性 ...........................51
2.5.5 插入并設(shè)置Flash Video .......................................53
※ 實(shí)例操作:插入并設(shè)置Flash Video屬性 ................53
2.5.6 使用插件 ..............................................................54
2.6 超鏈接的應(yīng)用 .................................................55
2.6.1 認(rèn)識(shí)超鏈接和路徑 ..............................................56
2.6.2 創(chuàng)建常見(jiàn)的超鏈接 ..............................................56
知識(shí)大爆炸——HTML的簡(jiǎn)單應(yīng)用以及SEO
優(yōu)化網(wǎng)頁(yè)圖像的技巧 ...................59
Chapter 03 使用CSS 樣式美化網(wǎng)頁(yè) .......62
3.1 認(rèn)識(shí)和應(yīng)用CSS樣式 ......................................63
3.1.1 CSS概述 ...............................................................63
3.1.2 CSS樣式表的基本語(yǔ)法 .......................................64
3.1.3 認(rèn)識(shí)CSS設(shè)計(jì)器 ...................................................64
3.1.4 創(chuàng)建樣式表 ..........................................................65
※ 實(shí)例操作:創(chuàng)建內(nèi)部樣式........................................65
※ 實(shí)例操作:創(chuàng)建并鏈接外部樣式表........................67
3.2 使用豐富的CSS樣式 ......................................68
3.2.1 CSS的布局屬性 ...................................................68
3.2.2 CSS的文本屬性 ...................................................69
3.2.3 CSS的邊框?qū)傩?...................................................70
3.2.4 CSS的背景屬性 ...................................................71
3.2.5 其他CSS屬性 .......................................................72
3.3 CSS過(guò)渡效果的應(yīng)用 ......................................73
3.3.1 新建CSS過(guò)渡效果 ...............................................73
※ 實(shí)例操作:新建CSS過(guò)渡效果 ................................73
3.3.2 編輯CSS過(guò)渡效果 ...............................................75
3.3.3 刪除CSS過(guò)渡效果 ...............................................75
知識(shí)大爆炸——CSS的特殊效果的應(yīng)用 ...............75
Chapter 04 頁(yè)面布局 ...............................78
4.1 使用表格布局 .................................................79
4.1.1 制作表格 ..............................................................79
※ 實(shí)例操作:制作表格................................................79
4.1.2 表格的基本操作 ..................................................80
4.1.3 表格和單元格的屬性 ..........................................82
4.1.4 表格的嵌套使用 ..................................................83
※ 實(shí)例操作:創(chuàng)建Wedding.html網(wǎng)頁(yè) .........................83
4.2 Div+CSS美化網(wǎng)頁(yè) ..........................................86
4.2.1 Div+CSS概述 .......................................................86
4.2.2 使用Div元素 ........................................................86
※ 實(shí)例操作:使用Accordion創(chuàng)建網(wǎng)頁(yè) .......................87
4.2.3 使用Div+CSS布局網(wǎng)頁(yè) .......................................91
※ 實(shí)例操作:使用Div+CSS創(chuàng)建網(wǎng)頁(yè) ........................91
4.3 框架布局.........................................................94
4.3.1 框架的簡(jiǎn)介