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

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