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

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