網(wǎng)頁設計與制作案例教程：HTML+CSS+DIV+JavaScript

目錄
第1章　網(wǎng)頁設計概述　2
1.1　初識網(wǎng)頁　2
1.2網(wǎng)頁相關(guān)概念　3
1.3常用的瀏覽器介紹　5
1.4　Dreamweaver工具的使用　6
1.4.1　Dreamweaver的發(fā)展　6
1.4.2　Dreamweaver CS6的操作界面　6
1.4.3　案例：創(chuàng)建第一個網(wǎng)頁　8
本章小結(jié)　11
習題1　11
實訓1　11
第2章　HTML語言　2
2.1　案例：簡單學校網(wǎng)站　2
2.2知識準備　3
2.2.1　HTML文檔的基本結(jié)構(gòu)　3
2.2.2　HTML標記及其屬性　5
2.2.3　HTML文本標記　7
2.2.4　HTML列表標記　15
2.2.5　HTML超鏈接標記　23
2.2.6　HTML圖像標記　26
2.3　案例實現(xiàn)　31
2.3.1　創(chuàng)建站點　31
2.3.2　創(chuàng)建首頁　33
2.3.3　創(chuàng)建學院簡介頁面　34
3.3.4　創(chuàng)建學院新聞頁面　35
2.3.5　創(chuàng)建專業(yè)介紹頁面　37
本章小結(jié)　38
習題2　38
實訓2　40
第３章　CSS基礎　2
3.1　案例：學院新聞詳情頁面　2
3.2知識準備　3
3.2.1　初識CSS　3
3.2.2　引入CSS樣式　3
3.2.3　常用的CSS選擇器　8
3.2.4　CSS常用文本屬性　14
3.2.5　CSS的高級特性　16
3.3　案例實現(xiàn)　17
3.3.1　創(chuàng)建站點　17
3.3.2　創(chuàng)建新聞詳情頁面　19
本章小結(jié)　21
習題3　21
實訓3　22
第4章　盒子模型　2
4.1　案例：學院簡介頁面　2
4.2知識準備　3
4.2.1　盒子模型的概念　3
4.2.2　盒子模型的相關(guān)屬性　5
4.2.3　CSS設置背景　6
4.2.4　元素的類型與轉(zhuǎn)換　12
4.2.5　塊元素間的外邊距　14
4.3　案例實現(xiàn)　17
4.3.1　制作頁面結(jié)構(gòu)　17
4.3.2　添加CSS樣式　18
本章小結(jié)　20
習題4　20
實訓4　21
第5章　列表與超鏈接　2
5.1　案例：學院新聞塊與學院網(wǎng)站導航　2
5.2知識準備　3
5.2.1　列表樣式設置　3
5.2.2　超鏈接樣式設置　7
5.3　案例實現(xiàn)　8
5.3.1　制作學院新聞塊　8
5.3.2　制作學院網(wǎng)站導航條　12
本章小結(jié)　15
習題5　15
實訓5　15
第6章　表格與表單　3
6.1　表格案例：學生信息表　3
6.2表格相關(guān)知識　4
6.2.1　表格標記　4
6.2.2　標記的屬性　5
6.2.3　標記的屬性　7
6.2.4　和標記的屬性　9
6.2.5使用CSS設置表格樣式　11
6.3　表格案例實現(xiàn)　13
6.3.1　學生信息表的頁面結(jié)構(gòu)　13
6.3.2　添加CSS樣式　16
6.4　表單案例：用戶注冊表　17
6.5表單相關(guān)知識　18
6.5.1　認識表單　18
6.5.2表單標記　18
6.5.3表單控件　19
6.5.4使用CSS設置表單樣式　21
6.6　表單案例實現(xiàn)　24
6.6.1　用戶信息注冊表單的頁面結(jié)構(gòu)　24
6.6.2　添加CSS樣式　27
本章小結(jié)　28
習題6　29
實訓6　29
第7章　DIV+CSS布局網(wǎng)頁　2
7.1　案例：學院網(wǎng)站主頁布局　2
7.2知識準備　3
7.2.1　元素的浮動　3
7.2.2　元素的定位　9
7.2.3　DIV+CSS布局　16
7.3　案例實現(xiàn)　26
7.3.1　制作頁面結(jié)構(gòu)　26
7.3.2　添加CSS樣式　27
本章小結(jié)　29
習題7　30
實訓7　30
第8章　使用JavaScript制作網(wǎng)頁特效　2
8.1　什么是JavaScript語言　2
8.2在網(wǎng)頁中調(diào)用JavaScript　3
8.2.1　直接嵌入HTML文檔中　3
8.2.2　引入外部腳本文件　4
8.2.3　在事件代碼中添加腳本　5
8.3　案例：制作Flash幻燈片特效　6
8.4　案例：制作下拉菜單特效　8
8.5　案例：制作選項卡特效　12
本章小結(jié)　16
習題8　17
實訓8　17
第9章　完整案例：信息學院網(wǎng)站制作　2
9.1　信息學院網(wǎng)站描述　2
9.2　網(wǎng)站規(guī)劃　6
9.3　效果圖設計　8
9.3.1　效果圖設計原則　8
9.3.2　效果圖設計步驟　8
9.3.3.　效果圖切片導出網(wǎng)頁　16
9.4　網(wǎng)站主頁設計　18
9.4.1主頁布局設計　18
9.4.2主頁設計步驟　18
9.5　網(wǎng)站模板頁設計　31
9.6　網(wǎng)站其他頁面設計　35
9.6.1　制作學院簡介頁面　35
9.6.2.　制作學院榮譽列表頁面　37
9.6.3　制作學院榮譽詳細情況頁面　39
9.6.4　制作高技能人才培訓基地頁面　41
9.6.5　制作辦公電話頁面　43
9.6.6　制作視頻宣傳頁面　45
9.7　添加首頁中的JavaScript腳本　47
本章小結(jié)　49
習題9　49
實訓9　49
第10章　完整案例：發(fā)電設備公司動態(tài)網(wǎng)站制作　1
10.1　發(fā)電設備公司動態(tài)網(wǎng)站描述　1
10.2網(wǎng)站規(guī)劃　5
10.3　效果圖設計　7
10.3.1效果圖設計原則　7
10.3.2效果圖設計步驟　7
10.3.3　效果圖切片導出網(wǎng)頁　14
10.4　網(wǎng)站靜態(tài)頁面設計　15
10.4.1網(wǎng)站首頁設計　15
10.4.2　欄目頁設計　29
10.4.3內(nèi)容頁設計　32
10.5　KessionCMS后臺管理系統(tǒng)的使用　34
10.5.1　kessionCMS介紹　34
10.5.2　kesionCMS完成動態(tài)網(wǎng)站的步驟　35
10.5.3　靜態(tài)頁面與kessionCMS的整合　35
10.6　IIS的安裝與配置　36
10.7　后臺登錄與設置　39
10.7.1　后臺登錄　39
10.7.2　基本信息設置　39
10.7.3　設置網(wǎng)站欄目　40
10.8　創(chuàng)建系統(tǒng)函數(shù)標簽　41
10.9創(chuàng)建網(wǎng)站模板　44
10.　10 模板綁定　51
10.　11 添加文章內(nèi)容　52
10.12　創(chuàng)建留言頁面　54
10.13　發(fā)布首頁　55
10.14創(chuàng)建模板中的超鏈接　57
本章小結(jié)　60
實訓10　60