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

目錄
第1章　網(wǎng)頁設(shè)計(jì)概述　2
1.1　初識(shí)網(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)建第一個(gè)網(wǎng)頁　8
本章小結(jié)　11
習(xí)題1　11
實(shí)訓(xùn)1　11
第2章　HTML語言　2
2.1　案例：簡單學(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)建首頁　33
2.3.3　創(chuàng)建學(xué)院簡介頁面　34
3.3.4　創(chuàng)建學(xué)院新聞頁面　35
2.3.5　創(chuàng)建專業(yè)介紹頁面　37
本章小結(jié)　38
習(xí)題2　38
實(shí)訓(xùn)2　40
第３章　CSS基礎(chǔ)　2
3.1　案例：學(xué)院新聞詳情頁面　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)建新聞詳情頁面　19
本章小結(jié)　21
習(xí)題3　21
實(shí)訓(xùn)3　22
第4章　盒子模型　2
4.1　案例：學(xué)院簡介頁面　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　元素的類型與轉(zhuǎn)換　12
4.2.5　塊元素間的外邊距　14
4.3　案例實(shí)現(xiàn)　17
4.3.1　制作頁面結(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é)生信息表的頁面結(jié)構(gòu)　13
6.3.2　添加CSS樣式　16
6.4　表單案例：用戶注冊表　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　用戶信息注冊表單的頁面結(jié)構(gòu)　24
6.6.2　添加CSS樣式　27
本章小結(jié)　28
習(xí)題6　29
實(shí)訓(xùn)6　29
第7章　DIV+CSS布局網(wǎng)頁　2
7.1　案例：學(xué)院網(wǎng)站主頁布局　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　制作頁面結(jié)構(gòu)　26
7.3.2　添加CSS樣式　27
本章小結(jié)　29
習(xí)題7　30
實(shí)訓(xùn)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　案例：制作選項(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)頁　16
9.4　網(wǎng)站主頁設(shè)計(jì)　18
9.4.1主頁布局設(shè)計(jì)　18
9.4.2主頁設(shè)計(jì)步驟　18
9.5　網(wǎng)站模板頁設(shè)計(jì)　31
9.6　網(wǎng)站其他頁面設(shè)計(jì)　35
9.6.1　制作學(xué)院簡介頁面　35
9.6.2.　制作學(xué)院榮譽(yù)列表頁面　37
9.6.3　制作學(xué)院榮譽(yù)詳細(xì)情況頁面　39
9.6.4　制作高技能人才培訓(xùn)基地頁面　41
9.6.5　制作辦公電話頁面　43
9.6.6　制作視頻宣傳頁面　45
9.7　添加首頁中的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)頁　14
10.4　網(wǎng)站靜態(tài)頁面設(shè)計(jì)　15
10.4.1網(wǎng)站首頁設(shè)計(jì)　15
10.4.2　欄目頁設(shè)計(jì)　29
10.4.3內(nèi)容頁設(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)頁面與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)建留言頁面　54
10.13　發(fā)布首頁　55
10.14創(chuàng)建模板中的超鏈接　57
本章小結(jié)　60
實(shí)訓(xùn)10　60