本書由從事Dreamweaver課程教學的優秀教師和兩位網頁設計制作經驗豐富的企業技術人員合作共同編寫而成。全書分為16章,第1~2章介紹了網頁、網站建設流程、HTML、網頁版式設計與色彩搭配等基礎知識;第3~14章系統地介紹了網頁設計制作軟件Dreamweaver CS6的功能和設計制作各類網頁的方法技巧;第15~16章以Div+CSS作為技術架構,分別介紹了網站前臺設計制作的綜合應用實例,綜合應用實例也可作為實訓周的實訓參考內容。
本書配有豐富的教學資源,書中重要知識要點和操作技能可以通過配套的微課進行學習。通過學習任務和“由簡到繁、由易到難、承前啟后”的階梯式系列案例,使讀者輕松地掌握設計制作各類網頁的方法和技能,并起到舉一反三的作用。本書內容組織形式新穎、學習任務明確、操作步驟講解詳盡、重點突出,非常符合高職高專學生的認知規律。
第1章 網頁設計與制作基礎1
1.1 學習任務:認識網頁1
1.1.1 什么是網頁1
1.1.2 網頁類型2
1.1.3 網頁基本元素3
1.1.4 網頁制作常用軟件和技術5
1.2 學習任務:認識網站7
1.2.1 什么是網站7
1.2.2 網址與域名7
1.2.3 網站建設的一般流程8
1.3 學習任務:HTML基礎知識11
1.3.1 HTML簡介11
1.3.2 HTML的基本語法與結構12
1.3.3 常用的HTML標簽14
1.3.4 HTML5.0標簽及屬性25
1.4 實訓28
1.4.1 實訓一 使用記事本編輯
簡單的網頁28
1.4.2 實訓二 制作滾動圖片
鏈接28
1.5 習題29
第2章 網頁版式設計與色彩搭配32
2.1 案例分析:不同風格網頁作品
欣賞與解析32
2.2 學習任務:網頁版式設計34
2.2.1 版式設計概述35
2.2.2 網頁版式的尺寸和構成
要素35
2.2.3 網頁的版式設計風格36
2.2.4 網頁版式設計原則38
2.2.5 網頁版式設計的視覺流程38
2.2.6 網頁版式設計的步驟38
2.3 學習任務:色彩的基本理論及
其視覺效果39
2.3.1 色彩的基本理論39
2.3.2 色彩的視覺效果40
2.4 學習任務:網頁中的色彩及配色41
2.4.1 網頁色彩42
2.4.2 網頁中色彩的作用42
2.4.3 網頁配色原理42
2.4.4 網頁配色技巧43
2.5 實訓44
2.5.1 實訓一 總結不同主題網站的版
式設計及配色44
2.5.2 實訓二 網頁配色練習44
2.5.3 實訓三 校友網首頁效果圖
設計45
2.6 習題46
第3章 Dreamweaver CS6入門47
3.1 學習任務:認識中文版
Dreamweaver CS647
3.1.1 Dreamweaver CS6的特點47
3.1.2 Dreamweaver CS6的新增
功能48
3.1.3 Dreamweaver CS6的安裝
與卸載49
3.2 學習任務:Dreamweaver CS6
工作區介紹51
3.2.1 啟動Dreamweaver CS651
3.2.2 Dreamweaver CS6工作區布局
介紹52
3.3 學習任務:規劃與創建站點57
3.3.1 站點概述57
3.3.2 規劃站點56
3.3.3 創建本地站點57
3.3.4 管理站點59
3.4 案例:創建歡迎光臨網頁60
3.4.1 創建網頁文檔60
3.4.2 設置頁面屬性62
3.4.3 保存網頁文檔66
3.4.4 預覽網頁文檔67
3.5 實訓:制作網上家園歡迎頁面68
3.6 習題69
第4章 CSS樣式基礎70
4.1 學習任務:CSS概述70
4.1.1 CSS的基本概念70
4.1.2 使用HTML和CSS格式
化網頁71
4.1.3 CSS樣式面板72
4.1.4 CSS基本語法73
4.1.5 CSS樣式表的引用74
4.2 學習任務:CSS樣式的創建與
屬性設置77
4.2.1 創建CSS樣式77
4.2.2 設置CSS屬性78
4.2.3 使用CSS樣式面板設置
CSS屬性85
4.3 學習任務:管理CSS樣式85
4.3.1 鏈接或導入外部CSS樣式86
4.3.2 查看CSS樣式87
4.3.3 編輯與刪除CSS樣式87
4.4 案例:使用CSS樣式美化網頁88
4.5 實訓91
4.5.1 實訓一 為網頁元素應用
CSS樣式91
4.5.2 實訓二 新浪新聞頭條91
4.6 習題92
第5章 網頁的文本和圖像94
5.1 案例1:設計唐詩賞析網頁94
5.1.1 在網頁中添加文本95
5.1.2 設置項目符號或編號97
5.1.3 插入特殊字符、水平線
和日期98
5.1.4 設置文本屬性100
5.1.5 使用CSS設置段落樣式103
5.2 學習任務:網頁圖像104
5.2.1 網頁中常用的圖像格式105
5.2.2 在網頁中添加圖像105
5.2.3 設置網頁圖像屬性106
5.2.4 用CSS設置網頁圖像
樣式107
5.2.5 用CSS設置網頁的背景
圖像109
5.2.6 插入圖像占位符和鼠標
經過圖像110
5.3 案例2:圖文混排——設計電影介紹
網站頁面112
5.4 實訓:設計暢銷書介紹網頁113
5.5 習題114
第6章 網頁超鏈接與導航116
6.1 案例1:設計制作過節樂網頁116
6.1.1 超鏈接概述117
6.1.2 創建各類超鏈接118
6.1.3 用CSS設置超鏈接樣式122
6.2 案例2:圖像地圖——設計國家地理
網站頁面123
6.3 學習任務:網頁導航設計125
6.3.1 網頁導航概述125
6.3.2 網頁導航分類126
6.3.3 網頁導航方向128
6.4 案例3:設計制作網頁導航129
6.5 實訓:設計制作點點星空
網站頁面131
6.6 習題132
第7章 使用表格布局網頁134
7.1 案例1:設計學生成績單134
7.1.1 創建表格135
7.1.2 設置表格屬性136
7.1.3 編輯表格137
7.1.4 使用CSS美化表格140
7.2 學習任務:表格標簽141
7.2.1 使用表格標簽制作網頁
表格141
7.2.2 在標簽選擇器中設置表格
的屬性142
7.3 案例2:使用表格布局圖書
資源網143
7.3.1 使用表格布局網頁144
7.3.2 導入Excel文檔145
7.3.3 使用CSS美化頁面147
7.4 案例3:設計旅游信息網148
7.4.1 使用表格布局頁面149
7.4.2 在表格中插入網頁元素149
7.4.3 使用CSS美化頁面151
7.5 實訓151
7.5.1 實訓一 設計健康
美食網151
7.5.2 實訓二 設計時尚
禮品網152
7.6 習題155
第8章 使用框架布局網頁156
8.1 案例1:使用框架布局休閑
音樂網頁156
8.1.1 認識框架與框架集157
8.1.2 創建框架和框架集157
8.1.3 保存框架和框架集158
8.1.4 向框架中添加內容159
8.2 學習任務:框架標簽160
8.3 案例2:使用框架布局校園
論壇頁面161
8.3.1 選擇框架162
8.3.2 拆分框架162
8.3.3 設置框架集和框架屬性163
8.3.4 在框架中添加頁面內容164
8.3.5 通過鏈接框架制作導航165
8.3.6 使用CSS美化頁面166
8.4 案例3:使用浮動框架布局寶貝
相冊網頁167
8.5 實訓:設計花園式樓盤網頁169
8.6 習題171
第9章 使用流體網格布局網頁173
9.1 學習任務:流體網格布局概述173
9.2 案例:使用流體網格布局購物網173
9.2.1 創建流體網格布局174
9.2.2 創建模塊內容175
9.3 實訓:使用流體網格布局
寵物網180
9.4 習題181
第10章 使用Div布局網頁182
10.1 案例1:使用AP Div布局電影
資訊網頁182
10.1.1 AP Div概述183
10.1.2 AP Div屬性面板183
10.1.3 “AP元素”面板184
10.1.4 在AP Div中添加
網頁元素185
10.1.5 使用CSS美化頁面187
10.2 學習任務:使用CSS+Div布局
網頁基礎187
10.2.1 AP Div標簽與Div
標簽188
10.2.2 Div標簽與span標簽189
10.2.3 盒子模型190
10.2.4 元素的定位192
10.2.5 常用CSS+Div布局
版式193
10.3 案例2:定位在網頁布局中
的應用197
10.4 案例3:使用CSS+Div布局個人
Blog199
10.5 實訓203
10.5.1 實訓一 網頁定位與
布局203
10.5.2 實訓二 使用Div+CSS布局
頁面204
10.6 習題205
第11章 多媒體網頁與網頁
特效設計207
11.1 學習任務:在網頁中插入多
媒體對象207
11.1.1 插入Flash動畫207
11.1.2 添加聲音210
11.1.3 插入FLV視頻211
11.2 學習任務:認識行為212
11.2.1 行為概述213
11.2.2 動作與事件214
11.2.3 添加行為216
11.3 學習任務:使用行為創建
網頁特效217
11.3.1 制作網頁加載時彈出
公告頁217
11.3.2 使用行為設置圖像
特效218
11.3.3 使用行為設置狀態欄
文本220
11.3.4 使用行為設置跳轉菜單
效果222
11.4 實訓224
11.4.1 實訓一 為寶貝相冊網頁
添加背景音樂224
11.4.2 實訓二 設置變換圖像的
導航欄224
11.5 習題225
第12章 使用表單對象22