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

第1章　HTML基礎(chǔ)
1.1　HTML的基本概念
1.1.1　HTML簡介
1.1.2　HTML文件的基本結(jié)構(gòu)
1.1.3　認(rèn)識HTML標(biāo)記
1.2　HTML文件的編寫方法
1.2.1　使用記事本手工編寫HTML
1.2.2　使用Dreamweaver編寫HTML文件
1.3　使用瀏覽器瀏覽HTML文件
1.3.1　查看頁面效果
1.3.2　查看源文件
1.4　練習(xí)題
第2章　HTML基本標(biāo)記
2.1　HTML頭部標(biāo)記head
2.2　標(biāo)題標(biāo)記title
2.3　元信息標(biāo)記meta
2.3.1　設(shè)置頁面關(guān)鍵字
2.3.2　設(shè)置頁面說明
2.3.3　定義編輯工具
2.3.4　設(shè)置作者信息
2.3.5　設(shè)置網(wǎng)頁文字及語言
2.3.6　設(shè)置網(wǎng)頁的定時(shí)跳轉(zhuǎn)
2.4　網(wǎng)頁的主體標(biāo)記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　頁面注釋標(biāo)記
2.6　練習(xí)題
第3章　文字與段落標(biāo)記
3.1　標(biāo)題字
3.1.1　標(biāo)題字標(biāo)記h
3.1.2　標(biāo)題字對齊屬性align
3.2　文本基本標(biāo)記
3.2.1　字體屬性face
3.2.2　字號屬性size
3.2.3　顏色屬性color
3.3　文本格式化標(biāo)記
3.3.1　粗體標(biāo)記b、strong
3.3.2　斜體標(biāo)記i、em、cite
3.3.3　上標(biāo)標(biāo)記sup
3.3.4　下標(biāo)標(biāo)記sub
3.3.5　大字號標(biāo)記big
3.3.6　小字號標(biāo)記small
3.3.7　下畫線標(biāo)記u
3.4　段落標(biāo)記
3.4.1　段落標(biāo)記p
3.4.2　換行標(biāo)記br
3.4.3　不換行標(biāo)記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　其他標(biāo)記
3.6.1　插入空格
3.6.2　插入特殊符號
3.7　練習(xí)題
第4章　使用圖像
4.1　圖像的格式
4.2　插入圖像
4.2.1　插入圖像標(biāo)記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　練習(xí)題
第5章　使用列表
5.1　認(rèn)識列表標(biāo)記
5.2　有序列表
5.2.1　有序列表ol
5.2.2　有序列表的序號類型type
5.2.3　有序列表的起始數(shù)值start
5.3　無序列表
5.3.1　無序列表標(biāo)記
5.3.2　無序列表的類型type
5.3.3　目錄列表標(biāo)記
5.3.4　定義列表標(biāo)記
5.3.5　菜單列表標(biāo)記
5.4　練習(xí)題
第6章　使用表格
6.1　創(chuàng)建表格
6.1.1　表格的基本構(gòu)成table、tr、td
6.1.2　設(shè)置表格的標(biāo)題caption
6.1.3　表頭th
6.2　表格基本屬性
6.2.1　表格寬度width
6.2.2　表格高度height
6.2.3　表格對齊方式align
6.3　表格的邊框
6.3.1　表格邊框?qū)挾萣order
6.3.2　表格邊框顏色bordercolor
6.3.3　內(nèi)框?qū)挾萩ellspacing
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　表格的結(jié)構(gòu)
6.7.1　表格的表首標(biāo)記
6.7.2　表格的表主體標(biāo)記
6.7.3　表格的表尾標(biāo)記
6.8　練習(xí)題
第7章　建立超鏈接
7.1　超鏈接的基本知識
7.1.1　絕對路徑
7.1.2　相對路徑
7.2　內(nèi)部鏈接
7.2.1　認(rèn)識內(nèi)部鏈接
7.2.2　鏈接的目標(biāo)窗口
7.3　錨點(diǎn)鏈接
7.3.1　建立錨點(diǎn)
7.3.2　鏈接同一頁面中的錨點(diǎn)
7.3.3　鏈接到其他頁面中的錨點(diǎn)
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　練習(xí)題
第8章　添加多媒體
8.1　設(shè)置滾動效果
8.1.1　滾動標(biāo)記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　設(shè)置背景音樂
8.3.1　背景音樂bgsound
8.3.2　循環(huán)次數(shù)loop
8.4　插入Java Applet
8.5　練習(xí)題
第9章　使用框架結(jié)構(gòu)
9.1　框架的基本概念
9.2　設(shè)置框架集的屬性frameset
9.2.1　水平分割窗口rows
9.2.2　垂直分割窗口cols
9.2.3　嵌套分割窗口
9.2.4　框架的邊框frameborder
9.2.5　框架的邊框?qū)挾萬ramespacing
9.2.6　框架的邊框顏色bordercolor
9.3　設(shè)置窗口屬性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　不支持框架標(biāo)記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　普通框架結(jié)構(gòu)的鏈接
9.5.2　浮動框架的鏈接
9.6　練習(xí)題
第10章　使用表單
10.1　表單標(biāo)記form
10.1.1　提交表單action
10.1.2　表單名稱name
10.1.3　傳送方法method
10.1.4　編碼方式enctype
10.1.5　目標(biāo)顯示方式target
10.2　插入表單對象
10.2.1　文字字段text
10.2.2　密碼域password
10.2.3　單選按鈕radio
10.2.4　復(fù)選框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　列表項(xiàng)
10.4　文本域標(biāo)記textarea
10.5　id標(biāo)記
10.6　創(chuàng)建表單實(shí)例
10.7　練習(xí)題
第11章　使用XHTML
11.1　XHTML簡介
11.1.1　什么是XHTML
11.1.2　為什么要升級到XHTML
11.2　XHTML頁面結(jié)構(gòu)
11.2.1　文檔類型聲明
11.2.2　元素和名字空間
11.2.3　網(wǎng)頁頭部元素
11.2.4　頁面標(biāo)題元素
11.2.5　頁面主體元素
11.3　XHTML語法規(guī)范
11.3.1　XHTML元素必須是完全嵌套的
11.3.2　XHTML文檔格式必須規(guī)范
11.3.3　標(biāo)簽名必須是小寫的
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)站轉(zhuǎn)換成XHTML
11.6　練習(xí)題
第12章　使用CSS樣式表
12.1　認(rèn)識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　字體風(fēng)格font-style
12.3.4　加粗字體font-weight
12.3.5　小寫字母轉(zhuǎn)為大寫font-variant
12.3.6　字體復(fù)合屬性
12.4　顏色和背景屬性
12.4.1　顏色屬性color
12.4.2　背景顏色background-color
12.4.3　背景圖像background-image
12.4.4　背景重復(fù)background-repeat
12.4.5　背景附件background-attachment
12.4.6　背景位置background-position
12.4.7　背景復(fù)合屬性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　文本轉(zhuǎn)換text-transform
12.5.6　水平對齊方式text-align
12.5.7　文本縮進(jìn)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　外邊距復(fù)合屬性margin
12.6.4　頂端內(nèi)邊距padding-top
12.6.5　其他內(nèi)邊距padding-bottom、padding-right、padding-left
12.6.6　內(nèi)邊距復(fù)合屬性padding
12.7　邊框?qū)傩?br />12.7.1　邊框樣式border-style
12.7.2　邊框?qū)挾萣order-width
12.7.3　邊框顏色border-color
12.7.4　邊框?qū)傩詁order
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　列表縮進(jìn)list-style-position
12.9.4　列表復(fù)合屬性list-style
12.10　光標(biāo)屬性cursor
12.11　濾鏡屬性
12.11.1　不透明度alpha
12.11.2　動感模糊blur
12.11.3　對顏色進(jìn)行透明處理chroma
12.11.4　陰影效果dropShadow
12.11.5　對象翻轉(zhuǎn)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　練習(xí)題
第13章　Web標(biāo)準(zhǔn)與CSS網(wǎng)頁布局實(shí)例
13.1　Web標(biāo)準(zhǔn)與CSS布局
13.1.1　什么是Web標(biāo)準(zhǔn)
13.1.2　CSS布局的優(yōu)勢
13.2　DIV+CSS布局網(wǎng)頁基礎(chǔ)
13.2.1　認(rèn)識DIV
13.2.2　一列固定寬度
13.2.3　一列自適應(yīng)
13.2.4　兩列固定寬度
13.2.5　兩列寬度自適應(yīng)
13.2.6　兩列右列寬度自適應(yīng)
13.3　使用CSS設(shè)計(jì)網(wǎng)站導(dǎo)航欄
13.3.1　實(shí)現(xiàn)背景變換的導(dǎo)航菜單
13.3.2　利用CSS制作橫向?qū)Ш?br />13.4　使用CSS設(shè)計(jì)表單樣式
13.4.1　改變按鈕的背景顏色和文字顏色
13.4.2　設(shè)計(jì)文本框的樣式
13.4.3　設(shè)計(jì)文本框中的文字樣式
13.5　字體及段落樣式設(shè)計(jì)
13.5.1　利用CSS控制字體大小和行距
13.5.2　制作光暈文字效果
13.6　使用CSS設(shè)計(jì)圖片樣式
13.6.1　鼠標(biāo)指針移上時(shí)圖片漸變的效果
13.6.2　設(shè)計(jì)不重復(fù)出現(xiàn)的背景
13.7　使用CSS控制鏈接樣式
13.7.1　使用CSS實(shí)現(xiàn)鼠標(biāo)指針形狀改變
13.7.2　鼠標(biāo)指針移到鏈接文字上時(shí)改變文字大小或顏色
13.8　練習(xí)題
第14章　JavaScript腳本基礎(chǔ)
14.1　JavaScript簡介
14.2　JavaScript基本語法
14.2.1　常量和變量
14.2.2　表達(dá)式和運(yùn)算符
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　練習(xí)題
第15章　利用JavaScript制作網(wǎng)頁特效
15.1　時(shí)間特效
15.1.1　顯示當(dāng)前時(shí)間
15.1.2　顯示當(dāng)前日期
15.1.3　顯示網(wǎng)頁停留時(shí)間
15.1.4　制作倒計(jì)時(shí)特效
15.2　圖像特效
15.2.1　當(dāng)鼠標(biāo)指針經(jīng)過圖像時(shí)圖像震動效果
15.2.2　圖片閃爍效果
15.2.3　自動切換圖像
15.3　窗口特效
15.3.1　全屏顯示窗口
15.3.2　定時(shí)關(guān)閉窗口
15.4　鼠標(biāo)特效
15.4.1　禁止鼠標(biāo)右擊
15.4.2　跟隨鼠標(biāo)指針移動的圖像
15.4.3　跟隨鼠標(biāo)指針的滾動字幕
15.5　其他特效
15.5.1　設(shè)置為首頁和加入收藏夾
15.5.2　瀏覽器狀態(tài)欄顯示信息
15.5.3　進(jìn)入網(wǎng)站的口令設(shè)置
15.6　練習(xí)題
第16章　在Dreamweaver中編輯HTML網(wǎng)頁
16.1　Dreamweaver的基本操作界面
16.2　在網(wǎng)頁中使用文本
16.2.1　插入文本
16.2.2　設(shè)置文本屬性
16.2.3　插入特殊字符
16.2.4　插入水平線
16.3　插入圖像
16.3.1　在網(wǎng)頁中插入圖像
16.3.2　設(shè)置圖像屬性
16.3.3　使用圖像編輯器
16.3.4　插入鼠標(biāo)經(jīng)過圖像
16.4　插入多媒體
16.4.1　插入Flash
16.4.2　打開瀏覽器窗口
16.4.3　插入Java Applet
16.5　設(shè)置鏈接
16.5.1　創(chuàng)建文字鏈接
16.5.2　創(chuàng)建圖像鏈接
16.5.3　創(chuàng)建錨點(diǎn)鏈接
16.6　布局網(wǎng)頁
16.6.1　使用表格
16.6.2　使用DIV
16.7　使用表單
16.7.1　插入表單
16.7.2　插入文本域
16.7.3　插入單選按鈕和復(fù)選框
16.7.4　插入菜單和列表
16.7.5　插入跳轉(zhuǎn)菜單
16.7.6　插入按鈕
16.8　使用CSS樣式表
16.8.1　CSS的基本概念
16.8.2　建立標(biāo)簽樣式
16.8.3　建立類樣式
16.8.4　建立復(fù)合內(nèi)容樣式
16.8.5　應(yīng)用CSS固定字體大小
16.9　使用行為
16.9.1　行為的基本知識
16.9.2　使用行為制作特效
16.10　在網(wǎng)頁中添加腳本
16.11　練習(xí)題
第17章　個(gè)人博客網(wǎng)站布局
17.1　博客網(wǎng)站概述
17.2　博客網(wǎng)站主頁布局設(shè)計(jì)
17.3　博客網(wǎng)站主頁具體制作過程
17.3.1　導(dǎo)入外部CSS
17.3.2　制作網(wǎng)頁頭部分
17.3.3　制作頁面內(nèi)容部分
17.3.4　制作頁面頁腳部分
17.4　練習(xí)題
第18章　公司宣傳網(wǎng)站的布局
18.1　企業(yè)網(wǎng)站設(shè)計(jì)分析
18.1.1　企業(yè)網(wǎng)站內(nèi)容設(shè)計(jì)
18.1.2　排版構(gòu)架
18.2　各部分設(shè)計(jì)
18.2.1　Logo與頂部導(dǎo)航
18.2.2　左側(cè)導(dǎo)航
18.2.3　主體內(nèi)容
18.2.4　制作搜索部分
18.2.5　制作公司新聞
18.2.6　制作聯(lián)系我們
18.2.7　底部版權(quán)信息
18.3　練習(xí)題
附錄A　HTML網(wǎng)頁制作技巧精講
技巧1　制作帶背景音樂的網(wǎng)頁
技巧2　設(shè)置每隔一定的時(shí)間自動刷新網(wǎng)頁
技巧3　提高站點(diǎn)在搜索引擎中被搜索到的機(jī)會
技巧4　讓站點(diǎn)自動跳轉(zhuǎn)到另一頁
技巧5　避免自己的圖片被其他站點(diǎn)利用
技巧6　不用表格而準(zhǔn)確地分隔圖片和文字
技巧7　跳到頁面的頂部
技巧8　在一個(gè)站點(diǎn)的不同頁面播放同一個(gè)聲音文件
技巧9　清除頁面中的框架結(jié)構(gòu)
技巧10　防止站點(diǎn)頁面被任意鏈接
技巧11　為文字鏈接加上提示
技巧12　刪除圖片鏈接的藍(lán)色邊框
技巧13　讓瀏覽器正確顯示word格式文件
技巧14　利用水平線制作垂直線
技巧15　正確選擇JPG和GIF圖片格式
技巧16　正確使用分隔線
技巧17　去除頁面四周的空白
技巧18　去除瀏覽器的滾動條
附錄B　CSS常用技巧精講
技巧1　去掉網(wǎng)頁超鏈接的下畫線
技巧2　設(shè)置浮動背景
技巧3　正確對齊文本
技巧4　超鏈接訪問過后防止hover樣式出現(xiàn)問題
技巧5　解決list-style-image無法準(zhǔn)確定位的問題
技巧6　讓文本垂直居中
技巧7　使一個(gè)層垂直居中于瀏覽器
技巧8　給部分內(nèi)容加上邊框
技巧9　利用CSS去掉下畫線
技巧10　讓div橫向排列
技巧11　巧妙設(shè)置滾動條顏色
附錄C　JavaScript特效制作精講
技巧1　添加鏈接提示
技巧2　在網(wǎng)頁中加入最后修改日期
技巧3　實(shí)現(xiàn)圖片循環(huán)隱現(xiàn)的效果
技巧4　給圖像添加探照燈效果
技巧5　打開一個(gè)新的瀏覽器窗口并設(shè)置窗口的屬性
技巧6　利用單擊來關(guān)閉瀏覽器窗口
技巧7　禁止保存網(wǎng)頁
技巧8　制作網(wǎng)頁中雪花飄飄效果
技巧9　在狀態(tài)欄中顯示跑馬燈效果
技巧10　制作煙花效果
技巧11　制作狀態(tài)欄數(shù)字時(shí)鐘
技巧12　制作圍繞鼠標(biāo)指針旋轉(zhuǎn)的文本
技巧13　制作跟隨鼠標(biāo)指針飄動的雙層時(shí)鐘
技巧14　實(shí)現(xiàn)每天不同時(shí)間顯示不同信息
技巧15　禁止鼠標(biāo)右鍵和左鍵對頁面的操作
技巧16　實(shí)現(xiàn)鼠標(biāo)指針移上時(shí)圖片加亮的效果
技巧17　讓網(wǎng)頁中跳出一個(gè)會說話的老人
技巧18　讓瀏覽者知道自己訪問網(wǎng)頁的次數(shù)
技巧19　禁止頁面最小化
技巧20　設(shè)置網(wǎng)頁由中間向外擴(kuò)大變化
附錄D　Dreamweaver常用技巧精講
技巧1　在Dreamweaver中插入空格
技巧2　在Dreamweaver中設(shè)置Flash動畫的背景透明
技巧3　在Dreamweaver中準(zhǔn)確定位層
技巧4　把別人網(wǎng)頁上的背景音樂保存下來
技巧5　使網(wǎng)頁在不同分辨率下都全屏鋪開
技巧6　在Dreamweaver中給水平線加顏色
技巧7　在網(wǎng)頁中實(shí)現(xiàn)Flash的全屏播放
技巧8　怎么樣讓在800×600分辨率下生成的網(wǎng)頁在1024×768分辨率下居中顯示
技巧9　清除網(wǎng)頁中不必要的HTML代碼
技巧10　在網(wǎng)頁中添加E-mail鏈接并顯示預(yù)定的主題
技巧11　在網(wǎng)頁中添加電子郵件表單提交
技巧12　防止別人把自己的網(wǎng)頁放在框架里
技巧13　巧妙實(shí)現(xiàn)兩個(gè)表格的并排