網(wǎng)頁設計Dreamweaver CS3 教案(華東師范大學出版社)

1、第 7章 建立框架網(wǎng)頁教學目標：1 能夠理解框架的作用2 能夠合理使用框架劃分窗口布局3 能夠明白框架和框架集的關系4 能在框架中創(chuàng)建編輯網(wǎng)頁5 能在框架中打開已有的網(wǎng)頁進行編輯6 能夠正確保存框架和框架集7 能夠理解和編輯框架的屬性教學重點： 繪制布局表格、繪制布局單元格、設置布局表格和布局單元格的屬性教學難點： 繪制嵌套布局表格教學課時：理論：2課時 實訓：4課時教學方法：講授法、任務驅動法。教學過程:一、導入新課網(wǎng)頁布局技術還有一種，叫做框架。然而框架本質上是一種瀏覽器窗口的分割技術。而前面我們學習的表格和層的布局方式則屬于頁面分割技術，只是對一個網(wǎng)頁的頁面做了的劃分，在頁面不同的位置放

2、置不同的內容，但這些內容仍在同一個頁面上。利用框架，我們可以把瀏覽器窗口分成幾個部分，每一部分都相當于瀏覽器窗口的一個子窗口，都可以用來顯示一個完整的網(wǎng)頁，從而可以實現(xiàn)多個頁面在瀏覽器中的同時顯示，所以說框架應該算作是一種“窗口” 的布局技術。按照布局要求，把瀏覽器窗口分成若干子窗口，并在各個子窗口中顯示具有不同內容的網(wǎng)頁，這些網(wǎng)頁有機的結合在一起，達到一個完整的布局效果。 二、講授新課（ 一）、框架和框架集的概念框架是一種窗口分割布局技術，利用框架我們可以把窗口分成規(guī)劃好的若干子窗口，每一個框架都相當于一個子窗口，我們可以在框架中編輯和顯示一個完整的網(wǎng)頁。不同框架中的網(wǎng)頁是互不相干，根據(jù)我們

3、的整體規(guī)劃，可以把不同的信息放置在不同框架中頁面上，從而實現(xiàn)我們想要的布局效果。每一個框架都屬于某個框架集，我們可以把框架集中的一個框架拆分，來實現(xiàn)更多子窗口的劃分，就像我們項目中一樣，這其實是通過在框架集中不斷的嵌套子框架集來實現(xiàn)的。（二）、創(chuàng)建框架 在創(chuàng)建框架集或使用框架前，通過選擇“查看/可視化助理/框架邊框”命令，使框架邊框在文檔窗口的設計視圖中可見。 1、使用預制框架集 (1)、新建一個HTML文件，在快捷工具欄選擇“布局”，單擊 “框架”按鈕，在彈出的下拉菜單中選擇“頂部和嵌套的左側框架”。 （2）、使用鼠標直接從框架的左側邊緣河上邊緣向中間拖動，直至合適的位置，這樣頂部和嵌套的左

4、側框架就完成了。2、鼠標拖動創(chuàng)建框架（1）、新建普通網(wǎng)頁，命名后將其打開。（2）、把鼠標放到框架邊框上，出現(xiàn)雙箭頭光標時拖拽框架邊框，可以垂直或水平分割網(wǎng)頁。（三）、保存框架 每一個框架都有一個框架名稱，可以用默認的框架名稱，也可以在屬性面板修改名稱，我們采用系統(tǒng)默認的框架名稱topFrame（上方）、leftFrame（左側）、mainFrame（右側）。 選擇菜單欄>文件>保存全部，將框架集保存為index.html，上方框架保存為07.html，左側框架保存為08.html，右側框架保存為09.html。 這個步驟雖然簡單，但是很關鍵，只有將總框架集和各個框架保存在本地站點根

5、目錄下，才能保證瀏覽頁面時顯示正常。 （四）、 編輯框架式網(wǎng)頁 雖然框架式網(wǎng)頁把屏幕分割成幾個窗口，每個框架（窗口）中放置一個普通的網(wǎng)頁，但是編輯框架式網(wǎng)頁時，要把整個編輯窗口當作一個網(wǎng)頁來編輯，插入的網(wǎng)頁元素位于哪個框架，就保存在哪個框架的網(wǎng)頁中?？蚣艿拇笮】梢噪S意修改。 1、 改變框架大小 用鼠標拖拽框架邊框可隨意改變框架大小。 2、 刪除框架 用鼠標把框架邊框拖拽到父框架的邊框上，可刪除框架。 3、設置框架屬性 設置框架屬性時，必須先選中框架。選擇框架方法如下： 選擇菜單欄>窗口>框架，打開框架面板，單擊某個框架，即可選中該框架。 在編輯窗口某個框架內按住Alt鍵并單擊鼠標，

6、即可選擇該框架。當一個框架被選擇時，它的邊框帶有點線輪廓2. 設置框架屬性 選中框架，在屬性面板上可以設置框架屬性：框架名稱、源文件、空白邊距、滾動條、重置大小和邊框屬性等。 需要注意的是：1、框架是不可以合并的。2、在創(chuàng)建鏈接時要用到框架名稱，所以我們要很清楚的知道每個框架對應的框架名。 （五）、在框架中使用超級鏈接 在框架式網(wǎng)頁中制作超級鏈接時，一定要設置鏈接的目標屬性，為鏈接的目標文檔指定顯示窗口。鏈接目標較遠（其他網(wǎng)站）時，一般放在新窗口，在導航條上創(chuàng)建鏈接時，一般將目標文檔放在另一個框架中顯示（當頁面較小時）或全屏幕顯示（當頁面較大時）。 “目標”下拉菜單中的選項： * _blank

7、 放在新窗口中。 * _parent 放到父框架集或包含該鏈接的框架窗口中。 * _self 放在相同窗口中（默認窗口無須指定）。 * _top 放到整個瀏覽器窗口并刪除所有框架。 在我們保存有框架名為mainFrame、leftFrame、topFrame的框架后，在目標下拉菜單中，還會出現(xiàn)mainFrame、leftFrame、topFrame選項： * mainFrame 放到名為mainFrame的框架中。 * leftFrame 放到名為leftFrame的框架中。 * topFrame放到名為topFrame的框架中。（六）、制作框架頁面 1、選擇菜單欄>窗口>框架，打

8、開框架面板，選中整個框架集，如下圖所示：在屬性面板中，將行的值設置為100，單位為像素，如下圖所示：2、選擇菜單欄>窗口>框架，打開框架面板，選中子框架集，如下圖所示：在屬性面板中，將列的值設置為200，單位為像素，如下圖所示：這樣，我們就完成了對整個框架的布局。下面我們來布局各個框架頁面。 3、鼠標在topFrame框架中的空白處點擊一下，我們會看見文檔窗口上方的文件名變?yōu)榱?7.html。在頁面屬性中將上、下、左。右邊距全部設為0。 插入一個1行2列的表格，寬度為100，高度為100px，左單元格寬度為382px并插入背景圖片img/103.jpg，設置表格的背景顏色為103.

9、jpg圖片右邊緣的綠色（用吸管吸?。?4、鼠標在leftFrame框架中的空白處點擊一下，我們會看見文檔窗口上方的文件名變?yōu)榱?8.html，在頁面屬性中將上、下、左。右邊距全部設為0。 插入一個6行1列 的表格，表格寬度為95，居中對齊。將第一個單元格的高度設為20px，選中其余單元格將高度設置為50px。分別輸入文字設置導航欄目。分別對各個導航欄目建立鏈接關系，鏈接路徑指向要鏈接到的網(wǎng)頁，目標選擇mainFrame框架。 5、鼠標在mainFrame框架中的空白處點擊一下，我們會看見文檔窗口上方的文件名變?yōu)榱?9.html，在頁面屬性中將上、下、左。右邊距全部設為0。 自己設置一個歡迎頁

10、面。至此，我們完成了一個框架網(wǎng)站的制作。第 8章 插入多媒體元素教學目標：1 能正確插入Flash動畫2 能掌握Flash對象的插入方法3 能學會視頻的插入4 能正確添加背景音樂教學重點： 正確插入Flash動畫、視頻、背景音樂教學難點： 正確插入Flash動畫、視頻、背景音樂 教學課時：理論：2課時 實訓：4課時教學方法：講授法、任務驅動法。教學過程:一、導入新課現(xiàn)在的科技如此發(fā)達，每天都有新生事物的誕生，所以我們制作的網(wǎng)頁也要跟的上時代的進步，滿足瀏覽者的需求，才能吸引更多的用戶，所以要從多感官來打動用戶，吸引用戶，因此網(wǎng)頁中絕對少不了視覺沖擊力極強的多媒體，本項目中，我們就要學習如何在網(wǎng)

11、頁上使用各種多媒體元素。二、講授新課 （一）、Flash的文件類型1.Flash 源文件 (.fla)： 是指在 Flash 程序中創(chuàng)建的Flash原始文件。這種類型的文件只能在Flash編輯軟件中打開。2.Flash電影文件 (.swf)：是指Flash (.fla) 文件的壓縮版本，這種類型的文件可以在瀏覽器中播放并且可以在 Dreamweaver 中進行預覽，但不能在 Flash 中進行編輯。 3.Flash 庫文件(.swt)：這種文件用于 Flash 按鈕對象，使我們能夠用自己的文本或鏈接修改模板。4.Flash 元素文件(.swc)：是一種Flash SWF文件。 5.視頻文件格式

12、 (.flv)：是一種視頻文件 。（二）、網(wǎng)頁中的音頻文件格式1.midi或.mid（樂器數(shù)字接口）：這種格式是樂器聲音，大多數(shù)瀏覽器都支持這種文件。 2.wav（Waveform擴展名）：WAV是Microsoft Windows 本身提供的音頻格式，大多數(shù)瀏覽器都支持這種文件。3.aif（音頻交換文件格式，即AIFF）: 這種格式是Apple蘋果電腦上面的標準音頻格式 。4.mp3：這種格式是一種壓縮格式的聲音，但用戶使用必須安裝相應的插件或播放程序。5.ra、.ram、.rpm或Real Audio：這種格式是一種高度壓縮后的聲音文件格式，可以被快速下載。 （三）、設置Flas

13、h對象的屬性我們可以通過屬性參數(shù)面板來設置Flash對象的各種屬性。 操作方法：選中要編輯的Flash對象，然后編輯、修改Flash對象屬性面板的參數(shù)。（四）、設置Flash文本的屬性與Flash對象的屬性設置相同?？梢詫lash文本設置字體、大小、樣式、顏色、轉滾顏色、文本、鏈接、背景色和另存為屬性。（五）、設置Flash按鈕的屬性與Flash對象的屬性設置相同。可以對Flash按鈕設置樣式、按鈕文本、字體、大小、鏈接、背景色和另存為屬性。（六）、插入插件屬性在Dreamweaver中，音頻、視頻在插入時都作為插件對待，我們可以通過插件屬性參數(shù)面板來設置插件的各種屬性。 操作方法：選中要編

14、輯的插件，然后編輯、修改插件屬性面板的參數(shù)。第 9章 建立表單教學目標：1 能正確插入表單2 能合理使用表單中的各種元素3 能使用表格排版布局表單中的元素4 理解表單的用途5 掌握Spry折疊構件、菜單欄構件、驗證文本域構件、驗證復選框構件與重復區(qū)域構件等多種構件的使用方法 。教學重點： 插入表單、使用表單中的各種元素 教學難點： 理解表單的用途 教學課時：理論：2課時 實訓：4課時教學方法：講授法、任務驅動法。教學過程:一、導入新課隨著網(wǎng)站功能的完善，用戶對網(wǎng)頁的要求不僅是獲取信息，還希望要有互相的交流。表單作為網(wǎng)頁交互的一種元素，應用在網(wǎng)站的各個區(qū)域。其表現(xiàn)的形式有問卷調查、線上交易以及拍

15、賣等活動。二、講授新課（一）、表單的用途表單主要用來讓用戶在網(wǎng)頁上輸入數(shù)據(jù)，搜集用戶的各種信息。表單被廣泛應用在需要和用戶互動的頁面中，如注冊，留言板，網(wǎng)上調查等場合。（二）、表單中的各種元素表單中提供的元素可以以不同的方式實現(xiàn)用戶數(shù)據(jù)的輸入，我們可以根據(jù)不同的使用場合選擇不同的元素。 表單中各個元素都有名稱和值這兩個基本的屬性，并且可以在各元素的屬性面板中設置。 表單中的元素主要有1. 文本字段和文本域2. 隱藏域3. 復選框4. 單選按鈕和單選按鈕組5. 列表/菜單6. 標簽7. 文件域8. 按鈕9. 圖像域（三）、Spry功能 Spry驗證表單。（1）插入Spry驗證文本域（2）插入“S

16、pry驗證復選框”（3）插入“Spry驗證選擇”（4）插入“Spry驗證文本區(qū)域”Spry構件。（1）插入Spry菜單欄（2）插入“Spry選項卡式面板”（3）插入“Spry折疊式”（4）插入“Spry折疊面板” Spry特效。顯示/漸隱 ：使元素顯示或漸隱。 高亮顏色：更改元素的背景顏色。 向上遮簾/向下遮簾 ：模擬百葉窗，向上或向下滾動百葉窗來隱藏或顯示元素。 上滑/下滑 ：上下移動元素。 增大/收縮 ：使元素變大或變小。 晃動 ：模擬從左向右晃動元素。 擠壓 ：使元素從頁面的左上角消失。 第 10章 使用模板和庫教學目標：1 能理解模板的作用2 能將現(xiàn)有的網(wǎng)頁生成模板3 能編輯模板4 能

17、利用模板生成新的網(wǎng)頁5 能更新模板6 能理解庫的作用7 能創(chuàng)建庫項目8 能修改庫教學重點： 在網(wǎng)頁中為元素插入特定的行為 教學難點： 在網(wǎng)頁中為元素插入特定的行為 教學課時：理論：2課時 實訓：4課時教學方法：講授法、任務驅動法。教學過程:1、 導入新課在我們制作網(wǎng)站的過程中，為了統(tǒng)一風格，很多頁面會用到相同的布局、圖片和文字元素。為了避免大量的重復勞動，可以使用Dreamweaver8提供的模板功能，將具有相同版面結構的頁面制作為模板，將相同的元素（如導航欄）制作為庫項目，并存放在庫中可以隨時調用。二、講授新課（一）、創(chuàng)建模板模板的創(chuàng)建有三種方式。1、直接創(chuàng)建模板選擇“窗口/資源”命令，打開

18、“資源”面板，切換到模板子面板，如下圖所示。單擊模板面板上的“擴展”按鈕，在彈出菜單中選擇“新建模板”這是在瀏覽窗口出現(xiàn)一個未命名的模板文件，給模板命名。然后單擊“編輯”按鈕，打開模板進行編輯。編輯完成后，保存模板，完成模板建立。2、將普通網(wǎng)頁另存為模板 打開一個已經制作完成的網(wǎng)頁，刪除網(wǎng)頁中不需要的部分，保留幾個網(wǎng)頁共同需要的區(qū)域。 選擇“文件/另存為模板”命令將網(wǎng)頁另存為模板。 在彈出的“另存模板”對話框中，“站點”下拉列表框用來設置模板保存的站點，課選擇一個選項?！艾F(xiàn)存的模板”選框顯示了當前站點的所有模板?！傲泶鏋椤蔽谋究蛴脕碓O置模板的命名。單擊“另存模板”對話框中的“保存”按鈕，就把當

19、前網(wǎng)頁轉換為了模板，同時將模板另存到選擇的站點。單擊“保存”按鈕，保存模板。系統(tǒng)將自動在根目錄下創(chuàng)建Template文件夾，并將創(chuàng)建的模板文件保存在該文件夾中。 在保存模板時，如果模板中沒有定義任何可編輯區(qū)域，系統(tǒng)將顯示警告信息。我們可以先單擊“確定”，以后再定義可編輯區(qū)域。3、從文件菜單新建模板 選擇“文件/新建”命令，打開“新建文檔”對話框，然后再類別中選擇“模板頁”，并選取相關的模板類型，直接單擊“創(chuàng)建”按鈕即可?！保ǘ〥reamweaver 8 定義可編輯區(qū)域 模板創(chuàng)建好后，要在模板中建立可編輯區(qū)，只有在可編輯區(qū)里，我們才可以編輯網(wǎng)頁內容?？梢詫⒕W(wǎng)頁上任意選中的區(qū)域設置為可編輯區(qū)域，

20、但是最好是基于HTML代碼的，這樣在制作的時候更加清楚。 在文檔窗口中，選中需要設置為可編輯區(qū)域的部分，單擊常用快捷欄的“模板”按鈕，在彈出菜單中選擇“可編輯區(qū)域”項。 在彈出的“新建可編輯區(qū)域”對話框中給該區(qū)域命名，然后單擊“確定”按鈕。新添加的可編輯區(qū)域有藍色標簽，標簽上是可編輯區(qū)域的名稱。 如果希望刪除可編輯區(qū)域，可以將光標置于要刪除的可編輯區(qū)域內，選擇“修改/模板/刪除模板標記”命令，光標所在區(qū)域的可編輯區(qū)即被刪除。 這樣模板文件就創(chuàng)建好了。（三）、其他模板區(qū)域 模板中除了可以插入最常用的“可編輯區(qū)域”外，還可以插入一些其他類型的區(qū)域，分別為“可選區(qū)域”、“重復區(qū)域”、“可編輯可選區(qū)域

21、”和“重復表格”。 1、可選區(qū)域 可選區(qū)域是模板中的區(qū)域，用戶可將其設置為在基于模板的文件中顯示或隱藏。當要為在文件中顯示的內容設置條件時，即可使用可選區(qū)域。 2、重復區(qū)域 重復區(qū)域時可以根據(jù)需要在基于模板的頁面中負值任意次數(shù)的模板部分。重復區(qū)域通常用于表格，也可以為其他頁面元素定義重復區(qū)域。 3、可編輯可選區(qū)域 是可選區(qū)域的一種，可以設置顯示或隱藏所選區(qū)域，并且可以編輯該區(qū)域中的內容。 （四）、Dreamweaver 8 使用庫所謂庫項目，實際上就是文檔內容的任意組合，可以將文檔中的任意內容存儲為庫項目，使它在其它地方被重復使用。 1、創(chuàng)建庫 在文檔窗口中選擇需要保存為庫項目的內容。 單擊資

22、源面板“庫”分類中右下角的“新建庫項目”按鈕。 一個新的項目出現(xiàn)在資源面板“庫”分類的列表中，預覽框中顯示預覽的效果，還可以給該項目鍵入新名稱。這樣，一個庫項目就創(chuàng)建好了。 2、插入庫 將光標方在網(wǎng)頁中需要插入庫文件的位置，在資源面板“庫”分類中選擇需要插入的庫項目，直接拖動到光標所在位置即可。 3、更改庫 如果修改了庫文件，選擇“文件/保存”命令，彈出“更新庫項目”對話框，詢問是否更新網(wǎng)站中使用了該庫文件的網(wǎng)頁。單擊“更新”按鈕，將更新網(wǎng)站中使用了該庫文件的網(wǎng)頁。 （五）、創(chuàng)建基于模板的頁面 1、打開素材csslianxi.html文件，選擇菜單欄的文件>另存為模板命令。 2、在彈出的

23、另存為模板對話框中，在“站點”文本框選擇“xmweb”，在“另存為”給模板命名為mo1，點擊確定。 3、彈出是否更改鏈接的提示，選擇“是”。此時，在站點內自動生成一個名為“Templates”的文件夾，名稱為mo1.dwt的模板文件被保存在該文件夾中。 4、鼠標在網(wǎng)頁表格的最下一行空白處單擊一下，選中狀態(tài)欄的<table>標簽，選擇菜單欄的插入>模板對象>可編輯區(qū)域命令。 5、彈出“可編輯區(qū)域”對話框，點擊“確定”。這樣我們就完成了模板的制作。 6、新建06.html文件，選擇菜單欄>窗口>資源命令，打開資源面板。 7、點擊資源面板的“模板”按鈕，在資源面板

24、我們就可以看見mo1.dwt文件，選中mo1.dwt，按住鼠標左鍵直接拖拽到06.html的文檔窗口中。即可將該模板應用到06.html中。第 11章 CSS樣式表教學目標：1.能在網(wǎng)頁文檔中建立選擇器類型為“類”的CSS樣式表2.能在網(wǎng)頁文檔中通過“class”屬性使用類型為“類” 樣式表3.能夠建立CSS樣式表文件，并在該文件中定義各種樣式表4.能夠建立選擇器類型為“偽類”的樣式表5.能夠在網(wǎng)頁文檔中引用CSS樣式表文件教學重點： CSS中的各種屬性、熟悉CSS面板的使用 教學難點： CSS中的各種屬性、熟悉CSS面板的使用 教學課時：理論：2課時 實訓：4課時教學方法：講授法、任務驅動法

25、。教學過程:1、 引入新課將樣式表與網(wǎng)頁相關聯(lián)，關聯(lián)的網(wǎng)頁將自動套用樣式表中的格式。使所有網(wǎng)頁中都可以應用相同的樣式，這樣既保證了站點風格的一次性，又提高了工作效率。二、講授新課：（一）、 CSS樣式定義       層疊樣式表 (CSS) 是一系列格式設置規(guī)則，它們控制 Web 頁面內容的外觀。使用 CSS 設置頁面格式時，內容與表現(xiàn)形式是相互分開的。頁面內容（HTML 代碼）位于自身的 HTML 文件中，而定義代碼表現(xiàn)形式的 CSS 規(guī)則位于另一個文件（外部樣式表）或 HTML 文檔的另一部分（通常為 <head> 部分）中。使

26、用 CSS 可以非常靈活并更好地控制頁面的外觀，從精確的布局定位到特定的字體和樣式等。術語“層疊”是指對同一個元素或 Web 頁面應用多個樣式的能力。例如，可以創(chuàng)建一個 CSS 規(guī)則來應用顏色，創(chuàng)建另一個規(guī)則來應用邊距，然后將兩者應用于一個頁面中的同一文本。所定義的樣式“層疊”到您的 Web 頁面上的元素，并最終創(chuàng)建您想要的設計。CSS樣式表的創(chuàng)建，可以統(tǒng)一定制網(wǎng)頁文字的大小、字體、顏色、邊框、鏈接狀態(tài)等效果。在Dreamweaver 8中CSS樣式的設置方式有了很大的改進，更為方便、實用、快捷。(二）、CSS樣式分類  CSS樣式包括3種：可應用于任何標簽、重新定義的特定

27、標簽樣式和選擇器樣式。 可應用于任何標簽需要選定應用對象，然后進行應用。使用自定義CSS樣式可以控制各種網(wǎng)頁元素的外觀，其中包括文本的字體變化、字間距和行間距變化以及邊框效果等多重屬性。 重新定義的特定標簽不需要應用，所有網(wǎng)頁中的該類標簽都將自動生效。重定義HTML標簽可以改變標簽的默認樣式。用戶可以通過修改特定標簽的樣式來改變網(wǎng)頁特定標簽的屬性。 選擇器樣式也不需要應用，直接生效。CSS選擇器可以控制超級鏈接的樣式。在修改CSS選擇器樣式時，a：link控制網(wǎng)頁中鏈接文本的普通狀態(tài)外觀。a:visited控制已經訪問的超級鏈接文本的外觀。a:hover控制的是鼠標懸停狀態(tài)下超級鏈接文本的外觀

28、。 (三）、使用CSS樣式美化頁面1、文本樣式的設置新建CSS樣式, “選擇器類型”為類，名稱為 “style1”定義在“僅對該文檔”。保存至站點根目錄下的CSS文件夾內，彈出“CSS規(guī)則定義”對話框，默認顯示的就是對文本進行設置的“類型”項。字體：可以在下拉菜單種選擇相應的字體。大?。捍笮【褪亲痔?，可以直接填入數(shù)字，然后選擇單位。樣式：設置文字的外觀，包括正常、斜體、偏斜體。行高：這項設置在網(wǎng)頁制作種很常用。設置行高，可以選擇“正?！?，讓計算機自動調整行高，也可以使用數(shù)值和單位結合的形式自行設置。需要注意的是，單位應該和文字的單位一致，行高的數(shù)值是包括字號數(shù)值在內的。例如，文字設置為12pt

29、，如果要創(chuàng)建一倍行距，則行高應該為24pt。變量：在英文種，大寫字母的字號一般比較大，采用“變量”中的“小型大寫字母”設置，可以縮小大寫字母。顏色：設置文字的色彩。2、背景樣式的設置在HTML中，背景只能使用單一的色彩或利用圖像水平垂直方向的平鋪。使用CSS之后，有了更加靈活的設置。在CSS規(guī)則定義”對話框左側選擇“背景”項，可以在右邊區(qū)域設置CSS樣式的背景格式。背景顏色：選擇固定色作為背景。背景圖像：直接填寫背景圖像的路徑，或單擊“瀏覽”按鈕找到背景圖像的位置。重復：在使用圖像作為背景的時，可以使用此項設置背景圖像的重復方式，包括“不重復”、“重復”、“橫向重復”、和“縱向重復“。附件：選

30、擇圖像做背景的時候，可以設置圖像是否跟隨網(wǎng)頁一同滾動。水平位置：設置水平方向的位置，可以“左對齊“右對齊”、“居中”。還可以設置數(shù)值與單位結合表示位置的方式，比較常用的是像素單位。垂直位置：可以選擇“頂部”、“底部”、“居中”。還可以設置數(shù)值和單位結合表示位置的方式。3、區(qū)塊樣式設置在CSS規(guī)則定義”對話框左側選擇“區(qū)塊”項，可以在右邊區(qū)域設置CSS樣式的區(qū)塊格式。單詞間距“英文單詞之間的距離，一般選擇默認設置。字母間距：設置英文字母間距，使用正值為增加字母間距，使用負值為減小字母間距。垂直對齊：設置對象的垂直對齊方式。文本對齊：設置文本的水平對齊方式。文字縮進：這是最重要的項目。中文文字的首

31、行縮進就是由它來實現(xiàn)的。首先填入具體的數(shù)值，然后選擇單位。文字的縮進和字號要保持統(tǒng)一。如字號為12px，像創(chuàng)建兩個中文自的縮進效果，文字縮進就應該為18px?？崭瘢簩υ创a文字空格的控制。選擇“正?！保雎栽创a文字之間的所有空格。選擇“保留”，將保留源代碼中所有的空格形式，包括由空格鍵、Tab鍵、Enter鍵創(chuàng)建的空格。顯示：制定是否以及如何顯示元素。選擇“無”則關閉它被制定給的元素的顯示。在實際控制中很少使用。4、方框樣式的設置在前面我們設置過圖像的大小、設置圖像水平和垂直方向上的空白區(qū)域、設置圖像是否有文字環(huán)繞效果等。方框設置進一步完善、豐富了這些設置。在CSS規(guī)則定義”對話框左側選擇“

32、方框”項，可以在右邊區(qū)域設置CSS樣式的方框格式。寬：通過數(shù)值和單位設置對象的寬度。高：通過設置和單位設置對象的高度。浮動：實際就是文字等對象的環(huán)繞效果。選擇“右對齊”、對象居右。文字等內容從另外一側環(huán)繞對象。選擇“左對齊”。對象居左，文字等內容從另一側環(huán)繞?！盁o”取消環(huán)繞效果。清除：規(guī)定對象的一側不許有層。可以通過選擇“左對齊”、“右對齊”，選擇不允許出現(xiàn)層的一側。如果在清除層的一側有層，對象將自動移到層的下面?！皟烧摺笔侵缸笥叶疾辉试S出現(xiàn)層。“無”是不限制層的出現(xiàn)。“填充”和“邊界”：如果對象設置了邊框，“填充”是指邊框和其中內容之間的空白區(qū)域；“邊界”是指邊框外側的空白區(qū)域。5、邊框樣式設置邊框樣式設置可以給對象添加邊框，設置邊框的顏色、粗細、樣式。在CSS規(guī)則定義”對話框左側選擇“邊框”項，可以在右邊區(qū)域設置CSS樣式的邊框格式。樣式設置邊框的樣式，如果選中“全部相同”復選框，則只需要設置“上”樣式，其它方向的樣式與“上”相同。寬度：設置4個方向邊框的寬度。可以選擇相對值：細、中、粗。也可以設置邊框的寬度值和單位。顏色：設置邊框對應的顏色，如果選中“全部相同”復選框，則其他方向的設置都與“上”相同。6、列表樣式設置CSS中有關列表的設置豐富了列表的外觀。在CSS規(guī)則定義”對話框左側選擇“列表”項，可以在右邊區(qū)域設置CSS樣式的列表格式。類型：設置引導列表項目的