本書介紹了初學(xué)者學(xué)習(xí)Dreamweaver CC必須掌握的基礎(chǔ)知識(shí)和操作技巧, 具體內(nèi)容包括網(wǎng)頁(yè)制作基礎(chǔ)知識(shí)、創(chuàng)建與管理站點(diǎn)、使用圖像與多媒體豐富網(wǎng)頁(yè)內(nèi)容、超級(jí)鏈接的應(yīng)用、使用表格布局頁(yè)面、應(yīng)用CSS樣式美化網(wǎng)頁(yè)、使用AP Div元素布局頁(yè)面、使用框架布局網(wǎng)頁(yè)、利用模板和庫(kù)創(chuàng)建網(wǎng)頁(yè)、使用JavaScript行為創(chuàng)建動(dòng)態(tài)效果和站點(diǎn)的發(fā)布與推廣等具體操作。
文杰書院，是一支專職并專業(yè)化的圖書撰稿團(tuán)隊(duì)，擁有一支高水平的作者隊(duì)伍，自成立以來(lái)，力爭(zhēng)成為圖書出版領(lǐng)域的一個(gè)知名工作室，先后成功與清華大學(xué)出版社等多家出版媒體合作編著出版圖書200多個(gè)品種。
目錄
第1章 網(wǎng)頁(yè)制作基礎(chǔ)入門 1
1.1 認(rèn)識(shí)網(wǎng)頁(yè) 2
1.2 網(wǎng)站制作的基本流程 7
1.3 網(wǎng)頁(yè)制作常用軟件 9
1.4 專題課堂——網(wǎng)頁(yè)色彩 11
1.5 實(shí)踐經(jīng)驗(yàn)與技巧 15
1.6 有問(wèn)必答 16
第2章 Dreamweaver CC基礎(chǔ)知識(shí) 17
2.1 認(rèn)識(shí)工作界面 18
2.2 Dreamweaver的工作流程 23
2.3 專題課堂——可視化助理 24
2.4 實(shí)踐經(jīng)驗(yàn)與技巧 26
2.5 有問(wèn)必答 30
第3章 創(chuàng)建與管理站點(diǎn) 31
3.1 站點(diǎn)及站點(diǎn)結(jié)構(gòu) 32
3.2 創(chuàng)建本地站點(diǎn) 34
3.3 管理站點(diǎn) 36
3.4 專題課堂——管理站點(diǎn)文件 37
3.5 實(shí)踐經(jīng)驗(yàn)與技巧 39
3.6 有問(wèn)必答 42
第4章 編輯網(wǎng)頁(yè)文本 43
4.1 文本的基本操作 44
4.2 插入特殊文本對(duì)象 48
4.3 設(shè)置項(xiàng)目列表 51
4.4 專題課堂——頁(yè)面的頭信息 53
4.5 實(shí)踐經(jīng)驗(yàn)與技巧 57
4.6 有問(wèn)必答 61
第5章 在網(wǎng)頁(yè)中應(yīng)用圖像與多媒體 63
5.1 常用的圖像格式 64
5.2 插入與設(shè)置圖像 65
5.3 多媒體在網(wǎng)頁(yè)中的應(yīng)用 69
5.4 專題課堂——插入其他圖像 74
5.5 實(shí)踐經(jīng)驗(yàn)與技巧 76
5.6 有問(wèn)必答 81
第6章 超鏈接 83
6.1 超鏈接概述 84
6.2 鏈接路徑 86
6.3 創(chuàng)建超鏈接 87
6.4 創(chuàng)建不同種類的超鏈接 89
6.5 專題課堂——管理與設(shè)置超鏈接 93
6.6 實(shí)踐經(jīng)驗(yàn)與技巧 96
6.7 有問(wèn)必答 98
第7章 使用表格布局頁(yè)面 99
7.1 表格的創(chuàng)建與應(yīng)用 100
7.2 設(shè)置表格和單元格屬性 103
7.3 調(diào)整表格結(jié)構(gòu) 105
7.4 處理表格數(shù)據(jù) 113
7.5 專題課堂——數(shù)據(jù)表格樣式 115
7.6 實(shí)踐經(jīng)驗(yàn)與技巧 117
7.7 有問(wèn)必答 120
第8章 應(yīng)用CSS樣式美化網(wǎng)頁(yè) 123
8.1 什么是CSS樣式表 124
8.2 使用【CSS設(shè)計(jì)器】面板 126
8.3 CSS選擇器的類型 130
8.4 專題課堂——設(shè)置CSS樣式 132
8.5 實(shí)踐經(jīng)驗(yàn)與技巧 138
8.6 有問(wèn)必答 140
第9章 應(yīng)用Div+CSS布局網(wǎng)頁(yè) 141
9.1 Div概述 142
9.2 常見的布局方式 144
9.3 應(yīng)用Div布局網(wǎng)頁(yè) 148
9.4 專題課堂——寬度自適應(yīng) 151
9.5 實(shí)踐經(jīng)驗(yàn)與技巧 154
9.6 有問(wèn)必答 155
第10章 使用模板和庫(kù)創(chuàng)建網(wǎng)頁(yè) 157
10.1 使用模板 158
10.2 設(shè)置模板 160
10.3 管理模板 163
10.4 專題課堂——?jiǎng)?chuàng)建與應(yīng)用庫(kù)項(xiàng)目 165
10.5 實(shí)踐經(jīng)驗(yàn)與技巧 169
10.6 有問(wèn)必答 171
第11章 使用表單 173
11.1 表單概述 174
11.2 添加表單 178
11.3 網(wǎng)頁(yè)元素 181
11.4 日期與時(shí)間元素 185
11.5 選擇元素 189
11.6 專題課堂——按鈕元素 193
11.7 實(shí)踐經(jīng)驗(yàn)與技巧 197
11.8 有問(wèn)必答 200
第12章 使用行為創(chuàng)建動(dòng)態(tài)效果 201
12.1 認(rèn)識(shí)網(wǎng)頁(yè)行為 202
12.2 使用行為調(diào)節(jié)瀏覽器 205
12.3 使用行為控制圖像 208
12.4 使用行為顯示文本 210
12.5 使用行為加載多媒體 214
12.6 專題課堂——控制表單 219
12.7 實(shí)踐經(jīng)驗(yàn)與技巧 223
12.8 有問(wèn)必答 225
第13章 制作jQuery Mobile頁(yè)面 227
13.1 jQuery與jQuery Mobile概述 228
13.2 創(chuàng)建jQuery Mobile頁(yè)面 229
13.3 使用jQuery Mobile組件 232
13.4 專題課堂——列表 238
13.5 實(shí)踐經(jīng)驗(yàn)與技巧 239
13.6 有問(wèn)必答 242
第14章 站點(diǎn)的發(fā)布與推廣 243
14.1 測(cè)試與維護(hù)站點(diǎn) 244
14.2 上傳與發(fā)布網(wǎng)站 247
14.3 網(wǎng)站運(yùn)營(yíng)與維護(hù) 249
14.4 專題課堂——網(wǎng)站推廣 252
14.5 實(shí)踐經(jīng)驗(yàn)與技巧 256
14.6 有問(wèn)必答 258
第5章 在網(wǎng)頁(yè)中應(yīng)用圖像與多媒體
本章要點(diǎn)
常用的圖像格式
插入與設(shè)置圖像
多媒體在網(wǎng)頁(yè)中的應(yīng)用
專題課堂——插入其他圖像
本章主要內(nèi)容
本章主要介紹常用的圖像格式、插入與設(shè)置圖像、多媒體在網(wǎng)頁(yè)中的應(yīng)用等方面的知識(shí)與技巧，在本章的最后還針對(duì)實(shí)際的工作需求，講解了插入HTML5 Video、插入HTML5 Audio、插入Edge Animate作品和插入Flash Video的方法。通過(guò)本章的學(xué)習(xí)，讀者可以掌握在網(wǎng)頁(yè)中應(yīng)用圖像與多媒體方面的知識(shí)，為深入學(xué)習(xí)Dreamweaver CC知識(shí)奠定基礎(chǔ)。
5.1 常用的圖像格式
導(dǎo)讀
網(wǎng)頁(yè)中的圖像常用格式通常有3種，即JPGE格式、GIF格式和PNG格式，其中使用最廣泛的是GIF格式和JPEG格式。本節(jié)將詳細(xì)介紹網(wǎng)頁(yè)中常見的圖像格式方面的知識(shí)。
5.1.1 JPEG格式圖像
JPG/JPEG(Joint Photographic Experts Group)可譯為“聯(lián)合圖像專家組” ，是一種壓縮格式的圖像。JPEG文件通過(guò)壓縮，使其在圖像品質(zhì)和文件大小之間達(dá)到較好的平衡，損失了原圖像中不易為人眼察覺的內(nèi)容，獲得較小文件尺寸，使圖像下載快捷。
JPG/JPEG支持24位真彩色，普遍用于顯示攝影圖片和其他連續(xù)色調(diào)圖像的高級(jí)格式。若對(duì)圖像顏色要求較高，應(yīng)采用這種類型的圖像。目前各類瀏覽器均支持JPEG圖像格式。
5.1.2 GIF格式圖像
GIF(Graphics Interchange Format)可譯為“圖像交換格式”，是一種無(wú)損壓縮格式的圖像。它可以使文件大小最小化，支持動(dòng)畫格式，能在一個(gè)圖像文件中包含多幀圖像頁(yè)，在瀏覽器中瀏覽時(shí)可看到動(dòng)感圖像效果。網(wǎng)絡(luò)上小一點(diǎn)的動(dòng)畫一般都是GIF格式的圖像。
GIF只支持8位顏色(256種色)，不能用于存儲(chǔ)真彩色的圖像文件，適合大面積單一顏色的圖像，如導(dǎo)航條、按鈕、圖標(biāo)等。其壓縮率一般在50％左右，它不屬于任何應(yīng)用程序。在通常情況下，GIF圖像的壓縮算法是有版權(quán)的。
5.1.3 PNG格式圖像
PNG(Portable Network Graphic)可譯為“便攜網(wǎng)絡(luò)圖像”，是一種格式非常靈活的圖像，用于在因特網(wǎng)上無(wú)損壓縮和顯示圖像，F(xiàn)ireworks制作的圖像默認(rèn)為PNG格式。PNG文件可以保留所有的原始圖層、矢量、顏色和效果信息，并且在任何時(shí)候都可以完全編輯所有元素(文件必須具有.png擴(kuò)展名才能被Dreamweaver CC識(shí)別為PNG文件)。
PNG圖像支持多種顏色數(shù)目，從8位、16位、24位到32位都有。PNG格式圖像可替代GIF格式，支持索引色、灰度、真彩色圖像及透明背景。商業(yè)網(wǎng)站使用PNG格式的圖像比較安全，因?yàn)闆](méi)有版權(quán)問(wèn)題。
5.2 插入與設(shè)置圖像
導(dǎo)讀
圖像是網(wǎng)頁(yè)中不可缺少的元素之一，為了使網(wǎng)頁(yè)內(nèi)容更加豐富，方便瀏覽者的瀏覽，可以將圖像插入到網(wǎng)頁(yè)中，并進(jìn)行相應(yīng)的設(shè)置。本節(jié)將介紹插入與設(shè)置圖像方面的知識(shí)。
5.2.1 在網(wǎng)頁(yè)中插入圖像文件
要在Dreamweaver CC文檔中插入圖像，必須位于當(dāng)前站點(diǎn)文件夾內(nèi)或遠(yuǎn)程站點(diǎn)文件夾內(nèi)，否則圖像不能正確顯示。所以在建立站點(diǎn)時(shí)，設(shè)計(jì)者常先創(chuàng)建一個(gè)名叫image的文件夾，并將需要的文件復(fù)制到其中，然后再?gòu)倪@個(gè)文件夾中選擇圖片，向網(wǎng)頁(yè)插入圖像。下面將詳細(xì)介紹在網(wǎng)頁(yè)中插入圖像的操作方法。
操作步驟
第1步 將鼠標(biāo)指針置于準(zhǔn)備插入圖像的位置，1. 單擊【插入】主菜單，2. 在彈出的菜單中選擇【圖像】菜單項(xiàng)，3. 在彈出的子菜單中選擇【圖像】菜單項(xiàng)，如圖5-1所示。
圖5-1
通過(guò)以上步驟即可完成插入圖像的操作，如圖5-3所示。
圖5-3
第2步 彈出【選擇圖像源文件】對(duì)話框，1.選擇準(zhǔn)備插入的圖像，2. 單擊【確定】按鈕即可，如圖5-2所示。
圖5-2
5.2.2 設(shè)置網(wǎng)頁(yè)背景圖
背景圖像是網(wǎng)頁(yè)中的另外一種圖像方式，該方式的圖像既不影響文件輸入，也不影響插入式圖像的顯示。下面詳細(xì)介紹設(shè)置網(wǎng)頁(yè)背景圖的操作方法。
操作步驟
第1步 將鼠標(biāo)指針定位在網(wǎng)頁(yè)中，單擊【屬性】面板中的【頁(yè)面屬性】按鈕，如圖5-4所示。
圖5-4
第2步 打開【頁(yè)面屬性】對(duì)話框，1. 在【分類】列表框中選擇【外觀(CSS)】選項(xiàng)，2. 單擊右側(cè)【背景圖像】后面的【瀏覽】按鈕，如圖5-5所示。
圖5-5
第3步 彈出【選擇圖像源文件】對(duì)話框，1. 選中準(zhǔn)備設(shè)置為背景的圖片，2. 單擊【確定】按鈕，如圖5-6所示。
圖5-6
第4步 返回到【頁(yè)面屬性】對(duì)話框中，單擊【確定】按鈕，如圖5-7所示。
圖5-7
第5步 通過(guò)以上步驟即可完成設(shè)置網(wǎng)頁(yè)背景圖的操作，如圖5-8所示。
圖5-8
指點(diǎn)迷津
在【頁(yè)面屬性】對(duì)話框中，除了可以設(shè)置背景圖像外，還可以設(shè)置背景顏色、文本顏色、頁(yè)面字體等屬性。
書單推薦
