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

第1章 網(wǎng)頁設(shè)計與制作綜述
1.1 學習任務(wù)：認識網(wǎng)頁
1.1.1 什么是網(wǎng)頁
1.1.2 網(wǎng)頁類型
1.2 學習任務(wù)：認識網(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 學習任務(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 學習任務(wù)：HTML基礎(chǔ)知識
1.4.1 HTML簡介
1.4.2 常用文本標簽
1.4.3 列表標簽
1.4.4 超鏈接標簽
1.4.5 圖像標簽
1.4.6 表格標簽
1.4.7 表單標簽
1.4.8 框架標簽
1.4.9 其他標簽
1.5 學習任務(wù)：初識HTML5.0
1.5.1 HTML5.0簡介
1.5.2 HTML5.0標簽
1.5.3 HTML5.0事件屬性
1.5.4 HTML5.0標準屬性
1.6 實訓(xùn)
1.6.1 實訓(xùn)一 使用記事本編輯簡單的網(wǎng)頁
1.6.2 實訓(xùn)二 制作滾動圖片鏈接
1.7 習題
第2章 網(wǎng)頁版式設(shè)計與色彩搭配
2.1 案例分析：不同風格網(wǎng)頁作品欣賞與解析
2.2 學習任務(wù)：網(wǎng)頁版式設(shè)計
2.2.1 版式設(shè)計概述
2.2.2 網(wǎng)頁版式的尺寸和構(gòu)成要素
2.2.3 網(wǎng)頁版式設(shè)計風格
2.2.4 網(wǎng)頁版式設(shè)計原則
2.2.5 網(wǎng)頁版式設(shè)計的視覺流程
2.2.6 網(wǎng)頁版式設(shè)計的步驟
2.3 學習任務(wù)：色彩的基本理論及視覺效果
2.3.1 色彩的基本理論
2.3.2 色彩的視覺效果
2.4 學習任務(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)頁配色練習
2.6 習題
第3章 Dreamweaver CS5入門
3.1 學習任務(wù)：初識Dreamweaver CS5
3.1.1 Dreamweaver CS5的主要功能
3.1.2 Dreamweaver CS5的安裝需求
3.2 學習任務(wù)：Dreamweaver CS5工作區(qū)布局
3.2.1 啟動Dreamweaver CS5
3.2.2 Dreamweaver CS5工作區(qū)布局介紹
3.3 學習任務(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 習題
第4章 CSS樣式基礎(chǔ)
4.1 學習任務(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 學習任務(wù)：CSS樣式的創(chuàng)建與屬性設(shè)置
4.2.1 創(chuàng)建CSS樣式
4.2.2 設(shè)置CSS屬性
4.2.3 通過CSS樣式面板設(shè)置CSS屬性
4.3 學習任務(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 習題
第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 學習任務(wù)：網(wǎng)頁圖像
5.3.1 網(wǎng)頁中常用的圖像格式
5.3.2 插入圖像
5.3.3 設(shè)置圖像屬性
5.3.4 用CSS設(shè)置圖像樣式
5.3.5 插入圖像占位符和鼠標經(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 習題
第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 學習任務(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 習題
第7章 表格
7.1 案例1 設(shè)計學生成績單
7.1.1 創(chuàng)建表格
7.1.2 設(shè)置表格屬性
7.1.3 編輯表格
7.1.4 使用CSS美化表格
7.2 學習任務(wù)：表格標簽
7.2.1 使用表格標簽制作網(wǎng)頁表格
7.2.2 在標簽選擇器中設(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 習題
第8章 框架
8.1 案例1 使用框架布局休閑音樂網(wǎng)頁
8.1.1 認識框架與框架集
8.1.2 創(chuàng)建框架和框架集
8.1.3 保存框架和框架集
8.1.4 向框架中添加內(nèi)容
8.2 學習任務(wù)：框架標簽
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 習題
第9章 使用Div布局網(wǎng)頁
9.1 學習任務(wù)：Div標簽
9.1.1 Div標簽與網(wǎng)頁布局
9.1.2 初識Div標簽
9.2 學習任務(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 學習任務(wù)：AP Div與表格相互轉(zhuǎn)換
9.4.1 將AP Div元素轉(zhuǎn)換為表格
9.4.2 將表格轉(zhuǎn)換為AP Div元素
9.5 學習任務(wù)：Div與網(wǎng)頁布局
9.5.1 Div標簽
9.5.2 盒子模型
9.5.3 元素的定位
9.6 案例2 定位在網(wǎng)頁布局中的應(yīng)用
9.7 案例3 使用CSS+Div布局個人Blog