HTML+CSS+JavaScript網(wǎng)頁設(shè)計實用教程

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