HTML+CSS+Javascript網(wǎng)站制作案例教程

第1章　網(wǎng)站建設(shè)基礎(chǔ)
1．1　認(rèn)識(shí)Web互聯(lián)網(wǎng)
1．1．1　網(wǎng)站、網(wǎng)頁(yè)與互聯(lián)網(wǎng)的關(guān)系
1．1．2　網(wǎng)頁(yè)與HTML語(yǔ)言
1．2　認(rèn)識(shí)網(wǎng)站與網(wǎng)頁(yè)
1．2．1　網(wǎng)站與網(wǎng)頁(yè)
1．2．2　靜態(tài)網(wǎng)頁(yè)與動(dòng)態(tài)網(wǎng)頁(yè)
1．2．3　網(wǎng)站相關(guān)術(shù)語(yǔ)
1．3　網(wǎng)站建設(shè)軟件與技術(shù)
1．3．1　網(wǎng)頁(yè)編輯軟件Dreamweaver
1．3．2　網(wǎng)頁(yè)標(biāo)記語(yǔ)言HTML
1．3．3　網(wǎng)頁(yè)表現(xiàn)語(yǔ)言CSS
1．3．4　網(wǎng)頁(yè)特效腳本語(yǔ)言JavaScript
1．3．5　動(dòng)態(tài)網(wǎng)頁(yè)編程語(yǔ)言ASP、PHP和JSP等
1．4　HTML、CSS與JavaScript的結(jié)合應(yīng)用
1．5　本章小結(jié)
1．6　課后測(cè)試題
第2章　HTML與HTML 5基礎(chǔ)
2．1　HTML基礎(chǔ)
2．1．1　什么是HTML
2．1．2　HTML 的主要功能
2．1．3　HTML 的文檔結(jié)構(gòu)
2．1．4　HTML 的基本語(yǔ)法
2．1．5　HTML 的編輯環(huán)境
2．1．6　認(rèn)識(shí)Dreamweaver 中的代碼工具
自測(cè)1：制作第一個(gè)HTML頁(yè)面
2．2　HTML5基礎(chǔ)
2．2．1　HTML5概述
2．2．2　HTML5的優(yōu)勢(shì)
2．2．3　HTML5中新增的標(biāo)簽
2．2．4　HTML5中廢棄的標(biāo)簽
2．3　HTML5新增標(biāo)簽的應(yīng)用
2．3．1　標(biāo)簽
自測(cè)2：在網(wǎng)頁(yè)中繪制圓形
2．3．2　標(biāo)簽
自測(cè)3：在網(wǎng)頁(yè)中嵌入音頻播放
2．3．3　標(biāo)簽
自測(cè)4：在網(wǎng)頁(yè)中嵌入視頻播放
2．4　本章小結(jié)
2．5　課后測(cè)試題
第3章　與標(biāo)簽設(shè)置
3．1　網(wǎng)頁(yè)頭部 標(biāo)簽設(shè)置
3．1．1　 標(biāo)簽
自測(cè)1：使用　標(biāo)簽設(shè)置網(wǎng)頁(yè)標(biāo)題
3．1．2　 標(biāo)簽
自測(cè)2：使用　標(biāo)簽設(shè)置網(wǎng)頁(yè)基底網(wǎng)址
3．1．3　 標(biāo)簽
自測(cè)3：使用　標(biāo)簽設(shè)置網(wǎng)頁(yè)關(guān)鍵字和說(shuō)明等信息
3．2　網(wǎng)頁(yè)主體 標(biāo)簽設(shè)置
3．2．1　邊距屬性margin
自測(cè)4：設(shè)置網(wǎng)頁(yè)整體邊距
3．2．2　背景顏色屬性bgcolor
自測(cè)5：設(shè)置網(wǎng)頁(yè)背景顏色
3．2．3　背景圖像屬性background
自測(cè)6：設(shè)置網(wǎng)頁(yè)背景圖像
3．2．4　文字屬性text
自測(cè)7：設(shè)置網(wǎng)頁(yè)文字效果
3．2．5　默認(rèn)鏈接屬性link
自測(cè)8：設(shè)置網(wǎng)頁(yè)鏈接文字效果
3．3　在HTML 代碼中添加注釋
3．4　本章小結(jié)
3．5　課后測(cè)試題
第4章　文字與圖片標(biāo)簽設(shè)置
4．1　文字修飾標(biāo)簽
4．1．1　文字樣式標(biāo)簽
自測(cè)1：設(shè)置文字樣式
4．1．2　傾斜文字和標(biāo)簽
自測(cè)2：設(shè)置傾斜文字
4．1．3　加粗文字和標(biāo)簽
自測(cè)3：設(shè)置加粗文字
4．1．4　文字下畫(huà)線標(biāo)簽
自測(cè)4：為文字添加下畫(huà)線
4．1．5　標(biāo)題文字至標(biāo)簽
自測(cè)5：設(shè)置標(biāo)題文字
4．1．6　 的使用
自測(cè)6：在網(wǎng)頁(yè)文字中加入空格
4．1．7　特殊字符
自測(cè)7：在網(wǎng)頁(yè)中插入特殊字符
4．1．8　其他文字修飾方法
4．2　文字分行與分段標(biāo)簽
4．2．1　文字換行
標(biāo)簽
自測(cè)8：使用
　標(biāo)簽為文字換行
4．2．2　文字強(qiáng)制不換行 標(biāo)簽
自測(cè)9：使用　標(biāo)簽強(qiáng)制文字不換行
4．2．3　文字分段標(biāo)簽
自測(cè)10：使用
　標(biāo)簽為文本分段
4．2．4　文字對(duì)齊屬性align
自測(cè)11：設(shè)置文字水平對(duì)齊效果
4．2．5　水平線 標(biāo)簽
自測(cè)12：使用水平線分割文本
4．3　文本列表標(biāo)簽
4．3．1　列表的結(jié)構(gòu)
4．3．2　無(wú)序列表標(biāo)簽
自測(cè)13：制作新聞列表
4．3．3　有序列表標(biāo)簽
自測(cè)14：制作音樂(lè)排行
4．3．4　定義列表標(biāo)簽
自測(cè)14：制作新聞公告
4．4　了解網(wǎng)頁(yè)中的圖片格式
4．5　插入圖像
4．5．1　圖像標(biāo)簽
自測(cè)15：制作圖像頁(yè)面
4．5．2　圖文混排
自測(cè)16：制作圖文介紹頁(yè)面
4．6　滾動(dòng)標(biāo)簽
自測(cè)17：制作網(wǎng)頁(yè)滾動(dòng)文本
自測(cè)18：制作網(wǎng)頁(yè)圖片滾動(dòng)效果
4．7　本章小結(jié)
4．8　課后測(cè)試題
第5章　多媒體與超鏈接標(biāo)簽設(shè)置
5．1　在網(wǎng)頁(yè)中插入多媒體
5．1．1　插入Flash 動(dòng)畫(huà)標(biāo)簽
自測(cè)1：制作Flash　歡迎頁(yè)面
5．1．2　插入FLV 視頻標(biāo)簽
自測(cè)2：制作FLV　視頻頁(yè)面
5．1．3　插入普通視頻標(biāo)簽
自測(cè)3：制作視頻網(wǎng)頁(yè)
5．2　為網(wǎng)頁(yè)添加背景音樂(lè)
5．2．1　背景音樂(lè)標(biāo)簽
自測(cè)4：為網(wǎng)頁(yè)添加背景音樂(lè)
5．2．2　嵌入音頻標(biāo)簽
自測(cè)5：在網(wǎng)頁(yè)中嵌入音頻
5．3　在網(wǎng)頁(yè)中調(diào)用外部程序
5．3．1　調(diào)用外部JavaScript 程序
自測(cè)6：在網(wǎng)頁(yè)中顯示當(dāng)前系統(tǒng)時(shí)間
5．3．2　區(qū)分客戶端與服務(wù)器端程序
5．4　文本與圖像鏈接
5．4．1　超鏈接 標(biāo)簽
自測(cè)7：為文字和圖像設(shè)置超鏈接
5．4．2　超鏈接打開(kāi)方式target 屬性
自測(cè)8：設(shè)置超鏈接打開(kāi)方式
5．4．3　超鏈接提示title 屬性
自測(cè)9：設(shè)置超鏈接提示文字
5．4．4　錨記鏈接
自測(cè)10：設(shè)置錨記鏈接
5．4．5　特殊超鏈接
自測(cè)11：設(shè)置網(wǎng)頁(yè)中的特殊鏈接
5．5　本章小結(jié)
5．6　課后測(cè)試題
第6章　表單標(biāo)簽設(shè)置
6．1　了解網(wǎng)頁(yè)表單
6．1．1　網(wǎng)頁(yè)表單的作用
6．1．2　網(wǎng)頁(yè)表單標(biāo)簽
6．1．3　表單的數(shù)據(jù)傳遞方式method屬性
6．2　在網(wǎng)頁(yè)中插入表單元素
6．2．1　文本域text
自測(cè)1：插入文本域
6．2．2　密碼域password
自測(cè)2：插入密碼域
6．2．3　文本區(qū)域textarea
自測(cè)3：插入文本區(qū)域
6．2．4　隱藏域hidden
自測(cè)4：插入隱藏域
6．2．5　復(fù)選框checkbox
自測(cè)5：插入復(fù)選框
6．2．6　單選按鈕radio
自測(cè)6：插入單選按鈕
6．2．7　選擇域select
自測(cè)7：插入下拉列表
6．2．8　圖像域image
自測(cè)8：插入圖像域
6．2．9　文件域file
自測(cè)9：插入文件域
6．2．10　按鈕button
自測(cè)10：插入按鈕
6．3　本章小結(jié)
6．4　課后測(cè)試題
第7章　CSS樣式基礎(chǔ)
7．1　了解CSS 樣式
7．1．1　什么是CSS 樣式
7．1．2　CSS 樣式的發(fā)展
7．2　CSS 樣式語(yǔ)法
7．2．1　CSS 樣式基本語(yǔ)法
7．2．2　CSS 的樣式規(guī)則
7．3　4種使用CSS樣式的方法
7．3．1　內(nèi)聯(lián)樣式
自測(cè)1：使用style屬性添加內(nèi)聯(lián)樣式
7．3．2　內(nèi)部樣式
自測(cè)2：使用內(nèi)部CSS樣式
7．3．3　外部樣式表文件
自測(cè)3：鏈接外部樣式表文件
7．3．4　導(dǎo)入樣式表文件
自測(cè)4：導(dǎo)入外部CSS樣式表文件
7．4　CSS 樣式選擇器
7．4．1　通配選擇器
自測(cè)5：使用通配選擇器控制網(wǎng)頁(yè)中所有標(biāo)簽
7．4．2　標(biāo)簽選擇器
自測(cè)6：使用標(biāo)簽選擇器控制網(wǎng)頁(yè)整體屬性
7．4．3　類選擇器
自測(cè)7：創(chuàng)建類CSS　樣式
7．4．4　ID 選擇器
自測(cè)8：創(chuàng)建ID　CSS 樣式
7．4．5　偽類選擇器
自測(cè)9：定義網(wǎng)頁(yè)中超鏈接文字效果
7．4．6　復(fù)合選擇器
自測(cè)10：創(chuàng)建復(fù)合CSS　樣式
7．4．7　群選擇器
自測(cè)11：使用群選擇器同時(shí)定義網(wǎng)頁(yè)中元素樣式
7．5　本章小結(jié)
7．6　課后測(cè)試題
第8章　設(shè)置文本的CSS屬性
8．1　使用CSS 控制文字樣式
8．1．1　字體font-family 屬性
8．1．2　字體大小font-size 屬性
8．1．3　字體顏色color 屬性
自測(cè)1：定義網(wǎng)頁(yè)中文字
8．1．4　字體粗細(xì)font-weight 屬性
8．1．5　字體樣式font-style 屬性
自測(cè)2：設(shè)置網(wǎng)頁(yè)中文字的加粗和傾斜樣式
8．1．6　英文字體大小寫text-transform 屬性
自測(cè)3：定義網(wǎng)頁(yè)中英文字母大小寫
8．1．7　文字修飾text-decoration 屬性
自測(cè)4：為網(wǎng)頁(yè)中的文字添加下畫(huà)線、頂畫(huà)線和刪除線效果
8．2　使用CSS 控制字間距和段落樣式
8．2．1　字間距word-spacing 屬性
自測(cè)5：設(shè)置段落文本字間距
8．2．2　行間距l(xiāng)ine-height 屬性
自測(cè)6：設(shè)置網(wǎng)頁(yè)中的文本行間距
8．2．3　段落首字下沉
自測(cè)7：在網(wǎng)頁(yè)中實(shí)現(xiàn)段落文字首字下沉
8．2．4　段落首行縮進(jìn)text-indent 屬性
自測(cè)8：在網(wǎng)頁(yè)中實(shí)現(xiàn)段落首行縮進(jìn)效果
8．2．5　段落水平對(duì)齊text-align 屬性
自測(cè)9：設(shè)置網(wǎng)頁(yè)中文本水平對(duì)齊
8．2．6　文本垂直對(duì)齊vertical-align 屬性
自測(cè)10：設(shè)置網(wǎng)頁(yè)中文本垂直對(duì)齊
8．3　CSS 3．0新增文本控制屬性
8．3．1　控制文本換行word-wrap屬性
8．3．2　文本溢出處理text-overflow屬性
8．3．3　文字陰影text-shadow屬性
自測(cè)11：實(shí)現(xiàn)網(wǎng)頁(yè)文本的陰影效果
8．4　本章小結(jié)
8．5　課后測(cè)試題
第9章　設(shè)置背景和圖像的CSS屬性
9．1　使用CSS 控制背景顏色和背景圖像
9．1．1　背景顏色background-color屬性
自測(cè)1：設(shè)置網(wǎng)頁(yè)的背景顏色
9．1．2　背景圖像background-image屬性
自測(cè)2：為網(wǎng)頁(yè)設(shè)置背景圖像
9．1．3　背景圖像重復(fù)方式background-repeat屬性
自測(cè)3：設(shè)置網(wǎng)頁(yè)背景圖像重復(fù)
9．1．4　背景圖像位置background-position屬性
自測(cè)4：設(shè)置網(wǎng)頁(yè)背景圖像位置
9．1．5　固定背景圖像background-attachment屬性
自測(cè)5：設(shè)置網(wǎng)頁(yè)中的背景圖像固定不動(dòng)
9．2　使用CSS 設(shè)置圖片樣式
9．2．1　邊框border 屬性
自測(cè)6：設(shè)置網(wǎng)頁(yè)中圖像邊框效果
9．2．2　圖片縮放
自測(cè)7：設(shè)置網(wǎng)頁(yè)中圖片縮放效果
9．2．3　圖片水平對(duì)齊與垂直對(duì)齊
9．3　CSS 3．0新增顏色設(shè)置方式
9．3．1　HSL顏色方式
9．3．2　HSLA顏色方式
9．3．3　RGBA顏色方式
自測(cè)8：使用RGBA顏色方式設(shè)置半透明背景色
9．4　CSS3．0新增背景控制屬性
9．4．1　背景圖像顯示區(qū)域background-origin屬性
9．4．2　背景圖像裁剪區(qū)域background-clip屬性
9．4．3　背景圖像大小background-size屬性
自測(cè)9：設(shè)置網(wǎng)頁(yè)中背景圖像的大小
9．5　CSS3．0新增邊框控制屬性
9．5．1　多重邊框顏色border-colors屬性
9．5．2　圖像邊框border-image屬性
9．5．3　圓角邊框border-radius屬性
自測(cè)10：在網(wǎng)頁(yè)中實(shí)現(xiàn)圓角邊框效果
9．6　本章小結(jié)
9．7　課后測(cè)試題
第10章　設(shè)置列表和表單的CSS屬性
10．1　使用CSS 設(shè)置列表屬性
10．1．1　ul 無(wú)序列表樣式
自測(cè)1：設(shè)置網(wǎng)頁(yè)中的項(xiàng)目列表
10．1．2　ol 有序列表樣式
自測(cè)2：定義網(wǎng)頁(yè)中的有序列表
10．1．3　更改列表項(xiàng)目樣式
自測(cè)3：設(shè)置獨(dú)立的項(xiàng)目列表樣式
10．1．4　使用圖片作為列表樣式
自測(cè)4：設(shè)置項(xiàng)目符號(hào)為自定義圖像
10．1．5　定義列表
自測(cè)5：設(shè)置定義列表樣式
10．2　使用CSS 控制表單元素
10．2．1　表單元素的背景顏色
自測(cè)6：使用CSS　樣式定義文本框背景顏色
10．2．2　表單元素的邊框
自測(cè)7：使用CSS　樣式定義文本框的邊框效果
10．2．3　圓角文本字段
自測(cè)8：使用CSS　樣式實(shí)現(xiàn)圓角文本字段效果
10．3　使用CSS 控制超鏈接效果
自測(cè)9：設(shè)置文本超鏈接效果
10．4　設(shè)置鼠標(biāo)指針效果
10．4．1　鼠標(biāo)指針樣式
自測(cè)10：使用CSS　樣式定義網(wǎng)頁(yè)鼠標(biāo)指針效果
10．4．2　鼠標(biāo)變幻效果
自測(cè)11：使用CSS　樣式實(shí)現(xiàn)鼠標(biāo)變換效果
10．5　CSS3．0新增內(nèi)容和透明度屬性
10．5．1　內(nèi)容content屬性
自測(cè)12：為網(wǎng)頁(yè)元素賦予內(nèi)容
10．5．2　透明度opacity屬性
自測(cè)13：設(shè)置網(wǎng)頁(yè)元素的半透明效果
10．6　CSS 3．0新增的多列布局屬性
10．6．1　列寬度column-width屬性
10．6．2　列數(shù)column-count屬性
10．6．3　列間距column-gap屬性
10．6．4　列邊框column-rule屬性
自測(cè)14：在網(wǎng)頁(yè)中實(shí)現(xiàn)文本分欄效果
10．7　CSS 3．0新增其他屬性
10．7．1　內(nèi)容溢出處理overflow屬性
10．7．2　輪廓外邊框outline屬性
10．7．3　區(qū)域縮放調(diào)節(jié)resize屬性
10．7．4　元素陰影box-shadow屬性
自測(cè)15：為網(wǎng)頁(yè)元素添加陰影效果
10．8　本章小結(jié)
10．9　課后測(cè)試題
第11章　Div+CSS布局網(wǎng)頁(yè)
11．1　創(chuàng)建Div
11．1．1　了解Div
11．1．2　如何插入Div
11．2　什么是CSS 盒模型
11．2．1　可視化盒模型
11．2．2　margin 屬性
自測(cè)1：控制網(wǎng)頁(yè)中元素的外邊距
11．2．3　border 屬性
自測(cè)2：為網(wǎng)頁(yè)中的圖像添加邊框效果
11．2．4　padding 屬性
自測(cè)3：為網(wǎng)頁(yè)元素設(shè)置填充效果
11．2．5　content（內(nèi)容）部分
11．3　網(wǎng)頁(yè)元素定位屬性
11．3．1　CSS 定位屬性
11．3．2　相對(duì)定位relative
自測(cè)4：在網(wǎng)頁(yè)中使用相對(duì)定位
11．3．3　絕對(duì)定位absolute
自測(cè)5：設(shè)置網(wǎng)頁(yè)元素絕對(duì)定位
11．3．4　固定定位fixed
自測(cè)6：設(shè)置網(wǎng)頁(yè)元素固定定位
11．3．5　浮動(dòng)定位float
自測(cè)7：在網(wǎng)頁(yè)中應(yīng)用浮動(dòng)定位
11．3．6　空白邊疊加
自測(cè)8：網(wǎng)頁(yè)中空白邊疊加的應(yīng)用
11．4　常用網(wǎng)頁(yè)布局方式
11．4．1　居中的布局
11．4．2　浮動(dòng)的布局
11．4．3　自適應(yīng)高度的解決方法
11．5　什么是塊元素和行內(nèi)元素
11．5．1　塊元素
11．5．2　行內(nèi)元素
11．6　本章小結(jié)
11．7　課后測(cè)試題
第12章　JavaScript入門
12．1　JavaScript概述
12．1．1　了解JavaScript
12．1．2　JavaScript的作用
12．1．3　在網(wǎng)頁(yè)中使用JavaScript的方法
自測(cè)1：編寫一個(gè)簡(jiǎn)單的JavaScript　腳本
12．2　JavaScript 語(yǔ)法基礎(chǔ)
12．2．1　14．5　課后測(cè)試題