HTML+CSS+JavaScript網頁設計實用教程

目錄
第1章　HTML基礎 2
1.1　了解Internet相關知識 …………………………… 2
1.1.1　TCP/IP協(xié)議 ………………………………………… 2
1.1.2　IP地址和域名 ……………………………………… 2
1.1.3　URL ………………………………………………… 1
1.1.4　Web瀏覽器 ………………………………………… 1
1.2　網頁與網站 ……………………………………… 2
1.2.1　網頁與網站的關系 ………………………………… 2
1.2.2　靜態(tài)網頁與動態(tài)網頁 ……………………………… 2
1.3　HTML、CSS與JavaScript ……………………… 3
1.3.1　HTML、CSS和JavaScript代碼 …………………… 3
1.3.2　HTML在網頁中的作用……………………………… 4
1.3.3　CSS在網頁中的作用 ……………………………… 4
1.3.4　JavaScript在網頁中的作用 ………………………… 4
1.4　HTML網頁技術 ………………………………… 5
1.4.1　HTML概述…………………………………………… 5
1.4.2　HTML文檔結構……………………………………… 5
1.4.3　HTML中的標簽形式………………………………… 6
1.4.4　編寫HTML時需要注意的問題……………………… 6
1.5　了解XHTML ……………………………………… 6
1.5.1　什么是XHTML ……………………………………… 6
1.5.2　XHTML的文檔結構 ………………………………… 7
1.5.3　XHTML的代碼規(guī)范 ………………………………… 7
1.5.4　XHTML的文檔類型 ………………………………… 9
1.5.5　名字空間 …………………………………………… 9
1.5.6　使用XHTML的優(yōu)勢 ………………………………… 9
1.6　兩種編寫HTML的方法 …………………………10
1.6.1　使用記事本編寫 ……………………………………10
課堂案例　使用記事本編寫HTML頁面 ……………………10
1.6.2　使用Dreamweaver編寫 …………………………… 11
課堂案例　使用Dreamweaver編寫網頁 …………………13
1.7　網頁設計制作流程 ………………………………14
1.7.1　前期網站策劃 ………………………………………14
1.7.2　規(guī)劃站點結構 ………………………………………14
1.7.3　收集網站相關素材 …………………………………15
1.7.4　網頁的版式與布局分析 ……………………………15
1.7.5　確定網頁配色 ………………………………………15
1.7.6　設計網站頁面 ………………………………………16
1.7.7　切割和優(yōu)化網頁圖像 ………………………………16
1.7.8　制作網站HTML頁面…………………………………16
1.7.9　開發(fā)動態(tài)網站模塊 …………………………………16
1.7.10　申請域名和服務器空間 ……………………………16
1.7.11　測試并上傳網站 ……………………………………16
1.8　本章小結 …………………………………………16
1.9　課后習題 …………………………………………17
1.9.1　課后習題1：制作簡單的HTML頁面 ………………17
第2章　HTML整體結構設置 18
2.1　網頁頭部標簽 ……………………………18
2.1.1　網頁標題標簽…………………………………18
2.1.2　網頁說明description ………………………………19
2.1.3　網頁關鍵字keywords ………………………………19
2.1.4　網頁編碼格式charset ………………………………19
2.1.5　網頁編輯工具genrator………………………………20
2.1.6　網頁作者信息author ………………………………20
2.1.7　網頁定時跳轉refresh ………………………………20
課堂案例　綜合設置網頁頭信息 …………………………21
2.1.8　網頁基址標簽 ………………………………21
2.2　網頁主體標簽 ……………………………23
2.2.1　網頁邊距margin ……………………………………23
2.2.2　網頁默認文字顏色text ………………………………23
課堂案例　設置網頁文字 …………………………………24
2.2.3　默認鏈接文字link ……………………………………25
課堂案例　設置網頁鏈接文字 ……………………………26
2.2.4　網頁背景顏色bgcolor ………………………………27
2.2.5　網頁背景圖片background …………………………28
課堂案例　設置網頁背景效果 ……………………………28
2.3　本章小結 …………………………………………30
2.4　課后習題 …………………………………………30
2.4.1　課后習題1：設置插畫設計網站頭信息 ……………30
2.4.2　課后習題2：綜合設置網頁整體外觀 ………………30
第3章　HTML中文本與段落設置 32
3.1　網頁文本處理 ……………………………………32
3.1.1　在網頁中輸入文字的方法 …………………………32
3.1.2　在文本中插入空格 …………………………………32
3.1.3　插入特殊字符 ………………………………………33
課堂案例　在網頁中輸入文本 ……………………………34
課堂案例　對文本進行換行 ………………………………35
3.1.4　文本換行
標簽 …………………………………35
3.1.5　文本強制不換行標簽 ………………………35
3.1.6　文本分段標簽……………………………………36
課堂案例　段落文本處理 …………………………………37
3.1.7　段落文本對齊 ………………………………………37
3.2　設置網頁字體 ……………………………………38
3.2.1　設置字體 ……………………………………………38
3.2.2　設置文字大小 ………………………………………39
3.2.3　設置文字顏色 ………………………………………39
課堂案例　設置文字效果 …………………………………40
3.2.4　文字加粗和標簽 ………………………41
3.2.5　文字傾斜和標簽 …………………………41
3.2.6　文字下畫線標簽…………………………………41
課堂案例　修飾網頁中的文字 ……………………………42
3.2.7　上標與下標文字 ……………………………………43
3.2.8　標題文字至標簽 …………………………43
課堂案例　在網頁中創(chuàng)建標題文字 ………………………44
3.3　水平線 ……………………………………………45
3.3.1　在網頁中插入水平線 ………………………………45
3.3.2　設置水平線寬度和高度 ……………………………45
3.3.3　設置水平線的顏色 …………………………………46
3.3.4　水平線對齊方式 ……………………………………46
3.3.5　去除水平線陰影 ……………………………………46
課堂案例　為網頁文本添加水平分割線 …………………47
3.4　滾動文本 …………………………………………48
3.4.1　文本滾動標簽 …………………………48
3.4.2　設置文本滾動方向 …………………………………48
3.4.3　文本滾動的方式和速度 ……………………………48
課堂案例　制作網站滾動公告 ……………………………49
3.5　本章小結 …………………………………………51
3.6　課后習題 …………………………………………51
3.6.1　課后習題1：制作廣告促銷頁面 ……………………51
3.6.2　課后習題2：制作文章頁面 …………………………52
第4章　HTML中列表設置 54
4.1　HTML中列表的組成 ……………………………54
4.2　列表設置 …………………………………………54
4.2.1　無序列表標簽 …………………………………54
課堂案例　制作無序新聞列表 ……………………………55
4.2.2　有序列表標簽 …………………………………56
課堂案例　制作音樂排行榜 ………………………………57
4.2.3　定義列表標簽 …………………………………58
課堂案例　制作論壇列表 …………………………………58
4.2.4　目錄列表標簽 …………………………………59
4.2.5　菜單列表標簽 ………………………………60
4.3　本章小結 …………………………………………60
4.4　課后習題 …………………………………………60
4.4.1　課后習題1：制作網站新聞公告 ……………………60
4.4.2　課后習題2：制作玩家排行 …………………………61