第四章頁面設(shè)計

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

2、的平面設(shè)計稿作為輔助的背景。 4.1.3文件頭設(shè)置文件頭就是在網(wǎng)頁的HTML代碼中中的內(nèi)容，文件頭中的內(nèi)容一般不在瀏覽器窗口中顯示，但對網(wǎng)頁的正常工作具有十分重要的作用。1.METAMETA設(shè)置自定義的一組網(wǎng)頁屬性的描述。2.關(guān)鍵字關(guān)鍵字關(guān)鍵字設(shè)置網(wǎng)頁網(wǎng)站的一組關(guān)鍵字，許多搜索引擎和網(wǎng)站關(guān)聯(lián)性統(tǒng)計是通過關(guān)鍵字搜索網(wǎng)頁的。3.描述描述設(shè)置對網(wǎng)頁的一些描述，一般是網(wǎng)頁內(nèi)容的概述，供其它開發(fā)者參考。4.刷新刷新刷新定義網(wǎng)也調(diào)入后延遲一段時間的動作 “轉(zhuǎn)到URL”可使得網(wǎng)頁顯示一段時間后，自動轉(zhuǎn)到其它網(wǎng)站，許多更改地址的網(wǎng)站和歡迎頁面經(jīng)常采用這種方法?！八⑿麓宋臋n”則重新從服務(wù)器調(diào)入當(dāng)前網(wǎng)頁，對于經(jīng)常

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

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

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

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

7、單“窗口”“框架”打開框架面板，在其中單擊圖示的邊框選中一個框架，屬性面板變?yōu)榭蚣芗姘?，可設(shè)置框架集屬性 。 2.設(shè)置框架屬性設(shè)置框架屬性在框架面板的某個框架區(qū)域中單擊可選中此框架的屬性 。4.3.4框架鏈接的目標(biāo)1.設(shè)置網(wǎng)頁元素的鏈接目標(biāo)設(shè)置網(wǎng)頁元素的鏈接目標(biāo)2.設(shè)置網(wǎng)頁的缺省顯示區(qū)域設(shè)置網(wǎng)頁的缺省顯示區(qū)域_blank：打開一個新窗口顯示目標(biāo)網(wǎng)頁。_parent：目標(biāo)網(wǎng)頁的內(nèi)容在父框架窗口中顯示。_self：目標(biāo)網(wǎng)頁的內(nèi)容在當(dāng)前所在框架窗口中顯示。_top：目標(biāo)網(wǎng)頁的內(nèi)容在最頂層框架窗口中顯示。使用菜單“插入”“HTML”“文件頭標(biāo)簽”“基礎(chǔ)”，打開“基礎(chǔ)”對話框，在目標(biāo)中可選擇此網(wǎng)頁中超

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

9、疊加層的疊加使用菜單“窗口”“層”打開層面板組 。2.層的嵌套層的嵌套在一個已有的層中描繪新層時按住Alt鍵可繪制現(xiàn)有層的嵌套層，如果不按住Alt鍵繪制的是連個重疊的層。在層面板中按住Ctrl鍵將一個層拖動到層列表的另一個層上，可將其變?yōu)楹笳叩淖訉印?.4.3層與表格的互相轉(zhuǎn)換1. 將層轉(zhuǎn)換成表格將層轉(zhuǎn)換成表格 選中要轉(zhuǎn)換的層，使用菜單“修改”“轉(zhuǎn)換”“層到表格”打開轉(zhuǎn)換層為表格對話框。2.將表格轉(zhuǎn)換成層將表格轉(zhuǎn)換成層 選中要轉(zhuǎn)換為層的表格，使用菜單“修改”“轉(zhuǎn)換”“表格到層”打開轉(zhuǎn)換表格為層對話框。4.54.5使用使用CSSCSS4.5.1CSS基礎(chǔ)1.什么是什么是CSSCSS（Cascad

10、ing Style sheet）是1996年出現(xiàn)的有關(guān)網(wǎng)頁制作的技術(shù)，中文叫做級聯(lián)風(fēng)格頁或?qū)盈B樣式表。使用CSS定義的網(wǎng)頁風(fēng)格可以控制HTML語言標(biāo)志的一些諸如字體、邊框、顏色與背景等屬性，也可以通過定義外部風(fēng)格文件實(shí)現(xiàn)整個網(wǎng)站頁面風(fēng)格的統(tǒng)一。 2.CSS的作用的作用（1）將格式和結(jié)構(gòu)分離（2）更容易控制頁面的布局（3）可以制作出體積更小下載更快的網(wǎng)頁（4）可以更快更容易地維護(hù)及更新大量的網(wǎng)頁（5）良好的瀏覽器兼容性4.5.2新建樣式1.新建樣式新建樣式 （1）在屬性面板樣式的樣式菜單中選擇“管理樣式”，在打開的編輯樣式表對話框中單擊“新建”按鈕。（2）使用菜單“文本”“CSS樣式”“新建”。

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

12、供了大量現(xiàn)成的CSS應(yīng)用模板，可以在制作網(wǎng)頁時直接使用。1. CSS網(wǎng)頁網(wǎng)頁2.CSS文件模板文件模板4.6 CSS4.6 CSS屬性屬性4.6.1 類型1.字體（字體（font-family）2.大?。ù笮。╢ont-size） 3.粗細(xì)（粗細(xì)（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.重復(fù)（重復(fù)（background-repeat）4.附件（附件（background-attachment）5.背景圖片位置（背景圖片位置（background-position）4.6.3 區(qū)塊1.字母間距（字母間距（letter-spacing） 2. 字詞間距（字詞間距（word-spacing）3.垂直對齊（垂直對齊（vertical-align）4.文本對齊（文本對齊（text-align ）5. 文本縮進(jìn)（文本縮進(jìn)（text-indent ）6.空格（空格（white-space）7.顯示（顯示（display）4.6.4 方框1.寬（寬（width

14、）和高（）和高（height）2.漂?。ㄆ。╢loat）和清除（）和清除（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.項(xiàng)目符號圖像（項(xiàng)目符號圖像（list-style-image） 3.位置（位置（list-style-position） 4.6.7 定位 定位屬性包括類型、溢出、Z軸、寬、高、位置、剪輯的等，其作用和前面介紹的層的定義相同。事

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

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