HTML+CSS+Javascript網站制作案例教程

第1章 網站建設基礎
1.1 認識Web互聯網
1.1.1 網站、網頁與互聯網的關系
1.1.2 網頁與HTML語言
1.2 認識網站與網頁
1.2.1 網站與網頁
1.2.2 靜態網頁與動態網頁
1.2.3 網站相關術語
1.3 網站建設軟件與技術
1.3.1 網頁編輯軟件Dreamweaver
1.3.2 網頁標記語言HTML
1.3.3 網頁表現語言CSS
1.3.4 網頁特效腳本語言Java Script
1.3.5 動態網頁編程語言ASP、PHP和JSP等
1.4 HTML、CSS與Java Script的結合應用
1.5 本章小結
1.6 課后測試題
第2章 HTML與HTML5基礎
2.1 HTML基礎
2.1.1 什麼是HTML
2.1.2 HTML的主要功能
2.1.3 HTML的文檔結構
2.1.4 HTML的基本語法
2.1.5 HTML的編輯環境
2.1.6 認識Dreamweaver中的代碼工具
自測1：制作第一個HTML頁面
2.2 HTML5基礎
2.2.1 HTML5概述
2.2.2 HTML5的優勢
2.2.3 HTML5中新增的標簽
2.2.4 HTML5中廢棄的標簽
2.3 HTML5新增標簽的應用
2.3.1 ＜canvas＞標簽
自測2：在網頁中繪制圓形
2.3.2 ＜audio＞標簽
自測3：在網頁中嵌入音頻播放
2.3.3 ＜video＞標簽
自測4：在網頁中嵌入視頻播放
2.4 本章小結
2.5 課后測試題
第3章 ＜head＞與＜body＞標簽設置
3.1 網頁頭部＜head＞標簽設置
3.1.1 ＜title＞標簽
自測1：使用＜title＞ 標簽設置網頁標題
3.1.2 ＜base＞標簽
自測2：使用＜base＞ 標簽設置網頁基底網址
3.1.3 ＜meta＞標簽
自測3：使用＜meta＞ 標簽設置網頁關鍵字和說明等信息
3.2 網頁主體＜body＞標簽設置
3.2.1 邊距屬性margin
自測4：設置網頁整體邊距
3.2.2 背景顏色屬性bgcolor
自測5：設置網頁背景顏色
3.2.3 背景圖像屬性background
自測6：設置網頁背景圖像
3.2.4 文字屬性text
自測7：設置網頁文字效果
3.2.5 默認鏈接屬性link
自測8：設置網頁鏈接文字效果
3.3 在HTML代碼中添加注釋
3.4 本章小結
3.5 課后測試題
第4章 文字與圖片標簽設置
4.1 文字修飾標簽
4.1.1 文字樣式＜font＞標簽
自測1：設置文字樣式
4.1.2 傾斜文字＜i＞和＜em＞標簽
自測2：設置傾斜文字
4.1.3 加粗文字＜b＞和＜strong＞標簽
自測3：設置加粗文字
4.1.4 文字下畫線＜u＞標簽
自測4：為文字添加下畫線
4.1.5 標題文字＜h1＞至＜h6＞標簽
自測5：設置標題文字
4.1.6 的使用
自測6：在網頁文字中加入空格
4.1.7 特殊字符
自測7：在網頁中插入特殊字符
4.1.8 其他文字修飾方法
4.2 文字分行與分段標簽
4.2.1 文字換行
標簽
自測8：使用
標簽為文字換行
4.2.2 文字強制不換行＜nobr＞標簽
自測9：使用＜nobr＞ 標簽強制文字不換行
4.2.3 文字分段＜p＞標簽
自測10：使用＜p＞ 標簽為文本分段
4.2.4 文字對齊屬性align
自測11：設置文字水平對齊效果
4.2.5 水平線＜hr＞標簽
自測12：使用水平線分割文本
4.3 文本列表標簽
4.3.1 列表的結構
4.3.2 無序列表＜ul＞標簽
自測13：制作新聞列表
4.3.3 有序列表＜ol＞標簽
自測14：制作音樂排行
4.3.4 定義列表＜dl＞標簽
自測14：制作新聞公告
4.4 了解網頁中的圖片格式
4.5 插入圖像
4.5.1 圖像標簽＜img＞
自測15：制作圖像頁面
4.5.2 圖文混排
自測16：制作圖文介紹頁面
4.6 滾動標簽＜marquee＞
自測17：制作網頁滾動文本
自測18：制作網頁圖片滾動效果
4.7 本章小結
4.8 課后測試題
第5章 多媒體與超鏈接標簽設置
5.1 在網頁中插入多媒體
5.1.1 插入Flash動畫＜embed＞標簽
自測1：制作Flash 歡迎頁面
5.1.2 插入FLV視頻＜object＞標簽
自測2：制作FLV 視頻頁面
5.1.3 插入普通視頻＜embed＞標簽
自測3：制作視頻網頁
5.2 為網頁添加背景音樂
5.2.1 背景音樂＜bgsound＞標簽
自測4：為網頁添加背景音樂
5.2.2 嵌入音頻＜embed＞標簽
自測5：在網頁中嵌入音頻
5.3 在網頁中調用外部程序
5.3.1 調用外部JavaScript程序
自測6：在網頁中顯示當前系統時間
5.3.2 區分客戶端與服務器端程序
5.4 文本與圖像鏈接
5.4.1 超鏈接＜a＞標簽
自測7：為文字和圖像設置超鏈接
5.4.2 超鏈接打開方式target屬性
自測8：設置超鏈接打開方式
5.4.3 超鏈接提示title屬性
自測9：設置超鏈接提示文字
5.4.4 錨記鏈接
自測10：設置錨記鏈接
5.4.5 特殊超鏈接
自測11：設置網頁中的特殊鏈接
5.5 本章小結
5.6 課后測試題
第6章 表單標簽設置
6.1 了解網頁表單
6.1.1 網頁表單的作用
6.1.2 網頁表單＜form＞標簽
6.1.3 表單的數據傳遞方式method屬性
6.2 在網頁中插入表單元素
6.2.1 文本域text
自測1：插入文本域
6.2.2 密碼域password
自測2：插入密碼域
6.2.3 文本區域textarea
自測3：插入文本區域
6.2.4 隱藏域hidden
自測4：插入隱藏域
6.2.5 復選框checkbox
自測5：插入復選框
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 本章小結
6.4 課后測試題
第7章 CSS樣式基礎
7.1 了解CSS樣式
7.1.1 什麼是CSS樣式
7.1.2 CSS樣式的發展
7.2 CSS樣式語法
7.2.1 CSS樣式基本語法
7.2.2 CSS的樣式規則
7.34種使用CSS樣式的方法
7.3.1 內聯樣式
自測1：使用style屬性添加內聯樣式
7.3.2 內部樣式
自測2：使用內部CSS樣式
7.3.3 外部樣式表文件
自測3：鏈接外部樣式表文件
7.3.4 導入樣式表文件
自測4：導入外部CSS樣式表文件
7.4 CSS樣式選擇器
7.4.1 通配選擇器
自測5：使用通配選擇器控制網頁中所有標簽
7.4.2 標簽選擇器
自測6：使用標簽選擇器控制網頁整體屬性
7.4.3 類選擇器
自測7：創建類CSS 樣式
7.4.4 ID選擇器
自測8：創建ID CSS樣式
7.4.5 偽類選擇器
自測9：定義網頁中超鏈接文字效果
7.4.6 復合選擇器
自測10：創建復合CSS 樣式
7.4.7 群選擇器
自測11：使用群選擇器同時定義網頁中元素樣式
7.5 本章小結
7.6 課后測試題
第8章 設置文本的CSS屬性
8.1 使用CSS控制文字樣式
8.1.1 字體font—family屬性
8.1.2 字體大小font—size屬性
8.1.3 字體顏色color屬性
自測1：定義網頁中文字
8.1.4 字體粗細font—weight屬性
8.1.5 字體樣式font—style屬性
自測2：設置網頁中文字的加粗和傾斜樣式
8.1.6 英文字體大小寫text—transform屬性
自測3：定義網頁中英文字母大小寫
8.1.7 文字修飾text—decoration屬性
自測4：為網頁中的文字添加下畫線、頂畫線和刪除線效果
8.2 使用CSS控制字間距和段落樣式
8.2.1 字間距word—spacing屬性
自測5：設置段落文本字間距
8.2.2 行間距line—height屬性
自測6：設置網頁中的文本行間距
8.2.3 段落首字下沉
自測7：在網頁中實現段落文前綴字下沉
8.2.4 段落首行縮進text—indent屬性
自測8：在網頁中實現段落首行縮進效果
8.2.5 段落水平對齊text—align屬性
自測9：設置網頁中文本水平對齊
8.2.6 文本垂直對齊vertical—align屬性
自測10：設置網頁中文本垂直對齊
8.3 CSS3.0新增文本控制屬性
8.3.1 控制文本換行word—wrap屬性
8.3.2 文本溢出處理text—overflow屬性
8.3.3 文字陰影text—shadow屬性
自測11：實現網頁文本的陰影效果
8.4 本章小結
8.5 課后測試題
第9章 設置背景和圖像的CSS屬性
9.1 使用CSS控制背景顏色和背景圖像
9.1.1 背景顏色background—color屬性
自測1：設置網頁的背景顏色
9.1.2 背景圖像background—image屬性
自測2：為網頁設置背景圖像
9.1.3 背景圖像重復方式background—repeat屬性
自測3：設置網頁背景圖像重復
9.1.4 背景圖像位置background—position屬性
自測4：設置網頁背景圖像位置
9.1.5 固定背景圖像background—attachment屬性
自測5：設置網頁中的背景圖像固定不動
9.2 使用CSS設置圖片樣式
9.2.1 邊框border屬性
自測6：設置網頁中圖像邊框效果
9.2.2 圖片縮放
自測7：設置網頁中圖片縮放效果
9.2.3 圖片水平對齊與垂直對齊
9.3 CSS3.0新增顏色設置方式
9.3.1 HSL顏色方式
9.3.2 HSLA顏色方式
9.3.3 RGBA顏色方式
自測8：使用RGBA顏色方式設置半透明背景色
9.4 CSS3.0新增背景控制屬性
9.4.1 背景圖像顯示區域background—origin屬性
9.4.2 背景圖像裁剪區域background—clip屬性
9.4.3 背景圖像大小background—size屬性
自測9：設置網頁中背景圖像的大小
9.5 CSS3.0新增邊框控制屬性
9.5.1 多重邊框顏色border—colors屬性
9.5.2 圖像邊框border—image屬性
9.5.3 圓角邊框border—radius屬性
自測10：在網頁中實現圓角邊框效果
9.6 本章小結
9.7 課后測試題
第10章 設置列表和表單的CSS屬性
10.1 使用CSS設置列表屬性
10.1.1 ul無序列表樣式
自測1：設置網頁中的項目列表
10.1.2 ol有序列表樣式
自測2：定義網頁中的有序列表
10.1.3 更改列表項目樣式
自測3：設置獨立的項目列表樣式
10.1.4 使用圖片作為列表樣式
自測4：設置項目符號為自定義圖像
10.1.5 定義列表
自測5：設置定義列表樣式
10.2 使用CSS控制表單元素
10.2.1 表單元素的背景顏色
自測6：使用CSS 樣式定義文本框背景顏色
10.2.2 表單元素的邊框
自測7：使用CSS 樣式定義文本框的邊框效果
10.2.3 圓角文本字段
自測8：使用CSS 樣式實現圓角文本字段效果
10.3 使用CSS控制超鏈接效果
自測9：設置文本超鏈接效果
10.4 設置鼠標指針效果
10.4.1 鼠標指針樣式
自測10：使用CSS 樣式定義網頁鼠標指針效果
10.4.2 鼠標變幻效果
自測11：使用CSS 樣式實現鼠標變換效果
10.5 CSS3.0新增內容和透明度屬性
10.5.1 內容content屬性
自測12：為網頁元素賦予內容
10.5.2 透明度opacity屬性
自測13：設置網頁元素的半透明效果
10.6 CSS3.0新增的多列布局屬性
10.6.1 列寬度column—width屬性
10.6.2 列數column—count屬性
10.6.3 列間距column—gap屬性
10.6.4 列邊框column—rule屬性
自測14：在網頁中實現文本分欄效果
10.7 CSS3.0新增其他屬性
10.7.1 內容溢出處理overflow屬性
10.7.2 輪廓外邊框outline屬性
10.7.3 區域縮放調節resize屬性
10.7.4 元素陰影box—shadow屬性
自測15：為網頁元素添加陰影效果
10.8 本章小結
10.9 課后測試題
第11章 Div+CSS布局網頁
11.1 創建Div
11.1.1 了解Div
11.1.2 如何插入Div
11.2 什麼是CSS盒模型
11.2.1 可視化盒模型
11.2.2 margin屬性
自測1：控制網頁中元素的外邊距
11.2.3 border屬性
自測2：為網頁中的圖像添加邊框效果
11.2.4 padding屬性
自測3：為網頁元素設置填充效果
11.2.5 content（內容）部分
11.3 網頁元素定位屬性
11.3.1 CSS定位屬性
11.3.2 相對定位relative
自測4：在網頁中使用相對定位
11.3.3 絕對定位absolute
自測5：設置網頁元素絕對定位
11.3.4 固定定位fixed
自測6：設置網頁元素固定定位
11.3.5 浮動定位float
自測7：在網頁中應用浮動定位
11.3.6 空白邊疊加
自測8：網頁中空白邊疊加的應用
11.4 常用網頁布局方式
11.4.1 居中的布局
11.4.2 浮動的布局
11.4.3 自適應高度的解決方法
11.5 什麼是塊元素和行內元素
11.5.1 塊元素
11.5.2 行內元素
11.6 本章小結
11.7 課后測試題
第12章 Java Script入門
12.1 Java Script概述
12.1.1 了解Java Script
12.1.2 Java Script的作用
12.1.3 在網頁中使用Java Script的方法
自測1：編寫一個簡單的Java Script 腳本
12.2 Java Script語法基礎
12.2.1 ＜script＞標簽聲明
12.2.2 Java Script代碼格式
12.2.3 大小寫規范
12.2.4 添加注釋
12.2.5 Java Script中的保留字
12.2.6 輸出方法
自測2：使用Java Script在網頁中輸出內容
12.3 Java Script變量
12.3.1 什麼是變量
12.3.2 變量的聲明和使用
自測3：在Java Script中定義變量並輸出
12.4 Java Script數據類型
12.4.1 什麼是數據類型
12.4.2 基本的數據類型
自測4：使用Java Script中的數據類型
12.5 Java Script運算符
12.5.1 運算符與表達式
自測5：使用Java Script中的表達式
12.5.2 算術運算符
自測6：使用算術運算符
12.5.3 賦值運算符
自測7：使用賦值運算符
12.5.4 遞增和遞減運算符
自測8：使用遞增和遞減運算符
12.5.5 關系運算符
自測9：使用關系運算符
12.5.6 邏輯運算符
自測10：使用邏輯運算符
12.5.7 條件運算符
12.6 條件和循環語句
12.6.1 if條件語句
自測11：使用if條件語句
12.6.2 switch條件語句
自測12：使用switch條件語句
12.6.3 for和for…in循環語句
自測13：使用for 循環語句
12.6.4 while和do…while循環語句
自測14：使用while循環語句
12.7 本章小結
12.8 課后測試題
第13章 Java Script中的函數與對象
13.1 Java Script函數
13.1.1 什麼是函數
13.1.2 函數的使用
自測1：自定義函數的應用
13.1.3 函數傳遞參數
自測2：使用函數傳遞參數
13.1.4 函數中變量的作用域
自測3：了解函數中變量的作用域
13.1.5 函數的返回值
自測4：接收函數的返回值
13.1.6 函數嵌套
自測5：函數嵌套的應用
13.2 聲明和引用對象
13.2.1 對象的聲明
自測6：在Java Script 中聲明對象
13.2.2 引用對象
自測7：引用內置對象輸出系統時間
13.2.3 對象屬性
自測8：設置對象屬性
13.2.4 對象構造函數
自測9：對象構造函數的應用
13.2.5 自定義對象方法
自測10：自定義對象方法應用
13.3 Java Script內置對象
13.3.1 date對象
自測11：date 對象的應用
13.3.2 math對象
自測12：math 對象的應用
13.3.3 string對象
自測13：string 對象的應用
13.3.4 array對象
自測14：array 對象的應用
13.3.5 函數對象
自測15：函數對象的應用
13.4 瀏覽器對象
13.4.1 瀏覽器對象navigator
自測16：navigator 對象的應用
13.4.2 窗口對象window
自測17：window 對象的應用
13.4.3 位置對象location
自測18：location 對象的應用
13.4.4 歷史對象history
自測19：history 對象的應用
13.4.5 屏幕對象screen
自測20：screen 對象的應用
13.4.6 文檔對象document
自測21：document 對象的應用
13.5 本章小結
13.6 課后測試題
第14章 Java Script中的事件
14.1 了解Java Script事件
14.1.1 了解Java Script事件處理
14.1.2 HTML元素常用事件
14.1.3 常用事件方法
14.2 常用事件在網頁中的應用
14.2.1 click事件
自測1：使用click事件實現關閉網頁窗口
14.2.2 change事件
自測2：change事件在網頁表單中的應用
14.2.3 select事件
自測3：在網頁中使用select事件
14.2.4 focus事件
自測4：focus事件在網頁中的應用
14.2.5 load事件
自測5：load事件在網頁中的應用
14.2.6 鼠標移動事件
自測6：在網頁中應用鼠標移動事件
14.2.7 onblur事件
自測7：onblur事件在網頁中的應用
14.3 其他常用事件
14.4 本章小結
14.5 課后測試題