1、4.14.1設置網頁屬性設置網頁屬性4.1.1網頁標題 如果文檔工具欄沒有顯示，使用菜單“查看”“工具”“文檔”可打開其顯示。4.1.2設置頁面屬性使用菜單“修改”“頁面屬性”可打開此對話框。 1.外觀外觀外觀設置中，可以設置頁面缺省的文字的字體、風格、大小、顏色等屬性，還可以設置頁頁面的背景顏色和圖像。2.鏈接鏈接鏈接屬性設置默認的超鏈接文字的字體、大小、顏色等設置 3.標題標題標題設置正文中標題文字的字體、大小和顏色 4.標題標題/編碼編碼這里既可以設置網頁的標題，還可以設置網頁的文字編碼 5.跟蹤圖像跟蹤圖像“跟蹤圖像”是Dreamweaver一個非常有效的功能，它允許用戶在網頁中將原來

2、的平面設計稿作為輔助的背景。 4.1.3文件頭設置文件頭就是在網頁的HTML代碼中中的內容，文件頭中的內容一般不在瀏覽器窗口中顯示，但對網頁的正常工作具有十分重要的作用。1.METAMETA設置自定義的一組網頁屬性的描述。2.關鍵字關鍵字關鍵字設置網頁網站的一組關鍵字，許多搜索引擎和網站關聯性統計是通過關鍵字搜索網頁的。3.描述描述設置對網頁的一些描述，一般是網頁內容的概述，供其它開發者參考。4.刷新刷新刷新定義網也調入后延遲一段時間的動作 “轉到URL”可使得網頁顯示一段時間后，自動轉到其它網站，許多更改地址的網站和歡迎頁面經常采用這種方法。“刷新此文檔”則重新從服務器調入當前網頁，對于經常

3、更新的網頁，這項功能十分有用，可以及時發現更新。聊天室是一種典型的應用。5.基礎基礎設置網頁的基準地址 6.鏈接鏈接鏈接用于設置需要鏈接的CSS等外部文件的地址和類型。 4.24.2頁面布局頁面布局4.2.1網頁的版面布局1.確定顯示分辨率確定顯示分辨率2.版面布局的模式版面布局的模式（1）T型結構布局 （2）口型布局 （3）三型布局 （4）對稱對比布局 （5）POP布局 4.2.2 表格布局 在布局過程中，為了方便各個布局單元的控制，可以多使用表格的嵌套，盡量少使用表格單元格的拆分、合并。 使用表格是常用的布局方式。不使用表格時網頁中的元素只能從上到下，使用表格可以將元素按各種格式排列，如水

4、平平行、間隔一定距離。布局的表格可以嵌套，實現復雜的頁面布局。4.2.3 使用擴展模式布局 在工具欄上單擊擴展表格模式按鈕，既可切換到“擴展表格模式” 。 擴展模式下并不是所見即所得的效果，最好不要在單元格中添加內容，只進行頁面設計操作。4.2.4 使用布局模式布局用表格布局的頁面，往往給人一種過于整齊的排列效果，而使用“布局模式”，則可以是網頁中的元素快速、靈活地定位。 在“插入”工具欄單擊“布局”按鈕，進入布局模式。 4.34.3使用框架布局使用框架布局4.3.1框架集網頁1.創建一個新的框架集網頁創建一個新的框架集網頁創建框架網頁前先要讓框架邊框顯示。在“文檔”工具欄的最右邊單擊視圖選項

5、按鈕 在彈出的菜單中選擇“可視化助理”“框架邊框”，使得框架邊框被選中。 創建一個新的框架集網頁有兩種方法： （1）使用菜單“文件”“新建”打開新建文檔對話框；在該對話框左邊選擇“框架集”，右邊是Dreamweaver MX2004預設好的一些框架網頁的格式，在其中選擇想要的樣式 （2）新建一個文件，將“插入”工具欄設為“布局”模式，單擊右部的框架按鈕組，打開菜單在其中選擇需要的框架網頁結構，即可插入一個框架網頁 2.編輯框架結構編輯框架結構 (1) 單擊窗口中間的框架邊框線，選中框架，邊框線上出現虛線，拖動邊框可以改變框架的大小。 (2) 單擊窗口邊緣的邊框線，選中框架。從邊緣拖動邊框線，可

6、產生一個新的邊框線。 (3) 鼠標移到編輯窗口的四角，光標變成十字箭頭時拖動鼠標，可產生縱橫各一條新的框架邊框線。 (4) 按住Alt鍵拖動任一條框架邊框，可以垂直或水平分割文檔（或已有的框架）；按住Alt鍵從一個角上拖動框架邊框，可以把文檔（或已有的框架）劃分為四個框架。(5) 拖動框架邊框到父框架的邊框上，可刪除框架。3.父框架和子框架父框架和子框架 該圖的框架就是先分成上下框架，再把下框架分成左右框架。一般把下框架稱為左右框架的父框架，則左右框架是下框架的子框架。 左下框架占最大的區域，用來顯示主要的網頁內容，稱為主框架。4.3.3設置框架網頁的屬性1.設置框架集屬性設置框架集屬性通過菜

7、單“窗口”“框架”打開框架面板，在其中單擊圖示的邊框選中一個框架，屬性面板變為框架集面板，可設置框架集屬性 。 2.設置框架屬性設置框架屬性在框架面板的某個框架區域中單擊可選中此框架的屬性 。4.3.4框架鏈接的目標1.設置網頁元素的鏈接目標設置網頁元素的鏈接目標2.設置網頁的缺省顯示區域設置網頁的缺省顯示區域_blank：打開一個新窗口顯示目標網頁。_parent：目標網頁的內容在父框架窗口中顯示。_self：目標網頁的內容在當前所在框架窗口中顯示。_top：目標網頁的內容在最頂層框架窗口中顯示。使用菜單“插入”“HTML”“文件頭標簽”“基礎”，打開“基礎”對話框，在目標中可選擇此網頁中超

8、鏈接的默認顯示窗口。Href中設置默認查找的網絡路徑。4.44.4層的使用層的使用4.4.1在網頁中插入層1.新建一個層新建一個層（1）打開要創建層的網頁。（2）將“插入”工具欄切換到“布局”模式。（3）單擊描繪層按鈕 鼠標移動到編輯窗口時變成十字形狀，可以在網頁中的任意位置拖動繪制一個層的邊框。 （4）在層的邊框中可以插入各種網頁元素，如文字、圖片、表格等。2.設置層的屬性設置層的屬性在網頁中的層的邊框上單擊可選中這個層，設置其屬性。拖動邊框上的8個控制點可改變層的大小。將鼠標放在層邊框上除控制點的其他位置，此時鼠標變成十字箭頭形狀，拖動鼠標可移動層的位置。4.4.2層的疊加和嵌套 1.層的

9、疊加層的疊加使用菜單“窗口”“層”打開層面板組 。2.層的嵌套層的嵌套在一個已有的層中描繪新層時按住Alt鍵可繪制現有層的嵌套層，如果不按住Alt鍵繪制的是連個重疊的層。在層面板中按住Ctrl鍵將一個層拖動到層列表的另一個層上，可將其變為后者的子層。4.4.3層與表格的互相轉換1. 將層轉換成表格將層轉換成表格 選中要轉換的層，使用菜單“修改”“轉換”“層到表格”打開轉換層為表格對話框。2.將表格轉換成層將表格轉換成層 選中要轉換為層的表格，使用菜單“修改”“轉換”“表格到層”打開轉換表格為層對話框。4.54.5使用使用CSSCSS4.5.1CSS基礎1.什么是什么是CSSCSS（Cascad

10、ing Style sheet）是1996年出現的有關網頁制作的技術，中文叫做級聯風格頁或層疊樣式表。使用CSS定義的網頁風格可以控制HTML語言標志的一些諸如字體、邊框、顏色與背景等屬性，也可以通過定義外部風格文件實現整個網站頁面風格的統一。 2.CSS的作用的作用（1）將格式和結構分離（2）更容易控制頁面的布局（3）可以制作出體積更小下載更快的網頁（4）可以更快更容易地維護及更新大量的網頁（5）良好的瀏覽器兼容性4.5.2新建樣式1.新建樣式新建樣式 （1）在屬性面板樣式的樣式菜單中選擇“管理樣式”，在打開的編輯樣式表對話框中單擊“新建”按鈕。（2）使用菜單“文本”“CSS樣式”“新建”。

11、 （3）使用菜單“文本”“CSS樣式”“管理樣式”，在打開的編輯樣式表對話框中單擊“新建”按鈕。 （4）使用菜單“窗口”“CSS樣式”打開“設計”面板組中的“CSS樣式”面板，單擊下面的新建CSS樣式按鈕 （5）在編輯窗口中單擊右鍵，在彈出的菜單中選擇“CSS樣式”下的“管理樣式”或“新建”。4.5.3 設置CSS屬性1.使用樣式屬性對話框使用樣式屬性對話框2.使用面板組使用面板組 使用菜單“窗口”“標簽檢查器”打開“標簽”面板組，使用“窗口”“CSS樣式”打開“設計”面板組。4.5.4 使用內置的CSS樣式 Dreamweaver MX2004提供了方便的CSS屬性操作和應用功能的同時，還提

12、供了大量現成的CSS應用模板，可以在制作網頁時直接使用。1. CSS網頁網頁2.CSS文件模板文件模板4.6 CSS4.6 CSS屬性屬性4.6.1 類型1.字體（字體（font-family）2.大小（大小（font-size） 3.粗細（粗細（font-weight） 4.樣式（樣式（font-style） 5.變量變量6.行高（行高（line-height）7.大小寫（大小寫（text-transform）8. 顏色（顏色（color）9. 修飾（修飾（text-decoration）4.6.2 背景1.背景顏色（背景顏色（background-color）2.背景圖像（背景圖像（bac

13、kground-image）3.重復（重復（background-repeat）4.附件（附件（background-attachment）5.背景圖片位置（背景圖片位置（background-position）4.6.3 區塊1.字母間距（字母間距（letter-spacing） 2. 字詞間距（字詞間距（word-spacing）3.垂直對齊（垂直對齊（vertical-align）4.文本對齊（文本對齊（text-align ）5. 文本縮進（文本縮進（text-indent ）6.空格（空格（white-space）7.顯示（顯示（display）4.6.4 方框1.寬（寬（width

14、）和高（）和高（height）2.漂浮（漂浮（float）和清除（）和清除（clear） 3.填充（填充（padding）4.邊界（邊界（margin）4.6.5 邊框1.樣式（樣式（border-style）2.寬度（寬度（border-width）3.邊框顏色（邊框顏色（border-color）4.6.6 列表1.類型（類型（list-style-type ）2.項目符號圖像（項目符號圖像（list-style-image） 3.位置（位置（list-style-position） 4.6.7 定位 定位屬性包括類型、溢出、Z軸、寬、高、位置、剪輯的等，其作用和前面介紹的層的定義相同。事

15、實上，在對層的屬性進行定義時，就是在層代碼行中加入了CSS代碼。4.6.8 擴展1.分頁（分頁（page-break）2.光標光標4.6.9 CSS濾鏡1、Alpha 濾鏡濾鏡2. BlendTrans濾鏡濾鏡3.Blur 濾鏡濾鏡 Alpha濾鏡是把一個目標元素與背景混合，可以指定數值來控制混合的程度，通俗地說就是一個元素的透明度。通過指定坐標，可以指定點、線、面的透明度。 BlendTrans濾鏡產生一種淡入淡出的效果。 Blur濾鏡產生模糊效果。 4.Chroma 濾鏡濾鏡5. DropShadow 濾鏡濾鏡 Chroma屬性可以在一個對象中指定一種顏色為透明色。 DropShaow是設

16、置對象的陰影效果。 6.FlipH和和FlipV 濾鏡濾鏡 FlipH和FlipV 濾鏡分別是水平反轉和垂直反轉，這兩個濾鏡沒有參數。 7.Glow 濾鏡濾鏡 當對一個對象使用glow屬性后，這個對象的邊緣就會產生類似發光的效果。 8.Gray ,Invert,Xray 濾鏡濾鏡Gray濾鏡是把一張圖片變成灰度圖 9.Light 濾鏡濾鏡 這個屬性模擬光源的投射效果。 10.Mask 濾鏡濾鏡 使用Mask 濾鏡可以為對象建立一個覆蓋于表面的膜，其效果就象戴者有色眼鏡看物體一樣。 12. Shadow 濾鏡濾鏡11. RevealTrans濾鏡濾鏡 RevealTrans濾鏡能產生23種動態效果，可在其中隨機抽用其中的一種。 利用Shadow屬性可以在指定的方向建立物體的投影。 13.Wave 濾鏡濾鏡 Wave 屬性把對象在垂直的方向按波紋樣式打亂。 思考題4.1 設計一個網頁頁面需要經過哪些步驟？4.2 頁面屬性設置都要設置哪些內容？4.3 如何使用表格進行一