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

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