HTML、CSS、JavaScript網(wǎng)頁制作從入門到精通

第1章　HTML基礎
1.1　HTML的基本概念
1.1.1　HTML簡介
1.1.2　HTML文件的基本結構
1.1.3　認識HTML標記
1.2　HTML文件的編寫方法
1.2.1　使用記事本手工編寫HTML
1.2.2　使用Dreamweaver編寫HTML文件
1.3　使用瀏覽器瀏覽HTML文件
1.3.1　查看頁面效果
1.3.2　查看源文件
1.4　練習題
第2章　HTML基本標記
2.1　HTML頭部標記head
2.2　標題標記title
2.3　元信息標記meta
2.3.1　設置頁面關鍵字
2.3.2　設置頁面說明
2.3.3　定義編輯工具
2.3.4　設置作者信息
2.3.5　設置網(wǎng)頁文字及語言
2.3.6　設置網(wǎng)頁的定時跳轉
2.4　網(wǎng)頁的主體標記body
2.4.1　網(wǎng)頁背景色bgcolor
2.4.2　網(wǎng)頁背景圖片background
2.4.3　文字顏色text
2.4.4　鏈接文字屬性link
2.4.5　邊距margin
2.5　頁面注釋標記
2.6　練習題
第3章　文字與段落標記
3.1　標題字
3.1.1　標題字標記h
3.1.2　標題字對齊屬性align
3.2　文本基本標記
3.2.1　字體屬性face
3.2.2　字號屬性size
3.2.3　顏色屬性color
3.3　文本格式化標記
3.3.1　粗體標記b、strong
3.3.2　斜體標記i、em、cite
3.3.3　上標標記sup
3.3.4　下標標記sub
3.3.5　大字號標記big
3.3.6　小字號標記small
3.3.7　下畫線標記u
3.4　段落標記
3.4.1　段落標記p
3.4.2　換行標記br
3.4.3　不換行標記nobr
3.5　水平線
3.5.1　插入水平線hr
3.5.2　水平線寬度width
3.5.3　水平線高度size
3.5.4　水平線去掉陰影noshade
3.5.5　水平線顏色color
3.5.6　水平線排列align
3.6　其他標記
3.6.1　插入空格
3.6.2　插入特殊符號
3.7　練習題
第4章　使用圖像
4.1　圖像的格式
4.2　插入圖像
4.2.1　插入圖像標記img
4.2.2　圖像的源文件src
4.2.3　圖像的提示文字alt
4.2.4　圖像的寬度和高度width、height
4.2.5　圖像的邊框border
4.2.6　圖像的垂直邊距vspace
4.2.7　圖像的水平間距hspace
4.2.8　圖像的排列align
4.3　圖像的超鏈接
4.3.1　圖像的超鏈接
4.3.2　圖像熱區(qū)鏈接
4.4　練習題
第5章　使用列表
5.1　認識列表標記
5.2　有序列表
5.2.1　有序列表ol
5.2.2　有序列表的序號類型type
5.2.3　有序列表的起始數(shù)值start
5.3　無序列表
5.3.1　無序列表標記
5.3.2　無序列表的類型type
5.3.3　目錄列表標記
5.3.4　定義列表標記
5.3.5　菜單列表標記
5.4　練習題
第6章　使用表格
6.1　創(chuàng)建表格
6.1.1　表格的基本構成table、tr、td
6.1.2　設置表格的標題caption
6.1.3　表頭th
6.2　表格基本屬性
6.2.1　表格寬度width
6.2.2　表格高度height
6.2.3　表格對齊方式align
6.3　表格的邊框
6.3.1　表格邊框寬度border
6.3.2　表格邊框顏色bordercolor
6.3.3　內(nèi)框寬度cellspacing
6.3.4　表格內(nèi)文字與邊框間距cellpadding
6.4　表格背景
6.4.1　表格背景顏色bgcolor
6.4.2　表格背景圖像
6.5　表格的行屬性
6.5.1　高度控制height
6.5.2　邊框顏色bordercolor
6.5.3　行背景bgcolor、background
6.5.4　行文字的水平對齊方式align
6.5.5　行文字的垂直對齊方式valign
6.6　單元格屬性
6.6.1　單元格大小width、height
6.6.2　水平跨度colspan
6.6.3　垂直跨度rowspan
6.6.4　對齊方式align、valign
6.6.5　單元格的背景色
6.6.6　單元格的邊框顏色bordercolor
6.6.7　單元格的亮邊框bordercolorlight
6.6.8　單元格的暗邊框bordercolordark
6.6.9　單元格的背景圖像background
6.7　表格的結構
6.7.1　表格的表首標記
6.7.2　表格的表主體標記
6.7.3　表格的表尾標記
6.8　練習題
第7章　建立超鏈接
7.1　超鏈接的基本知識
7.1.1　絕對路徑
7.1.2　相對路徑
7.2　內(nèi)部鏈接
7.2.1　認識內(nèi)部鏈接
7.2.2　鏈接的目標窗口
7.3　錨點鏈接
7.3.1　建立錨點
7.3.2　鏈接同一頁面中的錨點
7.3.3　鏈接到其他頁面中的錨點
7.4　外部鏈接
7.4.1　鏈接到外部網(wǎng)站
7.4.2　鏈接到E-mail
7.4.3　鏈接到FTP
7.4.4　鏈接到Telnet
7.4.5　下載文件
7.5　練習題
第8章　添加多媒體
8.1　設置滾動效果
8.1.1　滾動標記marquee
8.1.2　滾動方向direction
8.1.3　滾動方式behavior
8.1.4　滾動速度scrollamount
8.1.5　滾動延遲scrolldelay
8.1.6　滾動循環(huán)loop
8.1.7　滾動范圍width、height
8.1.8　滾動背景顏色bgcolor
8.1.9　空白空間hspace、vspace
8.2　插入多媒體文件
8.2.1　插入Flash動畫
8.2.2　插入音頻和視頻文件
8.3　設置背景音樂
8.3.1　背景音樂bgsound
8.3.2　循環(huán)次數(shù)loop
8.4　插入Java Applet
8.5　練習題
第9章　使用框架結構
9.1　框架的基本概念
9.2　設置框架集的屬性frameset
9.2.1　水平分割窗口rows
9.2.2　垂直分割窗口cols
9.2.3　嵌套分割窗口
9.2.4　框架的邊框frameborder
9.2.5　框架的邊框寬度framespacing
9.2.6　框架的邊框顏色bordercolor
9.3　設置窗口屬性frame
9.3.1　頁面源文件src
9.3.2　頁面名稱name
9.3.3　禁止調(diào)整窗口的尺寸noresize
9.3.4　邊框與頁面內(nèi)容的水平邊距marginwidth
9.3.5　邊框與頁面內(nèi)容的垂直邊距marginheight
9.3.6　控制框架滾動條顯示scrolling
9.3.7　不支持框架標記noframes
9.4　浮動框架iframe
9.4.1　頁面源文件src
9.4.2　浮動框架的寬和高width、height
9.4.3　浮動框架的對齊方式align
9.4.4　浮動框架滾動條顯示屬性scrolling
9.5　創(chuàng)建框架鏈接
9.5.1　普通框架結構的鏈接
9.5.2　浮動框架的鏈接
9.6　練習題
第10章　使用表單
10.1　表單標記form
10.1.1　提交表單action
10.1.2　表單名稱name
10.1.3　傳送方法method
10.1.4　編碼方式enctype
10.1.5　目標顯示方式target
10.2　插入表單對象
10.2.1　文字字段text
10.2.2　密碼域password
10.2.3　單選按鈕radio
10.2.4　復選框checkbox
10.2.5　普通按鈕button
10.2.6　提交按鈕submit
10.2.7　重置按鈕reset
10.2.8　圖像域image
10.2.9　隱藏域hidden
10.2.10　文件域file
10.3　菜單和列表
10.3.1　下拉菜單
10.3.2　列表項
10.4　文本域標記textarea
10.5　id標記
10.6　創(chuàng)建表單實例
10.7　練習題
第11章　使用XHTML
11.1　XHTML簡介
11.1.1　什么是XHTML
11.1.2　為什么要升級到XHTML
11.2　XHTML頁面結構
11.2.1　文檔類型聲明
11.2.2　元素和名字空間
11.2.3　網(wǎng)頁頭部元素
11.2.4　頁面標題元素
11.2.5　頁面主體元素
11.3　XHTML語法規(guī)范
11.3.1　XHTML元素必須是完全嵌套的
11.3.2　XHTML文檔格式必須規(guī)范
11.3.3　標簽名必須是小寫的
11.3.4　所有的XHTML元素都必須有始有終
11.3.5　用id屬性代替name屬性
11.3.6　DOCTYPE聲明是不可缺少的
11.3.7　屬性必須加上英文雙引號
11.3.8　明確所有屬性的值
11.4　在Dreamweaver中編輯XHTML文件
11.5　將現(xiàn)有的HTML網(wǎng)站轉換成XHTML
11.6　練習題
第12章　使用CSS樣式表
12.1　認識CSS
12.2　使用CSS
12.2.1　CSS的基本語法
12.2.2　添加CSS的方法
12.3　字體屬性
12.3.1　字體font-family
12.3.2　字號font-size
12.3.3　字體風格font-style
12.3.4　加粗字體font-weight
12.3.5　小寫字母轉為大寫font-variant
12.3.6　字體復合屬性
12.4　顏色和背景屬性
12.4.1　顏色屬性color
12.4.2　背景顏色background-color
12.4.3　背景圖像background-image
12.4.4　背景重復background-repeat
12.4.5　背景附件background-attachment
12.4.6　背景位置background-position
12.4.7　背景復合屬性background
12.5　段落屬性
12.5.1　單詞間隔word-spacing
12.5.2　字符間隔letter-spacing
12.5.3　文字修飾text-decoration
12.5.4　垂直對齊方式vertical-align
12.5.5　文本轉換text-transform
12.5.6　水平對齊方式text-align
12.5.7　文本縮進text-indent
12.5.8　文本行高line-height
12.5.9　處理空白white-space
12.5.10　文本反排unicode-bidi、direction
12.6　外邊距與內(nèi)邊距屬性
12.6.1　上邊距margin-top
12.6.2　其他邊距margin-bottom、margin-left、margin-right
12.6.3　外邊距復合屬性margin
12.6.4　頂端內(nèi)邊距padding-top
12.6.5　其他內(nèi)邊距padding-bottom、padding-right、padding-left
12.6.6　內(nèi)邊距復合屬性padding
12.7　邊框屬性
12.7.1　邊框樣式border-style
12.7.2　邊框寬度border-width
12.7.3　邊框顏色border-color
12.7.4　邊框屬性border
12.8　定位屬性
12.8.1　定位方式position
12.8.2　元素位置top、right、bottom、left
12.8.3　層疊順序z-index
12.8.4　浮動屬性float
12.8.5　清除屬性clear
12.8.6　可視區(qū)域clip
12.8.7　層的寬度和高度width、height
12.8.8　超出范圍overflow
12.8.9　可見屬性visibility
12.9　列表屬性
12.9.1　列表符號list-style-type
12.9.2　圖像符號list-style-image
12.9.3　列表縮進list-style-position
12.9.4　列表復合屬性list-style
12.10　光標屬性cursor
12.11　濾鏡屬性
12.11.1　不透明度alpha
12.11.2　動感模糊blur
12.11.3　對顏色進行透明處理chroma
12.11.4　陰影效果dropShadow
12.11.5　對象翻轉flipH、flipV
12.11.6　發(fā)光效果glow
12.11.7　灰度處理gray
12.11.8　反相invert
12.11.9　X光片效果xray
12.11.10　遮罩效果mask
12.11.11　波形濾鏡wave
12.12　練習題
第13章　Web標準與CSS網(wǎng)頁布局實例
13.1　Web標準與CSS布局
13.1.1　什么是Web標準
13.1.2　CSS布局的優(yōu)勢
13.2　DIV+CSS布局網(wǎng)頁基礎
13.2.1　認識DIV
13.2.2　一列固定寬度
13.2.3　一列自適應
13.2.4　兩列固定寬度
13.2.5　兩列寬度自適應
13.2.6　兩列右列寬度自適應
13.3　使用CSS設計網(wǎng)站導航欄
13.3.1　實現(xiàn)背景變換的導航菜單
13.3.2　利用CSS制作橫向導航
13.4　使用CSS設計表單樣式
13.4.1　改變按鈕的背景顏色和文字顏色
13.4.2　設計文本框的樣式
13.4.3　設計文本框中的文字樣式
13.5　字體及段落樣式設計
13.5.1　利用CSS控制字體大小和行距
13.5.2　制作光暈文字效果
13.6　使用CSS設計圖片樣式
13.6.1　鼠標指針移上時圖片漸變的效果
13.6.2　設計不重復出現(xiàn)的背景
13.7　使用CSS控制鏈接樣式
13.7.1　使用CSS實現(xiàn)鼠標指針形狀改變
13.7.2　鼠標指針移到鏈接文字上時改變文字大小或顏色
13.8　練習題
第14章　JavaScript腳本基礎
14.1　JavaScript簡介
14.2　JavaScript基本語法
14.2.1　常量和變量
14.2.2　表達式和運算符
14.2.3　基本語句
14.2.4　函數(shù)
14.3　JavaScript的事件
14.3.1　onClick事件
14.3.2　onchange事件
14.3.3　onSelect事件
14.3.4　onFocus事件
14.3.5　onLoad事件
14.3.6　onUnload事件
14.3.7　onBlur事件
14.3.8　onMouseOver事件
14.3.9　onMouseOut事件
14.3.10　onDblClick事件
14.3.11　其他常用事件
14.4　瀏覽器的內(nèi)部對象
14.4.1　navigator對象
14.4.2　document對象
14.4.3　windows對象
14.4.4　location對象
14.4.5　history對象
14.5　練習題
第15章　利用JavaScript制作網(wǎng)頁特效
15.1　時間特效
15.1.1　顯示當前時間
15.1.2　顯示當前日期
15.1.3　顯示網(wǎng)頁停留時間
15.1.4　制作倒計時特效
15.2　圖像特效
15.2.1　當鼠標指針經(jīng)過圖像時圖像震動效果
15.2.2　圖片閃爍效果
15.2.3　自動切換圖像
15.3　窗口特效
15.3.1　全屏顯示窗口
15.3.2　定時關閉窗口
15.4　鼠標特效
15.4.1　禁止鼠標右擊
15.4.2　跟隨鼠標指針移動的圖像
15.4.3　跟隨鼠標指針的滾動字幕
15.5　其他特效
15.5.1　設置為首頁和加入收藏夾
15.5.2　瀏覽器狀態(tài)欄顯示信息
15.5.3　進入網(wǎng)站的口令設置
15.6　練習題
第16章　在Dreamweaver中編輯HTML網(wǎng)頁
16.1　Dreamweaver的基本操作界面
16.2　在網(wǎng)頁中使用文本
16.2.1　插入文本
16.2.2　設置文本屬性
16.2.3　插入特殊字符
16.2.4　插入水平線
16.3　插入圖像
16.3.1　在網(wǎng)頁中插入圖像
16.3.2　設置圖像屬性
16.3.3　使用圖像編輯器
16.3.4　插入鼠標經(jīng)過圖像
16.4　插入多媒體
16.4.1　插入Flash
16.4.2　打開瀏覽器窗口
16.4.3　插入Java Applet
16.5　設置鏈接
16.5.1　創(chuàng)建文字鏈接
16.5.2　創(chuàng)建圖像鏈接
16.5.3　創(chuàng)建錨點鏈接
16.6　布局網(wǎng)頁
16.6.1　使用表格
16.6.2　使用DIV
16.7　使用表單
16.7.1　插入表單
16.7.2　插入文本域
16.7.3　插入單選按鈕和復選框
16.7.4　插入菜單和列表
16.7.5　插入跳轉菜單
16.7.6　插入按鈕
16.8　使用CSS樣式表
16.8.1　CSS的基本概念
16.8.2　建立標簽樣式
16.8.3　建立類樣式
16.8.4　建立復合內(nèi)容樣式
16.8.5　應用CSS固定字體大小
16.9　使用行為
16.9.1　行為的基本知識
16.9.2　使用行為制作特效
16.10　在網(wǎng)頁中添加腳本
16.11　練習題
第17章　個人博客網(wǎng)站布局
17.1　博客網(wǎng)站概述
17.2　博客網(wǎng)站主頁布局設計
17.3　博客網(wǎng)站主頁具體制作過程
17.3.1　導入外部CSS
17.3.2　制作網(wǎng)頁頭部分
17.3.3　制作頁面內(nèi)容部分
17.3.4　制作頁面頁腳部分
17.4　練習題
第18章　公司宣傳網(wǎng)站的布局
18.1　企業(yè)網(wǎng)站設計分析
18.1.1　企業(yè)網(wǎng)站內(nèi)容設計
18.1.2　排版構架
18.2　各部分設計
18.2.1　Logo與頂部導航
18.2.2　左側導航
18.2.3　主體內(nèi)容
18.2.4　制作搜索部分
18.2.5　制作公司新聞
18.2.6　制作聯(lián)系我們
18.2.7　底部版權信息
18.3　練習題
附錄A　HTML網(wǎng)頁制作技巧精講
技巧1　制作帶背景音樂的網(wǎng)頁
技巧2　設置每隔一定的時間自動刷新網(wǎng)頁
技巧3　提高站點在搜索引擎中被搜索到的機會
技巧4　讓站點自動跳轉到另一頁
技巧5　避免自己的圖片被其他站點利用
技巧6　不用表格而準確地分隔圖片和文字
技巧7　跳到頁面的頂部
技巧8　在一個站點的不同頁面播放同一個聲音文件
技巧9　清除頁面中的框架結構
技巧10　防止站點頁面被任意鏈接
技巧11　為文字鏈接加上提示
技巧12　刪除圖片鏈接的藍色邊框
技巧13　讓瀏覽器正確顯示word格式文件
技巧14　利用水平線制作垂直線
技巧15　正確選擇JPG和GIF圖片格式
技巧16　正確使用分隔線
技巧17　去除頁面四周的空白
技巧18　去除瀏覽器的滾動條
附錄B　CSS常用技巧精講
技巧1　去掉網(wǎng)頁超鏈接的下畫線
技巧2　設置浮動背景
技巧3　正確對齊文本
技巧4　超鏈接訪問過后防止hover樣式出現(xiàn)問題
技巧5　解決list-style-image無法準確定位的問題
技巧6　讓文本垂直居中
技巧7　使一個層垂直居中于瀏覽器
技巧8　給部分內(nèi)容加上邊框
技巧9　利用CSS去掉下畫線
技巧10　讓div橫向排列
技巧11　巧妙設置滾動條顏色
附錄C　JavaScript特效制作精講
技巧1　添加鏈接提示
技巧2　在網(wǎng)頁中加入最后修改日期
技巧3　實現(xiàn)圖片循環(huán)隱現(xiàn)的效果
技巧4　給圖像添加探照燈效果
技巧5　打開一個新的瀏覽器窗口并設置窗口的屬性
技巧6　利用單擊來關閉瀏覽器窗口
技巧7　禁止保存網(wǎng)頁
技巧8　制作網(wǎng)頁中雪花飄飄效果
技巧9　在狀態(tài)欄中顯示跑馬燈效果
技巧10　制作煙花效果
技巧11　制作狀態(tài)欄數(shù)字時鐘
技巧12　制作圍繞鼠標指針旋轉的文本
技巧13　制作跟隨鼠標指針飄動的雙層時鐘
技巧14　實現(xiàn)每天不同時間顯示不同信息
技巧15　禁止鼠標右鍵和左鍵對頁面的操作
技巧16　實現(xiàn)鼠標指針移上時圖片加亮的效果
技巧17　讓網(wǎng)頁中跳出一個會說話的老人
技巧18　讓瀏覽者知道自己訪問網(wǎng)頁的次數(shù)
技巧19　禁止頁面最小化
技巧20　設置網(wǎng)頁由中間向外擴大變化
附錄D　Dreamweaver常用技巧精講
技巧1　在Dreamweaver中插入空格
技巧2　在Dreamweaver中設置Flash動畫的背景透明
技巧3　在Dreamweaver中準確定位層
技巧4　把別人網(wǎng)頁上的背景音樂保存下來
技巧5　使網(wǎng)頁在不同分辨率下都全屏鋪開
技巧6　在Dreamweaver中給水平線加顏色
技巧7　在網(wǎng)頁中實現(xiàn)Flash的全屏播放
技巧8　怎么樣讓在800×600分辨率下生成的網(wǎng)頁在1024×768分辨率下居中顯示
技巧9　清除網(wǎng)頁中不必要的HTML代碼
技巧10　在網(wǎng)頁中添加E-mail鏈接并顯示預定的主題
技巧11　在網(wǎng)頁中添加電子郵件表單提交
技巧12　防止別人把自己的網(wǎng)頁放在框架里
技巧13　巧妙實現(xiàn)兩個表格的并排