網(wǎng)頁設(shè)計與制作案例教程（第2版）

第1章 網(wǎng)頁設(shè)計與制作綜述
1.1 學(xué)習(xí)任務(wù)：認(rèn)識網(wǎng)頁
1.1.1 什么是網(wǎng)頁
1.1.2 網(wǎng)頁類型
1.2 學(xué)習(xí)任務(wù)：認(rèn)識網(wǎng)站
1.2.1 什么是網(wǎng)站
1.2.2 網(wǎng)址與域名
1.2.3 網(wǎng)頁基本元素
1.2.4 網(wǎng)頁制作常用軟件和技術(shù)
1.3 學(xué)習(xí)任務(wù)：網(wǎng)站建設(shè)的一般流程
1.3.1 網(wǎng)站策劃
1.3.2 收集網(wǎng)站的素材和內(nèi)容
1.3.3 設(shè)計與制作網(wǎng)站
1.3.4 網(wǎng)站的測試與發(fā)布
1.3.5 網(wǎng)站的推廣與維護
1.4 學(xué)習(xí)任務(wù)：HTML基礎(chǔ)知識
1.4.1 HTML簡介
1.4.2 常用文本標(biāo)簽
1.4.3 列表標(biāo)簽
1.4.4 超鏈接標(biāo)簽
1.4.5 圖像標(biāo)簽
1.4.6 表格標(biāo)簽
1.4.7 表單標(biāo)簽
1.4.8 框架標(biāo)簽
1.4.9 其他標(biāo)簽
1.5 學(xué)習(xí)任務(wù)：初識HTML5.0
1.5.1 HTML5.0簡介
1.5.2 HTML5.0標(biāo)簽
1.5.3 HTML5.0事件屬性
1.5.4 HTML5.0標(biāo)準(zhǔn)屬性
1.6 實訓(xùn)
1.6.1 實訓(xùn)一 使用記事本編輯簡單的網(wǎng)頁
1.6.2 實訓(xùn)二 制作滾動圖片鏈接
1.7 習(xí)題
第2章 網(wǎng)頁版式設(shè)計與色彩搭配
2.1 案例分析：不同風(fēng)格網(wǎng)頁作品欣賞與解析
2.2 學(xué)習(xí)任務(wù)：網(wǎng)頁版式設(shè)計
2.2.1 版式設(shè)計概述
2.2.2 網(wǎng)頁版式的尺寸和構(gòu)成要素
2.2.3 網(wǎng)頁版式設(shè)計風(fēng)格
2.2.4 網(wǎng)頁版式設(shè)計原則
2.2.5 網(wǎng)頁版式設(shè)計的視覺流程
2.2.6 網(wǎng)頁版式設(shè)計的步驟
2.3 學(xué)習(xí)任務(wù)：色彩的基本理論及視覺效果
2.3.1 色彩的基本理論
2.3.2 色彩的視覺效果
2.4 學(xué)習(xí)任務(wù)：網(wǎng)頁中的色彩及配色
2.4.1 網(wǎng)頁色彩
2.4.2 網(wǎng)頁中色彩的作用
2.4.3 網(wǎng)頁配色原理
2.4.4 網(wǎng)頁配色技巧
2.5 實訓(xùn)
2.5.1 實訓(xùn)一 總結(jié)不同主題網(wǎng)站的版式設(shè)計及配色
2.5.2 實訓(xùn)二 網(wǎng)頁配色練習(xí)
2.6 習(xí)題
第3章 Dreamweaver CS5入門
3.1 學(xué)習(xí)任務(wù)：初識Dreamweaver CS5
3.1.1 Dreamweaver CS5的主要功能
3.1.2 Dreamweaver CS5的安裝需求
3.2 學(xué)習(xí)任務(wù)：Dreamweaver CS5工作區(qū)布局
3.2.1 啟動Dreamweaver CS5
3.2.2 Dreamweaver CS5工作區(qū)布局介紹
3.3 學(xué)習(xí)任務(wù)：規(guī)劃與創(chuàng)建站點
3.3.1 站點概述
3.3.2 規(guī)劃站點
3.3.3 創(chuàng)建本地站點
3.3.4 管理站點
3.4 案例 創(chuàng)建歡迎光臨網(wǎng)頁
3.4.1 創(chuàng)建網(wǎng)頁文檔
3.4.2 設(shè)置頁面屬性
3.4.3 保存網(wǎng)頁文檔
3.4.4 預(yù)覽網(wǎng)頁文檔
3.5 實訓(xùn)
3.5.1 實訓(xùn)一 熟悉Dreamweaver CS5工作區(qū)布局
3.5.2 實訓(xùn)二 制作網(wǎng)上家園歡迎頁面
3.6 習(xí)題
第4章 CSS樣式基礎(chǔ)
4.1 學(xué)習(xí)任務(wù)：CSS概述
4.1.1 CSS的概念
4.1.2 使用HTML和CSS格式化網(wǎng)頁
4.1.3 CSS樣式面板
4.1.4 CSS基本語法
4.1.5 CSS樣式表的引用
4.2 學(xué)習(xí)任務(wù)：CSS樣式的創(chuàng)建與屬性設(shè)置
4.2.1 創(chuàng)建CSS樣式
4.2.2 設(shè)置CSS屬性
4.2.3 通過CSS樣式面板設(shè)置CSS屬性
4.3 學(xué)習(xí)任務(wù)：管理CSS樣式
4.3.1 鏈接或者導(dǎo)入外部CSS樣式
4.3.2 查看CSS樣式
4.3.3 編輯與刪除CSS樣式
4.4 案例 使用CSS樣式美化網(wǎng)頁
4.5 實訓(xùn) 為網(wǎng)頁元素應(yīng)用CSS樣式
4.6 習(xí)題
第5章 網(wǎng)頁文本和圖像
5.1 案例1 設(shè)計唐詩賞析網(wǎng)頁
5.1.1 輸入文本
5.1.2 復(fù)制文本
5.1.3 導(dǎo)入文本
5.1.4 設(shè)置項目符號或編號
5.1.5 插入特殊字符、水平線和日期
5.1.6 設(shè)置文本屬性
5.2 案例2 設(shè)計制作特效文字展示頁面
5.2.1 CSS濾鏡概述
5.2.2 用CSS濾鏡設(shè)計模糊字
5.2.3 用CSS濾鏡設(shè)計陰影字
5.2.4 用CSS濾鏡設(shè)計發(fā)光字
5.2.5 用CSS濾鏡設(shè)計遮罩字
5.2.6 用CSS濾鏡設(shè)計波浪字
5.2.7 用CSS濾鏡設(shè)計射線字
5.3 學(xué)習(xí)任務(wù)：網(wǎng)頁圖像
5.3.1 網(wǎng)頁中常用的圖像格式
5.3.2 插入圖像
5.3.3 設(shè)置圖像屬性
5.3.4 用CSS設(shè)置圖像樣式
5.3.5 插入圖像占位符和鼠標(biāo)經(jīng)過圖像
5.4 案例3 圖文混排——設(shè)計電影介紹網(wǎng)站頁面
5.5 實訓(xùn)
5.5.1 實訓(xùn)一 設(shè)計文本頁面
5.5.2 實訓(xùn)二 設(shè)計暢銷書介紹網(wǎng)頁
5.6 習(xí)題
第6章 網(wǎng)頁超鏈接與導(dǎo)航
6.1 案例1 設(shè)計制作過節(jié)樂網(wǎng)頁
6.1.1 超鏈接概述
6.1.2 創(chuàng)建各類超鏈接
6.1.3 用CSS設(shè)置超鏈接樣式
6.2 案例2 圖像地圖——設(shè)計國家地理網(wǎng)站頁面
6.3 學(xué)習(xí)任務(wù)：網(wǎng)頁導(dǎo)航概述
6.3.1 網(wǎng)頁導(dǎo)航作用
6.3.2 網(wǎng)頁導(dǎo)航分類
6.3.3 網(wǎng)頁導(dǎo)航方向
6.4 案例3 用CSS設(shè)計制作網(wǎng)頁導(dǎo)航
6.5 實訓(xùn) 設(shè)計制作點點星空網(wǎng)站頁面
6.6 習(xí)題
第7章 表格
7.1 案例1 設(shè)計學(xué)生成績單
7.1.1 創(chuàng)建表格
7.1.2 設(shè)置表格屬性
7.1.3 編輯表格
7.1.4 使用CSS美化表格
7.2 學(xué)習(xí)任務(wù)：表格標(biāo)簽
7.2.1 使用表格標(biāo)簽制作網(wǎng)頁表格
7.2.2 在標(biāo)簽選擇器中設(shè)置表格的屬性
7.3 案例2 使用表格布局圖書資源網(wǎng)
7.3.1 使用表格布局網(wǎng)頁
7.3.2 導(dǎo)入Excel文檔
7.3.3 導(dǎo)入表格式數(shù)據(jù)
7.3.4 排序表格
7.3.5 使用CSS美化頁面
7.4 案例3 設(shè)計旅游信息網(wǎng)
7.4.1 使用表格布局頁面
7.4.2 在表格中插入網(wǎng)頁元素
7.4.3 使用CSS美化頁面
7.5 實訓(xùn)
7.5.1 實訓(xùn)一 設(shè)計健康美食網(wǎng)
7.5.2 實訓(xùn)二 設(shè)計時尚禮品網(wǎng)
7.6 習(xí)題
第8章 框架
8.1 案例1 使用框架布局休閑音樂網(wǎng)頁
8.1.1 認(rèn)識框架與框架集
8.1.2 創(chuàng)建框架和框架集
8.1.3 保存框架和框架集
8.1.4 向框架中添加內(nèi)容
8.2 學(xué)習(xí)任務(wù)：框架標(biāo)簽
8.3 案例2 使用框架布局校園論壇頁面
8.3.1 選擇框架
8.3.2 拆分框架
8.3.3 設(shè)置框架集和框架屬性
8.3.4 在框架中添加頁面內(nèi)容
8.3.5 通過鏈接框架制作導(dǎo)航
8.3.6 使用CSS美化頁面
8.4 案例3 使用浮動框架布局寶貝相冊網(wǎng)頁
8.5 實訓(xùn) 設(shè)計花園式樓盤網(wǎng)
8.6 習(xí)題
第9章 使用Div布局網(wǎng)頁
9.1 學(xué)習(xí)任務(wù)：Div標(biāo)簽
9.1.1 Div標(biāo)簽與網(wǎng)頁布局
9.1.2 初識Div標(biāo)簽
9.2 學(xué)習(xí)任務(wù)：AP Div基礎(chǔ)
9.2.1 AP Div概述
9.2.2 AP Div元素的“屬性”面板
9.2.3 “AP元素”面板
9.3 案例1 使用AP Div布局簡單網(wǎng)頁
9.4 學(xué)習(xí)任務(wù)：AP Div與表格相互轉(zhuǎn)換
9.4.1 將AP Div元素轉(zhuǎn)換為表格
9.4.2 將表格轉(zhuǎn)換為AP Div元素
9.5 學(xué)習(xí)任務(wù)：Div與網(wǎng)頁布局
9.5.1 Div標(biāo)簽
9.5.2 盒子模型
9.5.3 元素的定位
9.6 案例2 定位在網(wǎng)頁布局中的應(yīng)用
9.7 案例3 使用CSS+Div布局個人Blog