第四章頁(yè)面設(shè)計(jì)

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

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

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

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

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

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

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

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

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

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

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

12、供了大量現(xiàn)成的CSS應(yīng)用模板，可以在制作網(wǎng)頁(yè)時(shí)直接使用。1. CSS網(wǎng)頁(yè)網(wǎng)頁(yè)2.CSS文件模板文件模板4.6 CSS4.6 CSS屬性屬性4.6.1 類(lèi)型1.字體（字體（font-family）2.大小（大?。╢ont-size） 3.粗細(xì)（粗細(xì)（font-weight） 4.樣式（樣式（font-style） 5.變量變量6.行高（行高（line-height）7.大小寫(xiě)（大小寫(xiě)（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.垂直對(duì)齊（垂直對(duì)齊（vertical-align）4.文本對(duì)齊（文本對(duì)齊（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.類(lèi)型（類(lèi)型（list-style-type ）2.項(xiàng)目符號(hào)圖像（項(xiàng)目符號(hào)圖像（list-style-image） 3.位置（位置（list-style-position） 4.6.7 定位 定位屬性包括類(lèi)型、溢出、Z軸、寬、高、位置、剪輯的等，其作用和前面介紹的層的定義相同。事

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

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