動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)案例教程

第1章  HTML 4. 0簡介                  
 1. 1  初識(shí)HTML                  
 1. 1. 1  HTML是什么                  
 1. 1. 2　初步嘗試                  
 1. 1. 3　HTML文檔的注釋                  
 1. 2　文檔頭                  
 1. 2. 1　可在文檔頭部分使用的標(biāo)識(shí)符                  
 1. 2. 2  meta標(biāo)識(shí)符                  
 1. 3　網(wǎng)頁的頁面屬性                  
 1. 3. 1　定義背景色. 背景圖片和文字色彩                  
 1. 3. 2　設(shè)置網(wǎng)頁空白                  
 1. 4　鏈接                  
 1. 4. 1　基本語法                  
 1. 4. 2　在新窗口中打開鏈接                  
 1. 4. 3　用鏈接實(shí)現(xiàn)發(fā)信                  
 1. 5　字體樣式                  
 1. 5. 1　標(biāo)題字體                  
 1. 5. 2　設(shè)置字號(hào)                  
 1. 5. 3　設(shè)置物理字體和邏輯字體                  
 1. 5. 4　設(shè)置字模                  
 1. 5. 5　設(shè)置文字顏色                  
 1. 5. 6　字體設(shè)置標(biāo)識(shí)符的組合使用                  
 1. 6　網(wǎng)頁布局                  
 1. 6. 1　設(shè)置標(biāo)尺線                  
 1. 6. 2　行的控制                  
 1. 6. 3　文字的對(duì)齊方式                  
 1. 6. 4　列表                  
 1. 6. 5　預(yù)排格式化文本                  
 1. 6. 6　標(biāo)識(shí)符＜address＞和＜／address＞                  
 1. 6. 7  標(biāo)識(shí)符＜blockquote＞和＜／blockquote＞                  
 1. 6. 8  空白區(qū)域                  
 1. 7　圖像                  
 1. 7. 1　基本語法                  
 1. 7. 2　圖像在網(wǎng)頁中的布局                  
 1. 7. 3　設(shè)置圖像的大小和邊框?qū)挾?nbsp;                 
 1. 8　表格                  
 1. 8. 1　定義表格的基本語法                  
 1. 8. 2　設(shè)置表格外觀                  
 1. 8. 3　跨多行多列的表元                  
 1. 8. 4  控制表格內(nèi)文字的布局                  
 1. 8. 5  控制表格在網(wǎng)頁中的布局                  
 1. 9　多窗口結(jié)構(gòu)                  
 1. 9. 1　基本語法                  
 1. 9. 2　設(shè)置各窗口的尺寸                  
 1. 9. 3　框架的嵌套                  
 1. 9. 4　框架各窗口之間的關(guān)系                  
 1. 9. 5　設(shè)置框架的外觀                  
 1. 9. 6　浮動(dòng)窗口                  
 1. 10　表單                  
 1. 10. 1　表單的基本結(jié)構(gòu)                  
 1. 10. 2  普通按鈕和圖像按鈕                  
 1. 10. 3　下拉菜單                  
 1. 10. 4　復(fù)選框                  
 1. 10. 5　單選按鈕                  
 1. 10. 6　提交和重置按鈕                  
 1. 10. 7　文字和密碼輸入                  
 1. 10. 8　文本區(qū)域                  
 1. 11?。糞cript＞. ＜Applet＞和＜Style＞標(biāo)識(shí)符                  
 1. 12　本章知識(shí)點(diǎn)回顧                  
 第2章  CSS基礎(chǔ)                  
 2. 1　范例1：設(shè)置鏈接效果                  
 2. 1. 1　效果說明                  
 2. 1. 2　樣式表的基本結(jié)構(gòu)                  
 2. 1. 3　設(shè)置鏈接效果的樣式規(guī)則                  
 2. 1. 4　把樣式表嵌入到HTML文檔頭                  
 2. 1. 5　樣式表和HTML的關(guān)系                  
 2. 2　范例2：設(shè)置鼠標(biāo)光標(biāo)的形狀                  
 2. 2. 1　效果說明                  
 2. 2. 2　用于設(shè)置鼠標(biāo)光標(biāo)形狀的樣式規(guī)則                  
 2. 2. 3　在代碼行中加入樣式                  
 2. 2. 4　指定鼠標(biāo)光標(biāo)的形狀                  
 2. 3　范例3：首字下沉與首行大寫                  
 2. 3. 1　效果說明                  
 2. 3. 2　分類                  
 2. 3. 3　使用分類實(shí)現(xiàn)首字下沉和首行大寫                  
 2. 3. 4　情景選擇                  
 2. 3. 5　使用情景選擇實(shí)現(xiàn)首字下沉和首行大寫                  
 2. 4　范例4：為不同文本定義不同樣式                  
 2. 4. 1　效果說明                  
 2. 4. 2  class屬性                  
 2. 4. 3　id屬性                  
 2. 4. 4  span元素                  
 2. 4. 5  div元素                  
 2. 4. 6　使用多個(gè)樣式規(guī)則時(shí)的優(yōu)先級(jí)                  
 2. 5　范例5：外部CSS文件                  
 2. 5. 1　將樣式表嵌入HTML文檔的方法                  
 2. 5. 2　鏈接到外部CSS文件                  
 2. 5. 3　輸入外部樣式表                  
 2. 6　本章知識(shí)點(diǎn)回顧                  
 第3章　設(shè)置字體樣式                  
 3. 1　范例6：字體風(fēng)格                  
 3. 1. 1　效果說明                  
 3. 1. 2　設(shè)置字體風(fēng)格的樣式規(guī)則                  
 3. 1. 3　創(chuàng)建步驟                  
 3. 2　范例7：按照字模系列名稱調(diào)用字體                  
 3. 2. 1　效果說明                  
 3. 2. 2　設(shè)置字模系列的樣式規(guī)則                  
 3. 2. 3　創(chuàng)建步驟                  
 3. 3　范例8：自由控制字號(hào)                  
 3. 3. 1　控制字號(hào)的樣式規(guī)則                  
 3. 3. 2　以point為單位控制字號(hào)                  
 3. 3. 3  以em為單位控制字號(hào)                  
 3. 3. 4　以pixel為單位控制字號(hào)                  
 3. 3. 5　以其他單位控制字號(hào)                  
 3. 3. 6　使用關(guān)鍵字控制字號(hào)                  
 3. 3. 7　使用比例尺寸控制字號(hào)                  
 3. 4　范例9：控制字重                  
 3. 4. 1  效果說明                  
 3. 4. 2　設(shè)置字重的樣式規(guī)則                  
 3. 5　范例10：文字變形                  
 3. 5. 1　效果說明                  
 3. 5. 2　設(shè)置文字變形的樣式規(guī)則                  
 3. 6　范例11：文字修飾                  
 3. 6. 1　效果說明                  
 3. 6. 2　設(shè)置文字修飾的樣式規(guī)則                  
 3. 7  范例12：設(shè)置文字的顏色                  
 3. 7. 1　使用英文名稱來設(shè)置顏色                  
 3. 7. 2　使用16進(jìn)制數(shù)來設(shè)置顏色                  
 3. 7. 3　使用rgb模式來設(shè)置顏色                  
 3. 8　范例13：設(shè)置文字的背景顏色                  
 3. 8. 1　設(shè)置黑底白字效果                  
 3. 8. 2　為多種網(wǎng)頁元素設(shè)置背景顏色                  
 3. 9　范例14：設(shè)置文字的背景圖像                  
 3. 9. 1　設(shè)置背景圖像的樣式規(guī)則                  
 3. 9. 2　設(shè)置背景圖像的范例                  
 3. 10　范例15：控制文字是否顯示                  
 3. 10. 1　display屬性                  
 3. 10. 2　范例                  
 3. 11　范例16：設(shè)置列表項(xiàng)的標(biāo)記                  
 3. 11. 1　list－style－type屬性                  
 3. 11. 2　使用list－style－type屬性設(shè)置UL標(biāo)記                  
 3. 11. 3　使用list－style－type屬性設(shè)置OL標(biāo)記                  
 3. 11. 4  list－style－image屬性                  
 3. 11. 5  list－style屬性                  
 3. 12　范例17：筆記本網(wǎng)頁效果                  
 3. 12. 1　效果說明                  
 3. 12. 2　代碼                  
 3. 12. 3　font屬性                  
 3. 13　本章知識(shí)點(diǎn)回顧                  
 第4章　控制頁面布局                  
 4. 1　范例18：設(shè)置字母間距和單詞間距                  
 4. 1. 1　設(shè)置字母間距                  
 4. 1. 2　設(shè)置單詞間距                  
 4. 2　范例19：控制行距                  
 4. 2. 1　控制行距的方法                  
 4. 2. 2　用數(shù)字設(shè)置行高                  
 4. 2. 3　使用長度單位設(shè)置行高                  
 4. 2. 4　使用比例設(shè)置行高                  
 4. 3　范例20：讓文字互相重疊                  
 4. 4　范例21：文字對(duì)齊                  
 4. 4. 1　樣式規(guī)則                  
 4. 4. 2　水平對(duì)齊的一個(gè)范例                  
 4. 4. 3　對(duì)表格的各表元內(nèi)容進(jìn)行對(duì)齊的范例                  
 4. 5　范例22：文字縮行                  
 4. 5. 1　樣式規(guī)則                  
 4. 5. 2　縮行的范例                  
 4. 6　范例23：設(shè)置空白區(qū)域                  
 4. 6. 1　box與間隙. 邊框. 空白區(qū)域                  
 4. 6. 2　設(shè)置空白區(qū)域的樣式規(guī)則                  
 4. 6. 3　設(shè)置空白區(qū)域的范例                  
 4. 7　范例24：設(shè)置間隙和邊框                  
 4. 7. 1　設(shè)置間隙的樣式規(guī)則                  
 4. 7. 2　邊框的4個(gè)屬性                  
 4. 7. 3　設(shè)置邊框的寬度                  
 4. 7. 4　設(shè)置邊框的顏色                  
 4. 7. 5  設(shè)置邊框的風(fēng)格                  
 4. 7. 6  設(shè)置邊框的范例                  
 4. 7. 7　設(shè)置間隙和邊框的范例                  
 4. 8　范例25：設(shè)置環(huán)繞效果                  
 4. 8. 1　設(shè)置環(huán)繞的樣式規(guī)則                  
 4. 8. 2　設(shè)置環(huán)繞的范例                  
 4. 9　范例26：設(shè)置背景                  
 4. 9. 1　添加背景顏色和背景圖像                  
 4. 9. 2　控制背景圖像是否平鋪                  
 4. 9. 3　控制背景圖像是否固定                  
 4. 9. 4　控制背景圖像的顯示位置                  
 4. 9. 5　使用background屬性設(shè)置背景                  
 4. 10　范例27：錯(cuò)亂的網(wǎng)頁效果                  
 4. 10. 1　效果說明                  
 4. 10. 2　代碼                  
 4. 11　范例28：報(bào)紙網(wǎng)頁效果                  
 4. 11. 1　效果說明                  
 4. 11. 2　代碼                  
 4. 12　本章知識(shí)點(diǎn)回顧                  
 第5章　定位與疊放                  
 5. 1　范例29：絕對(duì)定位與相對(duì)定位                  
 5. 1. 1　絕對(duì)定位                  
 5. 1. 2　相對(duì)定位                  
 5. 2　范例30：設(shè)置網(wǎng)頁元素的寬度和高度                  
 5. 2. 1　設(shè)置寬度                  
 5. 2. 2　同一圖像以不同寬度顯示                  
 5. 2. 3　階梯狀顯示的文本                  
 5. 2. 4　設(shè)置高度                  
 5. 3　范例31：設(shè)置網(wǎng)頁元素的可視性                  
 5. 3. 1　visibility屬性                  
 5. 3. 2　范例：突然消失的按鈕                  
 5. 4　范例32：疊放文字和圖像                  
 5. 4. 1　z－index屬性                  
 5. 4. 2　范例：將兩張圖片組合為一                  
 5. 5　范例33：定位方法的綜合應(yīng)用                  
 5. 5. 1　效果說明                  
 5. 5. 2　創(chuàng)建步驟                  
 5. 6　范例34：圖片文字效果                  
 5. 6. 1　效果說明                  
 5. 6. 2　創(chuàng)建步驟                  
 5. 7　范例35：光標(biāo)瞄準(zhǔn)器特效                  
 5. 7. 1　效果說明                  
 5. 7. 2　創(chuàng)建步驟                  
 5. 8　本章知識(shí)點(diǎn)回顧                  
 第6章　CSS濾鏡（Filter）                  
 6. 1　范例36：認(rèn)識(shí)濾鏡                  
 6. 1. 1　什么是濾鏡                  
 6. 1. 2　濾鏡效果示例                  
 6. 2　范例37：定義一個(gè)或多個(gè)濾鏡效果                  
 6. 2. 1　定義一個(gè)濾鏡效果                  
 6. 2. 2　定義多個(gè)濾鏡效果                  
 6. 2. 3　多個(gè)濾鏡效果的應(yīng)用順序                  
 6. 2. 4　應(yīng)用濾鏡效果時(shí)的注意事項(xiàng)                  
 6. 3  范例38：Alpha通道濾鏡效果                  
 6. 3. 1  Alpha通道效果的效果及定義                  
 6. 3. 2　一個(gè)范例                  
 6. 3. 3　代碼的解釋：使用腳本動(dòng)態(tài)設(shè)置濾鏡的屬性                  
 6. 3. 4　濾鏡數(shù)組                  
 6. 4　范例39：移動(dòng)模糊（Motion Blur）                  
 6. 4. 1　效果和定義                  
 6. 4. 2　范例                  
 6. 5　范例40：色度（Chroma）                  
 6. 5. 1　效果及定義                  
 6. 5. 2　范例                  
 6. 6　范例41：下落陰影（Drop Shadow）                  
 6. 6. 1　效果及定義                  
 6. 6. 2　范例                  
 6. 7　范例42：翻轉(zhuǎn)（Flip）                  
 6. 7. 1　效果及定義                  
 6. 7. 2　范例                  
 6. 8　范例43：光暈（Glow）                  
 6. 8. 1　效果及定義                  
 6. 8. 2　范例                  
 6. 9　范例44：灰度（Grayscale）                  
 6. 9. 1　效果及定義                  
 6. 9. 2　范例                  
 6. 10　范例45：反相（Invert）                  
 6. 10. 1　效果及定義                  
 6. 10. 2　范例                  
 6. 11　范例46：遮蔽（Mask）                  
 6. 11. 1　效果及定義                  
 6. 11. 2　范例                  
 6. 12　范例47：陰影（Shadow）                  
 6. 12. 1　效果及定義                  
 6. 12. 2　范例                  
 6. 13　范例48：波形（Wave）                  
 6. 13. 1　效果及定義                  
 6. 13. 2　范例                  
 6. 14　范例49：X光效果（X－ray）                  
 6. 14. 1  效果及定義                  
 6. 14. 2　范例                  
 6. 15　本章知識(shí)點(diǎn)回顧                  
 第7章　JavaScript與CSS的結(jié)合應(yīng)用                  
 7. 1　范例50：圖片播放效果                  
 7. 1. 1　效果說明                  
 7. 1. 2　客戶端映射圖                  
 7. 1. 3　使用"層"使圖文重疊                  
 7. 1. 4　完整代碼                  
 7. 2　范例51：光暈文字特效                  
 7. 2. 1　效果說明                  
 7. 2. 2　實(shí)現(xiàn)方法                  
 7. 3　范例52：固定于網(wǎng)頁某一位置的菜單                  
 7. 3. 1　效果說明                  
 7. 3. 2　實(shí)現(xiàn)方法                  
 7. 4　范例53：可拖動(dòng)的圖文                  
 7. 4. 1　效果說明                  
 7. 4. 2　實(shí)現(xiàn)方法                  
 7. 4. 3　進(jìn)一步實(shí)踐：和拖動(dòng)的DIV                  
 7. 4. 4　同時(shí)兼容Netscape和IE                  
 7. 5　范例54：神奇的導(dǎo)航圖                  
 7. 5. 1　效果說明                  
 7. 5. 2　客戶端映射圖                  
 7. 5. 3　定位和疊放                  
 7. 5. 4　設(shè)置和導(dǎo)航菜單各項(xiàng)相對(duì)應(yīng)的顯示層（DIV）                  
 7. 5. 5　實(shí)現(xiàn)圖像變形的動(dòng)畫效果                  
 7. 6　范例55：飛行的圖片                  
 7. 6. 1　效果說明                  
 7. 6. 2　實(shí)現(xiàn)方法                  
 7. 7　本章知識(shí)點(diǎn)回顧                  
 附錄1　CSS與瀏覽器的兼容性                  
 f1. 1　樣式表基礎(chǔ)                  
 f1. 2　字體樣式                  
 f1. 3　文字                  
 f1. 4　顏色與背景                  
 f1. 5　頁面布局                  
 f1. 6　層和定位（CSS2）                  
 附錄2  CSS2新增選擇符                  
 f2. 1　＊（通配符選擇符）                  
 f2. 2?。荆ㄗ舆x擇符）                  
 f2. 3?。ńH選擇符）                  
 f2. 4 ［ ］（屬性搭配選擇符）                  
 附錄3　樣式表度量單位值                  
 f3. 1％                  
 f3. 2 cm                  
 f3. 3 em                  
 f3. 4  ex（x-height）                  
 f3. 5  in                  
 f3. 6  mm                  
 f3. 7  pc                  
 f3. 8  pt                  
 f3. 9  px                  
 附錄4　樣式表顏色值                  
 f4. 1　英文名稱表示的顏色值                  
 f4. 2　6個(gè)數(shù)字的16進(jìn)制顏色值                  
 f4. 3　3個(gè)數(shù)字的16進(jìn)制顏色值                  
 f4. 4　RGB顏色值                  
 f4. 5　使用百分比值的RGB顏色值