第4章 網(wǎng)頁(yè)布局設(shè)計(jì)

1、第四章 網(wǎng)頁(yè)的布局設(shè)計(jì)本章學(xué)習(xí)目的l 表格布局l 框架的基本操作和框架布局，浮動(dòng)框架的基本操作l AP Div的基本知識(shí)l 使用多種方法靈活布局網(wǎng)頁(yè)可以說(shuō)是網(wǎng)站構(gòu)成的基本元素。在網(wǎng)海中遨游，一個(gè)個(gè)精彩的網(wǎng)頁(yè)會(huì)呈現(xiàn)在我們面前，那么，網(wǎng)頁(yè)的精彩與否主要與哪些因素有關(guān)呢？色彩的搭配、文字的變化、圖片的處理等，這些當(dāng)然是不可忽略的因素，除了這些，還有一個(gè)非常重要的因素網(wǎng)頁(yè)的布局。所以在著手設(shè)計(jì)網(wǎng)頁(yè)之前，首先要對(duì)頁(yè)面進(jìn)行布局設(shè)計(jì)，然后再來(lái)設(shè)計(jì)具體的內(nèi)容。使用Dreamweaver CS4設(shè)計(jì)網(wǎng)頁(yè)，主要有三種布局方法：表格布局、框架布局和Div+CSS布局,本章著重介紹表格布局和框架布局，AP Div和D

2、iv+CSS布局只做簡(jiǎn)單介紹，在后面CSS樣式的章節(jié)中會(huì)有詳細(xì)的介紹。4.1 表格布局網(wǎng)頁(yè)4.1.1 表格布局基礎(chǔ)在Dreamweaver CS4中，表格除了用來(lái)管理和組織大量的信息之外，還有一個(gè)很重要的作用，那就是用于網(wǎng)頁(yè)設(shè)計(jì)的布局，也就是說(shuō)把網(wǎng)頁(yè)中的元素放到表格的單元格中進(jìn)行網(wǎng)頁(yè)排版。表格是控制頁(yè)面整體布局的重要工具，也是目前最常用的網(wǎng)頁(yè)設(shè)計(jì)布局方法之一。在使用表格進(jìn)行布局的時(shí)候，要注意表格寬度的問(wèn)題?，F(xiàn)在電腦顯示器尺寸有多種，因而顯示器的最佳分辨率的設(shè)置也有多種，要適應(yīng)目前主流的顯示器分辨率大小。目前，網(wǎng)絡(luò)上的網(wǎng)頁(yè)大多數(shù)還是適應(yīng)分辨率為1024768的顯示器。本書中的網(wǎng)頁(yè)實(shí)例主要都是適應(yīng)

3、這種分辨率的大小。當(dāng)然，1024是顯示器的寬度，除去窗口的邊框等，使用表格布局的最外層表格寬度設(shè)置要稍小一些，如設(shè)置成950左右。表格的基本操作在上一章中已作介紹，本節(jié)主要介紹如何使用表格進(jìn)行布局。在Dreamweaver CS4中已經(jīng)沒有舊版本的“布局表格”和“布局單元格”兩個(gè)功能，使用表格來(lái)進(jìn)行布局，跟使用普通表格的用法是一樣的，只是用來(lái)布局的表格一般都不顯示邊框而已。下面圖4-1、圖4-2、圖4-3和圖4-4所示是常用的表格布局版式。圖4-1 表格常用版式一 圖4-2 表格常用版式二 圖4-3 表格常用版式三 圖4-4 表格常用版式四4.1.2 表格布局案例深海魚下面采用實(shí)例說(shuō)明怎樣使用

4、表格來(lái)進(jìn)行布局。本章中表格和框架布局的素材和實(shí)例都放在“9種食物讓憂郁一掃而空”站點(diǎn)文件夾下，這個(gè)網(wǎng)頁(yè)的主頁(yè)面是框架布局，而各個(gè)鏈接的子頁(yè)面是使用表格來(lái)布局的，先來(lái)看首頁(yè)效果，如圖4-5所示，單擊左邊導(dǎo)航條的任意一個(gè)鏈接項(xiàng)目的網(wǎng)頁(yè)效果如圖4-6所示。 圖4-5使用表格和框架布局的網(wǎng)頁(yè) 圖4-6 “九種食物讓憂郁一掃而空”網(wǎng)頁(yè)效果圖下面介紹如何使用表格布局制作“深海魚”子頁(yè)面，源文件見“main1.html”。本網(wǎng)頁(yè)使用到外部CSS樣式表文件“biaoti.css”，此樣式表文件置于站點(diǎn)文件夾下“CSS”文件夾中，樣式表文件中共定義了三種樣式：為網(wǎng)頁(yè)標(biāo)題設(shè)置的樣式“.biaoti”（標(biāo)題文字效果

5、為：黑體、24px、加粗、白色、居中對(duì)齊）、正文樣式“.zhengwen”（正文文本效果為：宋體、12px、白色）和圖像樣式“img”（圖像邊框效果：顏色#CCCCCC、thick、inset）。CSS外部樣式表文件“biaoti.css”中的代碼如圖4-7所示。打開“CSS樣式”面板，在面板中單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇【附加樣式表】命令，如圖4-8所示，彈出“鏈接外部樣式表”對(duì)話框，點(diǎn)擊“文件/URL”文本框右邊的【瀏覽】按鈕，找到站點(diǎn)下的外部CSS樣式表文件“biaoti.css”，如圖4-9所示，單擊【確定】按鈕即可將外部樣式表文件鏈接進(jìn)來(lái)為本文檔所用。 圖4-7外部CSS樣式

6、表文件“biaoti.css”代碼 圖4-8 快捷菜單圖4-9 “鏈接外部樣式表”對(duì)話框外部樣式表文件鏈接進(jìn)來(lái)以后，就可以通過(guò)網(wǎng)頁(yè)元素標(biāo)簽的“class”屬性或?qū)ο髮傩悦姘宓摹邦悺睂傩赃M(jìn)行設(shè)置了。先來(lái)看最終的網(wǎng)頁(yè)效果，如圖4-10所示。圖4-10 “深海魚”網(wǎng)頁(yè)效果操作步驟如下：（1）新建HTML網(wǎng)頁(yè)文檔，保存到站點(diǎn)文件夾下，并命名為“shenhaiyu.html”。（2）插入表格。單擊【插入】/【表格】菜單命令，彈出“表格”對(duì)話框，設(shè)置上面的參數(shù)為：“行數(shù)”設(shè)為“3”，“列”設(shè)置為“1”，“表格寬度”設(shè)置為“790像素”（設(shè)置這個(gè)寬度是為了方便后面實(shí)例使用），其它幾個(gè)設(shè)置為“0”， 如圖4-

7、11所示，單擊【確定】按鈕后網(wǎng)頁(yè)上插入了一個(gè)3行1列的表格。按照剛才介紹的方法導(dǎo)入外部CSS樣式表文件“biaoti.css”。圖4-11 “表格”對(duì)話框的參數(shù)設(shè)置（4）設(shè)置表格屬性。選中表格中所有的行，打開屬性面板，設(shè)置表格行的“背景顏色”為“#6DBAE2”，“水平”設(shè)置為“居中對(duì)齊”，其它屬性按默認(rèn)。（5）輸入標(biāo)題和版權(quán)信息。在表格的第一行單元格中輸入網(wǎng)頁(yè)標(biāo)題“深 海 魚”，然后選中該標(biāo)題，打開單元格的【屬性】面板，設(shè)置“類”屬性為“.biaoti”，“水平”設(shè)置為“居中對(duì)齊”，如圖4-12所示。表格第三行添加文本“2010-2020 *版權(quán)所有”。圖4-12 單元格的屬性面板（6）設(shè)計(jì)

8、網(wǎng)頁(yè)內(nèi)容。在上面表格的第二行中嵌套插入一個(gè)2行1列的表格，“寬”度設(shè)置為“650”像素，“邊框”設(shè)置為“0”，“對(duì)齊”方式為“居中對(duì)齊”。在嵌套表格的第一行單元格中添加有關(guān)深海魚的文本信息，并將該單元格的屬性面板中“類”屬性設(shè)置為“.zhengwen”，如圖4-13所示。圖4-13 添加正文文本及其屬性設(shè)置圖（7）添加圖片。將鼠標(biāo)定位在嵌套表格的第二行單元格中，打開單元格的【屬性】面版，將“水平”屬性設(shè)置為“居中對(duì)齊”。然后單擊【插入】/【圖像】菜單命令，將圖像“1深海魚.jpg”插入進(jìn)來(lái)，如圖4-14所示。根據(jù)需要適當(dāng)調(diào)整表格屬性。圖4-14 向網(wǎng)頁(yè)中插入圖片（8）參照“shenhaiyu.

9、html”的制作方法，制作“xiangjiao.html”、“putaoyou.html”、 “qmmianbao.html”、“bocai.html”、“dasuan.html”、“nangua.html”、“dzniunai.html”和“jirou.html”八個(gè)相似網(wǎng)頁(yè)文檔，在下一節(jié)的實(shí)例中用到。（9）制作完畢，按F12鍵預(yù)覽網(wǎng)頁(yè)效果。4.2 框架布局網(wǎng)頁(yè)4.2.1 框架基本知識(shí)框架的布局方法主要用于將網(wǎng)頁(yè)分割為多個(gè)HTML頁(yè)面進(jìn)行顯示，即可以在瀏覽器窗口中同時(shí)顯示多個(gè)網(wǎng)頁(yè)，每個(gè)網(wǎng)頁(yè)在一個(gè)框架（Frame）里顯示，且每個(gè)網(wǎng)頁(yè)是相互獨(dú)立的?？蚣懿季终w層次感強(qiáng)、主次分明、規(guī)劃方便，但并不

10、是所有的瀏覽器都支持框架。所以專業(yè)的大型網(wǎng)站一般不選擇使用框架來(lái)進(jìn)行整體布局。框架布局一定有一個(gè)框架集(Frameset)文檔，所謂框架集就是一個(gè)定義了頁(yè)面結(jié)構(gòu)和屬性的HTML頁(yè)面，包括框架數(shù)目、框架的大小、是分行型還是分列型，或者是混合型、在框架中加載頁(yè)面的來(lái)源及其他可定義的屬性。框架集在瀏覽器中不顯示，它只是用于存儲(chǔ)框架的一個(gè)容器?？蚣芤簿褪瞧胀ǖ腍TML文檔，被分別放置到各框架中，當(dāng)鏈接到設(shè)置框架的HTML文檔時(shí)，整個(gè)框架及各HTML文檔就會(huì)一起顯示在瀏覽器中。如圖4-15所示，是框架和框架集之間的關(guān)系。框架也是可以嵌套的，如圖4-15所示的框架樣式其實(shí)是兩個(gè)框架的嵌套：第一個(gè)框架是分行

11、型的，分成上下兩行，在第二個(gè)行中又嵌套插入了另一個(gè)框架，這個(gè)框架是分列型的，分成左右兩列。框架框架框架框架集圖4-15 框架和框架集的關(guān)系4.2.2 建立和保存框架建立框架有三種方法，可以通過(guò)框架按鈕建立，可以通過(guò)框架菜單來(lái)建立，也可以在新建文檔的時(shí)候選擇框架樣式來(lái)建立。下面先來(lái)介紹使用框架按鈕建立框架的基本操作步驟，如下：（1）在【插入】工具欄中選擇【布局】標(biāo)簽，單擊其中的按鈕，則彈出一個(gè)菜單，如圖4-16所示，菜單上顯示多種系統(tǒng)設(shè)計(jì)好的框架布局樣式。圖4-16 【框架】菜單（2）選擇框架樣式。在彈出的菜單中單擊所需的框架格式（這里選擇“頂部和嵌套的左側(cè)框架”），即可將該框架應(yīng)用到頁(yè)面中，框

12、架之間以邊框間隔。同時(shí)彈出“框架標(biāo)簽輔助功能屬性”對(duì)話框，如圖4-17所示，在這里可見，系統(tǒng)為每個(gè)框架都設(shè)置好了名稱（上面的框架默認(rèn)命名為“topframe”， 左邊的框架默認(rèn)命名為“l(fā)eftframe”， 中間主框架默認(rèn)命名為“mainframe”名稱可在代碼或【屬性】面板修改），在這個(gè)對(duì)話框中可以為每個(gè)框架設(shè)置一個(gè)標(biāo)題，設(shè)置完成后單擊【確定】按鈕。圖4-17 插入框架效果（3）框架建立完成，為框架進(jìn)行一些適當(dāng)?shù)膶傩栽O(shè)置即可。除了上面介紹的方法之外，還有通過(guò)框架菜單來(lái)建立框架。單擊【插入】/【HTML】/【框架】菜單命令，在其下一級(jí)子菜單中也有各種框架樣式可供選擇，如圖4-18所示，具體操作

13、方法與第一種方法相同。圖4-18 【插入】菜單中的框架菜單命令或者在新建文檔的時(shí)候，在彈出的“新建文檔”對(duì)話框中左邊的文檔類型選擇“示例中的頁(yè)”，在“示例文件夾”列表中選擇“框架頁(yè)”，然后在“示例頁(yè)”列表框中選擇合適的框架樣式，在對(duì)話框右邊有框架效果預(yù)覽，確定選擇后單擊【創(chuàng)建】按鈕即可建立框架文檔，如圖4-19所示。圖4-19 “創(chuàng)建文檔”對(duì)話框另外，框架建好以后，按住Alt鍵的同時(shí)將光標(biāo)指向框架邊框，當(dāng)光標(biāo)變?yōu)殡p箭頭時(shí)按住鼠標(biāo)左鍵拖曳，也可以建立新的框架（拆分框架）。框架建立好了之后，需要對(duì)框架進(jìn)行保存?？蚣芪募谋４娓胀ㄎ募煌胀ㄎ募粋€(gè)文件就只要保存一次，而框架文件，如上面例子中的

14、“頂部和嵌套的左側(cè)框架”框架樣式建立的框架，共有3個(gè)框架，需要保存4個(gè)文件，分別是一個(gè)框架集文件和3個(gè)普通框架文件，其中每個(gè)框架都會(huì)產(chǎn)生一個(gè)HTML 文件，框架集將單獨(dú)產(chǎn)生另一個(gè)HTML文件。所以，如果一個(gè)框架被分成N個(gè)窗口，則這個(gè)框架需要保存N+1個(gè)網(wǎng)頁(yè)文件。單擊菜單欄中的【文件】/【保存全部】命令，將彈出【另存為】對(duì)話框，根據(jù)提示一步一步操作，首先保存的是框架集文件，其次是分別保存各個(gè)框架文件。采用框架按鈕方法和框架菜單方法建立的框架，系統(tǒng)只提示保存框架集文檔和主框架（最初新建的文檔默認(rèn)作為主框架的頁(yè)面顯示），要保存其他框架，還需將鼠標(biāo)置于該框架頁(yè)上，然后單擊【文件】/【保存框架】一個(gè)一個(gè)

15、來(lái)進(jìn)行保存。建議框架文件的命名能夠體現(xiàn)框架的方位或作用。4.2.3 框架的編輯及屬性設(shè)置在網(wǎng)頁(yè)中插入框架之后，就可以對(duì)框架進(jìn)行編輯操作了，如選擇框架和框架集、修改框架、刪除框架、拆分框架等。編輯框架的基本操作如下：l 單擊網(wǎng)頁(yè)中的框架邊框，可以選擇框架集。l 在網(wǎng)頁(yè)中按住Alt鍵單擊框架，可以選擇該框架，被選擇的框架在頁(yè)面中以虛線邊框表示。l 單擊【窗口】/【框架】菜單命令，在彈出的【框架】面板中單擊框架縮略圖，可以選擇相應(yīng)的框架，如圖4-20所示。l 將光標(biāo)指向框架內(nèi)邊框，當(dāng)光標(biāo)變?yōu)殡p向箭頭時(shí)，按住鼠標(biāo)左鍵拖曳，可以移動(dòng)框架邊框的位置，從而改變框架的形狀。如果按住鼠標(biāo)左鍵向框架外拖曳，則可以

16、刪除該框架。l 將光標(biāo)定位在框架中，單擊【修改】/【框架集】菜單命令，從彈出的子菜單中選擇所需的命令，可以拆分該框架，如圖4-21所示。 4-20 框架縮略圖 4-21 拆分框架的菜單命令選擇了網(wǎng)頁(yè)中的框架集或框架后，可以在【屬性】面板中設(shè)置它們的屬性。如圖4-22所示為框架集的【屬性】面板，現(xiàn)將框架集【屬性】面板的屬性簡(jiǎn)單介紹如下。圖4-22 框架集屬性面板l 邊框：用于設(shè)置所選框架集邊框是否在瀏覽器窗口中顯示。選擇“是”選項(xiàng)時(shí)將以三維立體效果顯示框架集邊框；選擇“否”選項(xiàng)時(shí)將不顯示框架集邊框；選擇“默認(rèn)”選項(xiàng)時(shí)，將由瀏覽器決定是否顯示框架集邊框。大多數(shù)瀏覽器的默認(rèn)設(shè)置為“是”，即顯示框架集

17、邊框。l 邊框?qū)挾龋河糜谠O(shè)置所選框架集的邊框?qū)挾龋瑔挝粸橄袼?。l 邊框顏色：用于設(shè)置所選框架集的邊框顏色。l 行列選定范圍：該區(qū)域位于【屬性】面板右側(cè)，其中深灰色部分表示當(dāng)前所選框架。在該區(qū)域中單擊鼠標(biāo)，可以選擇相應(yīng)的框架。l 值：在文本框中輸入數(shù)值，可以指定所選框架的尺寸。l 行和單位：行用于設(shè)置所選框架的尺寸，單位可以選擇“像素”、“百分比”或“相對(duì)”。選擇任意一個(gè)框架后，【屬性】面板變成框架的屬性面板，如圖4-23所示?？蚣艿摹緦傩浴棵姘逡灿泻芏鄬傩栽O(shè)置，現(xiàn)簡(jiǎn)單介紹如下。圖4-23 框架的【屬性】面板l 框架名稱：用于定義所選框架的名稱，該名稱在創(chuàng)建框架的超級(jí)鏈接時(shí)用到。l 源文件：用于

18、輸入或顯示將在該框架中顯示的網(wǎng)頁(yè)的URL地址，也可以利用和圖標(biāo)選擇網(wǎng)頁(yè)。l 滾動(dòng)：用于設(shè)置是否在框架中顯示滾動(dòng)條。選擇“是”選項(xiàng)時(shí)將在框架中顯示滾動(dòng)條；選擇“否”選項(xiàng)時(shí)，則不顯示滾動(dòng)條；選擇“自動(dòng)”選項(xiàng)時(shí)系統(tǒng)將會(huì)根據(jù)網(wǎng)頁(yè)內(nèi)容的多少?zèng)Q定是否顯示滾動(dòng)條；選擇“默認(rèn)”選項(xiàng)時(shí)，將使用瀏覽器的默認(rèn)設(shè)置，多數(shù)瀏覽器的默認(rèn)設(shè)置為“自動(dòng)”。l 不能調(diào)整大?。哼x中該復(fù)選框時(shí)，瀏覽者在瀏覽網(wǎng)頁(yè)時(shí)不能通過(guò)拖動(dòng)框架邊框改變框架的大小，不選中則瀏覽者可以在瀏覽網(wǎng)頁(yè)時(shí)隨意拖動(dòng)改變框架大小。l 邊框：用于設(shè)置是否顯示框架的邊框。選擇“是”選項(xiàng)時(shí)，將顯示框架的邊框；選擇“否”選項(xiàng)時(shí)，將隱藏框架的邊框；選擇“默認(rèn)”選項(xiàng)時(shí)，將使

19、用瀏覽器的默認(rèn)設(shè)置。l 邊框顏色：用于設(shè)置框架邊框的顏色。該顏色將覆蓋框架集的邊框顏色。l 邊界寬度：用于設(shè)置框架中的內(nèi)容距框架左右邊界之間的空白距離。l 邊界高度：用于設(shè)置框架中的內(nèi)容距框架上下邊界之間的空白距離。4.2.4 框架的超級(jí)鏈接在Dreamweaver CS4中可以使用超鏈接控制框架內(nèi)容的顯示，而這一操作的關(guān)鍵在于正確指定顯示網(wǎng)頁(yè)的目標(biāo)窗口或框架。例如，如果將導(dǎo)航項(xiàng)目放在左側(cè)框架中，要使與其鏈接的網(wǎng)頁(yè)內(nèi)容在主框架中顯示，就必須為導(dǎo)航項(xiàng)目的鏈接指定鏈接目標(biāo)為主框架，這樣，當(dāng)用戶單擊左側(cè)框架中的導(dǎo)航項(xiàng)目時(shí)，與其鏈接的網(wǎng)頁(yè)內(nèi)容將在主框架中顯示。使用超鏈接的操作步驟如下：（1） 選擇框架

20、中要建立超鏈接的文本或其它對(duì)象。（2） 在【屬性】面板的【鏈接】文本框中輸入要鏈接的網(wǎng)頁(yè)的URL地址，也可以利用和圖標(biāo)選擇要鏈接的網(wǎng)頁(yè)文件。（3）在【屬性】面板的【目標(biāo)】選項(xiàng)中選擇用于顯示鏈接網(wǎng)頁(yè)的目標(biāo)窗口或框架。這個(gè)屬性有多個(gè)選項(xiàng)，各選項(xiàng)作用介紹如下：l _blank：表示在新的瀏覽器窗口中打開鏈接的網(wǎng)頁(yè)。l _parent：表示在當(dāng)前框架的父級(jí)框架中打開鏈接網(wǎng)頁(yè)。l _self：表示在當(dāng)前框架中打開鏈接的網(wǎng)頁(yè)。l _top：表示在當(dāng)前網(wǎng)頁(yè)的最頂層框架集中打開鏈接的網(wǎng)頁(yè)。l mainFrame：表示在主框架中打開鏈接的網(wǎng)頁(yè)。l leftFrame：表示在左框架中打開鏈接的網(wǎng)頁(yè)。l topFr

21、ame：表示在上面的框架中打開鏈接的網(wǎng)頁(yè)。其中，后面三個(gè)選項(xiàng)都是建立框架時(shí)給各個(gè)框架命的名稱，因此通過(guò)這個(gè)名稱可以控制鏈接的內(nèi)容在指定名稱的框架中顯示出來(lái)。具體操作通過(guò)下一節(jié)的案例操作來(lái)詳細(xì)說(shuō)明。4.2.5 框架布局案例九種食物讓憂郁一掃而空“九種食物讓憂郁一掃而空”網(wǎng)頁(yè)的首頁(yè)采用框架布局，上框架放置網(wǎng)頁(yè)標(biāo)題，左框架放置導(dǎo)航項(xiàng)目，主框架用來(lái)顯示網(wǎng)頁(yè)的內(nèi)容，效果見圖4-24所示。圖4-24 框架布局網(wǎng)頁(yè)效果下面就來(lái)介紹使用框架布局設(shè)計(jì)該網(wǎng)頁(yè)的操作步驟，如下：（1）新建空白HTML文檔，在【插入】工具欄中選擇【布局】標(biāo)簽，單擊其中的按鈕，則彈出一個(gè)菜單，如圖4-25所示。圖4-25 框架按鈕彈出菜

22、單（2）選擇框架樣式。在彈出的菜單中單擊所需的框架格式“頂部和嵌套的左側(cè)框架”，該框架樣式即刻應(yīng)用到頁(yè)面中。同時(shí)彈出“框架標(biāo)簽輔助功能屬性”對(duì)話框，如圖4-26所示，所有參數(shù)均按默認(rèn)設(shè)置，設(shè)置完成后單擊【確定】按鈕。圖4-26插入框架和設(shè)置框架標(biāo)簽輔助功能屬性（3）保存框架文件。在框架集“標(biāo)題”文本框輸入文檔的標(biāo)題“九種食物讓憂郁一掃而空”，單擊【文件】/【保存全部】菜單命令，彈出“另存為”對(duì)話框，選擇要保存文件的站點(diǎn)目錄，將框架集文件命名“index.html”，單擊【保存】按鈕，在保存好框架集文件的同時(shí)彈出保存主框架的對(duì)話框，主框架命名為“mainframe.html”， 單擊【保存】按鈕

23、保存。將鼠標(biāo)光標(biāo)置于上框架頁(yè)上，單擊【文件】/【保存框架】，將上框架文檔保存為“topframe.html”，再將鼠標(biāo)光標(biāo)置于左框架頁(yè)上，單擊【文件】/【保存框架】，將左框架文檔保存為“l(fā)eftframe.html”。文件保存完畢。（4）設(shè)計(jì)上框架頁(yè)。在上框架頁(yè)中輸入標(biāo)題文本“九種食物讓憂郁一掃而空”，打開【屬性】面板并切換到【CSS】屬性面板，如圖4-27所示。單擊面板上【頁(yè)面屬性】按鈕，打開“頁(yè)面屬性”對(duì)話框，在“分類”列表框中選擇“外觀（CSS）”，然后在右邊設(shè)置參數(shù)“頁(yè)面字體”為“黑體”，加粗，“大小”為“42px”，文本顏色為“#ffffff”，背景顏色設(shè)置為“#1F619C”，單擊

24、【應(yīng)用】按鈕預(yù)覽效果，如圖4-28所示。單擊【確定】按鈕確定設(shè)置。單擊【CSS】屬性面板的按鈕設(shè)置文本居中對(duì)齊。上框架設(shè)計(jì)完畢。圖4-27 CSS屬性面板圖4-28 上框架頁(yè)的設(shè)計(jì)（5）左框架頁(yè)插入表格。將鼠標(biāo)光標(biāo)定位在網(wǎng)頁(yè)的左框架頁(yè)中，單擊【插入】/【表格】菜單命令，彈出“表格”對(duì)話框，設(shè)置“行數(shù)”為“10”，“列”為“1”，“表格寬度”為“100像素”，“邊框粗細(xì)”為“0像素”，“單元格邊距”為“5”，“單元格間距”為“8”，如圖4-29所示。單擊【確定】按鈕插入一個(gè)10行1列表格。圖4-29 “表格”對(duì)話框（6）左框架表格操作。參照第（4）步設(shè)置左框架背景顏色為“#1f619c”。在左框

25、架的表格中輸入十個(gè)導(dǎo)航項(xiàng)目文本“首頁(yè)”等，如圖4-30所示。選中表格中所有的行，打開表格行的屬性面板，設(shè)置“水平”為“居中對(duì)齊”，“垂直”設(shè)置為“居中”?！白煮w”選擇“黑體”，這時(shí)會(huì)彈出一個(gè)“新建CSS規(guī)則”的對(duì)話框，在對(duì)話框中“選擇器類型”項(xiàng)選擇“類（可用于任何HTML元素）”，“選擇器名稱”文本框中輸入樣式名稱“.daohangtiao”，“規(guī)則定義”選擇“僅限該文檔”，單擊【確定】按鈕進(jìn)行確定。打開【CSS樣式】面板，選中剛才設(shè)計(jì)的“.daohangtiao”樣式，在其下屬性中設(shè)置字號(hào)“font-size”為“12px”、文字顏色“color”為白色“#ffffff”、“font-wei

26、ght”設(shè)置為加粗“bold”。設(shè)置后，屬性面板也出現(xiàn)相應(yīng)屬性，如圖4-31所示。通過(guò)輸入空格將導(dǎo)航條項(xiàng)目設(shè)置相同的寬度。左框架頁(yè)設(shè)計(jì)完畢。 圖4-30 添加導(dǎo)航文本 圖4-31 設(shè)置導(dǎo)航文本的屬性后效果（7）設(shè)計(jì)主框架初始頁(yè)。將鼠標(biāo)置于主框架頁(yè)中，打開屬性面板，單擊【頁(yè)面屬性】按鈕，在彈出的【頁(yè)面屬性】對(duì)話框中設(shè)置“背景圖像”為“pic/bg.jpg”。背景圖像設(shè)置好以后，單擊【插入】/【布局對(duì)象】/【AP Div】菜單命令，插入一個(gè)AP 元素，將相關(guān)文本添加到AP 元素中，調(diào)整AP 元素的大小及位置，設(shè)置里面文本的屬性（宋體、12px、顏色#996600），如圖4-32所示。圖4-32 主

27、框架頁(yè)的設(shè)計(jì)（8）設(shè)置框架鏈接。選中左框架頁(yè)中的導(dǎo)航項(xiàng)目“首頁(yè)”，打開其HTML屬性面板，設(shè)置“鏈接”屬性，單擊其后按鈕瀏覽網(wǎng)頁(yè)“mainframe.html”，“目標(biāo)”屬性選擇主框架的名稱“mainframe”，如圖4-33所示。圖4-33 “首頁(yè)”鏈接屬性設(shè)置（9）選中第二個(gè)導(dǎo)航項(xiàng)目“深海魚”，打開HTML屬性面板，設(shè)置“鏈接”屬性，單擊其后按鈕瀏覽網(wǎng)頁(yè)“shenhaiyu.html”，“目標(biāo)”屬性同樣選擇主框架的名稱“mainframe”，如圖4-34所示。其它幾個(gè)導(dǎo)航項(xiàng)目均與“深海魚”項(xiàng)目設(shè)置相同，鏈接文件是之前做好的相關(guān)文件，要注意“目標(biāo)”屬性一定要選擇主框架的名稱“mainfram

28、e”。圖4-34 “深海魚”鏈接屬性設(shè)置（10）設(shè)置左框架鏈接樣式。打開【CSS樣式】面板，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中單擊【新建】命令，彈出“新建CSS規(guī)則”對(duì)話框，“選擇器類型”選擇“復(fù)合內(nèi)容（基于選擇的內(nèi)容）”，“選擇器名稱”下拉列表框中選擇“a:link”（鏈接樣式），單擊【確定】按鈕，為其文本顏色屬性“color”設(shè)置白色“#ffffff”， 下劃線屬性“text-decoration”設(shè)置“none”。按此方法設(shè)置“a：visited”（鏈接訪問(wèn)過(guò)后樣式）、“a：hover”（鼠標(biāo)指向鏈接的樣式）和“a：active”（激活鏈接時(shí)的樣式），其文本顏色屬性“color”設(shè)置 “#

29、ffffff”， 下劃線屬性“text-decoration”設(shè)置“none”。（11）框架布局的網(wǎng)頁(yè)“九種食物讓憂郁一掃而空”制作完畢，預(yù)覽效果即可。提示：以先新建網(wǎng)頁(yè)文檔再插入框架的方式制作的框架網(wǎng)頁(yè)，最初新建的那個(gè)文檔會(huì)被默認(rèn)作為網(wǎng)頁(yè)的主框架文檔。如本例中的文檔“mainframe.html”就是最初新建的那個(gè)文檔。4.2.6 浮動(dòng)框架浮動(dòng)框架（iframe）是指在網(wǎng)頁(yè)文檔中，以框架形式顯示其他網(wǎng)頁(yè)文檔、主頁(yè)、公告板或記事本等的功能，利用這一功能，可以在指定的位置以指定的大小顯示其他網(wǎng)頁(yè)文檔或站點(diǎn)，例如滾動(dòng)新聞等。單擊【插入】/【HTML】/【框架】/【iframe】菜單命令，可以在網(wǎng)頁(yè)

30、文檔中自動(dòng)打開【拆分】視圖，而且窗口的【代碼】窗格中自動(dòng)插入了一對(duì)標(biāo)簽，其【設(shè)計(jì)】窗格中插入了一個(gè)浮動(dòng)框架，如圖4-35所示。圖4-35 插入浮動(dòng)框架浮動(dòng)框架一般通過(guò)代碼來(lái)設(shè)置其屬性，詳見本書2.3.7節(jié)所述，在此不再贅述。下面舉一實(shí)例，在浮動(dòng)框架中顯示新浪網(wǎng)的首頁(yè)。以下是代碼的預(yù)覽效果，見范例“iframe.html”。 以下圖4-36是網(wǎng)頁(yè)預(yù)覽效果截圖。圖4-36 浮動(dòng)框架中打開新浪網(wǎng)首頁(yè)4.3 AP Div布局網(wǎng)頁(yè)4.3.1 AP Div概述什么是AP Div？其實(shí)，AP Div在Dreamweaver CS4中就等同于前期版本中的“層”，有些教材中稱為CSS-P元素，有些教材稱為AP元

31、素，本章將AP Div元素統(tǒng)稱為AP元素。AP元素是網(wǎng)頁(yè)設(shè)計(jì)中非常有特色的一種頁(yè)面元素。前面已經(jīng)學(xué)習(xí)了使用表格和框架進(jìn)行頁(yè)面布局，其實(shí)AP元素也是常用的一種布局方法，而且相比其它兩種布局方法，AP元素最大的特點(diǎn)是可以方便地定位于網(wǎng)頁(yè)中的任意位置。AP元素就像是包含文字和圖像等網(wǎng)頁(yè)元素的透明膠片，這些膠片按一定的順序疊放在一起，上面膠片的內(nèi)容會(huì)遮住下面膠片的內(nèi)容，所有膠片和網(wǎng)頁(yè)共同組合成頁(yè)面的最終效果。前面我們學(xué)習(xí)了表格，知道了表格可以作為頁(yè)面布局的容器。AP元素也是作為網(wǎng)頁(yè)布局的容器，AP元素內(nèi)可以包含文本、圖形圖像、動(dòng)畫、音頻、視頻、表格等一切可以放置到HTML中的網(wǎng)頁(yè)元素，甚至可以在AP元

32、素內(nèi)放置AP元素。使用AP元素結(jié)合CSS樣式可以對(duì)網(wǎng)頁(yè)元素進(jìn)行精確定位，而AP元素結(jié)合行為更可以實(shí)現(xiàn)許多特效?，F(xiàn)在很多網(wǎng)站都是使用AP元素來(lái)定位廣告和分屏顯示等。本章我們就為大家簡(jiǎn)單地介紹一下AP元素的相關(guān)內(nèi)容。選擇菜單【編輯】|【首選參數(shù)】，打開【首選參數(shù)】對(duì)話框，在該對(duì)話框的左側(cè)選擇【AP元素】選項(xiàng)，則對(duì)話框的右側(cè)出現(xiàn)層的默認(rèn)設(shè)置，如下圖4-37所示 ，在這里，可以設(shè)置AP元素默認(rèn)的大小和顏色等屬性。圖4-37 “首選參數(shù)”對(duì)話框設(shè)置AP元素“首選參數(shù)”對(duì)話框中參數(shù)的設(shè)置含義同下一節(jié)AP元素屬性參數(shù)的設(shè)置一致。4.3.2 AP元素的創(chuàng)建及屬性設(shè)置1、創(chuàng)建AP 元素單擊【插入】/【布局對(duì)象】

33、/【AP Div】菜單命令即可插入一個(gè)AP元素，如圖4-38所示?；蛘邌螕簟静迦搿棵姘逯小静季帧窟x項(xiàng)卡下的【描繪AP Div】按鈕，在網(wǎng)頁(yè)中拖出所需大小的AP元素即可。圖4-38 插入AP 元素從圖中可以看出，AP元素就像是透明的膠片，它們按一定順序疊放在一起，可以被拖動(dòng)到任意位置，還可以根據(jù)需要改變大小。除此之外，AP元素中還可以嵌套另外的AP元素，并可以對(duì)AP元素進(jìn)行一些屬性設(shè)置。在一個(gè)AP元素中插入另外一個(gè)AP元素就形成了AP元素的嵌套，嵌套通常用于將AP元素組織在一起。具體操作是：將鼠標(biāo)置于AP元素內(nèi)，單擊【插入】/【布局對(duì)象】/【AP Div】菜單命令即可在AP元素中嵌套插入另一個(gè)A

34、P元素，如圖4-39所示。圖4-39 AP 元素的嵌套2、設(shè)置AP元素的屬性AP元素插入以后，單擊【窗口】/【屬性】菜單命令，打開其屬性面板，就可以設(shè)置它的屬性了，見圖4-40所示。圖4-40 AP Div1的屬性面板下面對(duì)屬性面板上的屬性做簡(jiǎn)單介紹如下：l 層編號(hào)：顯示AP元素的名稱，用于識(shí)別不同的層。l 左：設(shè)置AP元素距瀏覽器窗口左邊界的距離數(shù)值。l 上：設(shè)置AP元素距瀏覽器窗口上邊界的距離數(shù)值。l 寬和高：設(shè)置AP元素的寬度和高度。l Z軸：設(shè)置AP元素的疊放順序，數(shù)值越大，疊放的順序越靠上。l 類：可以選擇AP元素的CSS樣式。l 背景圖像：設(shè)置AP元素的背景圖像。l 背景顏色：設(shè)置

35、AP元素的背景顏色。l 可見性：設(shè)置AP元素的顯示狀態(tài)?？梢赃x擇 default（當(dāng)未指定可見性時(shí)，多數(shù)瀏覽器默認(rèn)為繼承）、inherit（繼承該AP元素父級(jí)的可見性）、visible（可見）和hidden（不可見）4個(gè)選項(xiàng)。l 剪輯：指定AP元素的可見部分?？梢栽谟疫叺摹白蟆?、 “右”、“上” 和“下”文本框中輸入距離AP元素4個(gè)邊界的距離數(shù)值，即剪切的寬度。l 溢出：當(dāng)AP元素的大小已經(jīng)不能完全顯示里面的內(nèi)容時(shí)，可以設(shè)置此項(xiàng)來(lái)對(duì)超出部分內(nèi)容作出處理。有4個(gè)選項(xiàng)：visible（顯示超出部分）、hidden（隱藏超出部分）、scroll（不管是否超出，都顯示滾動(dòng)條）和auto（如果有超出，則

36、顯示滾動(dòng)條，否則不顯示）。提示：位置和大小的默認(rèn)單位為px (像素)。也可以指定以下單位：pc (pica)、pt（點(diǎn)）、in（英寸）、mm（毫米）、cm（厘米）或 %（父層相應(yīng)值的百分比）。單位縮寫必須緊跟在值之后，中間不留空格，例如，500px 表示500像素。3、AP元素面板通過(guò)【AP元素】面板可以管理文檔中的AP元素，使用【AP元素】面板可防止AP元素重疊，更改AP元素的可見性、名稱，將AP元素嵌套或堆疊，更改AP元素的堆疊順序，以及選擇一個(gè)或多個(gè)AP元素。單擊【窗口】/【AP元素】菜單命令，或直接按F2功能鍵，即可打開【AP元素】面板?！続P元素】面板顯示為按z 軸順序排列的名稱列表

37、；首先創(chuàng)建的AP元素出現(xiàn)在列表的底部，最新創(chuàng)建的AP元素出現(xiàn)列表的頂部。如圖4-41所示。圖4-41 AP元素疊放效果及面板面板下面來(lái)介紹【AP元素】面板的基本操作：l 選擇AP元素：在面板上單擊AP元素的名稱即可選中該AP元素。l 更改AP元素的名稱：在面板上雙擊AP元素的名稱即可變成可編輯狀態(tài)，輸入恰當(dāng)?shù)拿Q即可。如圖4-42所示。圖4-42 修改AP元素的名稱l 改變AP元素的疊放順序：?jiǎn)螕鬉P元素名稱并按住鼠標(biāo)左鍵不放，然后向上或向下拖動(dòng)鼠標(biāo)，拖動(dòng)時(shí)會(huì)出現(xiàn)一條放置線，它指示該層將出現(xiàn)的位置，當(dāng)放置線出現(xiàn)在疊放順序中的所需位置時(shí)，松開鼠標(biāo)左鍵即可將該AP元素疊放在此順序位置。或者直接單擊

38、AP元素名稱后面的“Z”值進(jìn)行修改。Z值大的疊放到上面，Z值小的疊放到下面。l 設(shè)置AP元素可見性：在AP元素的眼形圖標(biāo)列內(nèi)單擊可以更改對(duì)應(yīng)AP元素在【設(shè)計(jì)】視圖中的可見性。眼睛睜開表示該AP元素是可見的。眼睛閉合表示該AP元素是不可見的。如果沒有眼形圖標(biāo)，該AP元素通常會(huì)繼承其父級(jí)的可見性，如圖4-43所示。圖4-43 設(shè)置AP元素的可見性l 防止AP元素重疊：當(dāng)AP元素重疊時(shí)，可能會(huì)限制一些操作。選擇項(xiàng)，在創(chuàng)建、移動(dòng)和調(diào)整AP元素大小時(shí)會(huì)約束AP元素的位置，使它們不會(huì)重疊。如圖4-44所示是設(shè)置了“防止重疊”后，當(dāng)移動(dòng)“green”和“blue” 元素時(shí)出現(xiàn)的效果，原本疊放在一起的三個(gè)元素

39、全部都不能再重疊在一起了。當(dāng)這個(gè)參數(shù)處于選中狀態(tài)時(shí)，不能創(chuàng)建AP元素的嵌套。圖4-44 設(shè)置“防止重疊”后的效果6）、顯示或隱藏嵌套的AP元素：如果有嵌套的AP元素，單擊AP元素名稱旁邊的加號(hào)(+) 或減號(hào)(-) 按鈕，則可以控制嵌套的AP元素是折疊起來(lái)只顯示為連接到的父AP元素的名稱，還是打開來(lái)顯示該嵌套AP元素本身，如圖4-45所示，“blue” 元素前面是減號(hào)，表明可以折疊子AP元素，“yellow”元素前面是加號(hào)，表明可以打開子AP元素。圖4-45 嵌套AP元素的查看4.3.3 AP Div的編輯操作1、向AP元素中添加內(nèi)容在AP元素中可以添加文本、圖像、表格、表單及Flash等其它媒

40、體對(duì)象，操作方法與在網(wǎng)頁(yè)中直接插入這些網(wǎng)頁(yè)元素基本一致。1) 添加文本：向AP元素中添加文本，可以將光標(biāo)置于AP元素中，直接輸入文本；也可以使用剪貼板，將現(xiàn)成的文本粘貼到AP元素中。2) 添加圖像：將光標(biāo)置于AP元素中，單擊【插入】/【圖像】菜單命令，從彈出的【選擇圖像源文件】對(duì)話框中選擇要插入的圖像。 2、同時(shí)選中多個(gè)AP元素按住【Shift】 鍵的同時(shí)，在【設(shè)計(jì)】視圖中單擊AP元素?；虬醋　維hift】 鍵的同時(shí)，在【AP元素】面板上單擊AP元素的名稱，即可同時(shí)選中多個(gè)AP元素。3、移動(dòng)AP元素首先在【設(shè)計(jì)】視圖中，選擇一個(gè)或多個(gè)要移動(dòng)的AP元素，然后可以通過(guò)三種方式進(jìn)行移動(dòng)：l 拖動(dòng)選定

41、AP元素的選擇柄或邊框即可移動(dòng)。l 使用方向鍵一次移動(dòng)1個(gè)像素的位置；l 按住【Shift 】鍵的同時(shí)使用方向鍵，可以一次移動(dòng)10個(gè)像素的位置。4、調(diào)整AP元素的大小在【設(shè)計(jì)】視圖中，選擇要調(diào)整大小的AP元素，之后可通過(guò)以下四種方式進(jìn)行大小調(diào)整：l 拖動(dòng)該AP元素的任一大小調(diào)整柄；l 按住【Ctrl】 鍵的同時(shí)使用方向鍵一次調(diào)整1個(gè)像素大小；l 按住【Shift】和【Ctrl】鍵的同時(shí)使用方向鍵一次調(diào)整10個(gè)像素的大??；l 在【屬性】面板直接鍵入AP元素的寬度（W）和高度（H）的值。5. AP元素的對(duì)齊在【設(shè)計(jì)】視圖中，選擇多個(gè)要對(duì)齊的AP元素。單擊【修改】/【排列順序】菜單命令下對(duì)應(yīng)的對(duì)齊選

42、項(xiàng)。如圖4-46所示。圖4-46 設(shè)置AP元素對(duì)齊的菜單提示：使用AP 元素對(duì)齊命令是按照最后一個(gè)被選定的AP元素的邊框來(lái)對(duì)齊的。當(dāng)對(duì)AP元素進(jìn)行對(duì)齊時(shí)，未選定的子AP元素可能會(huì)因?yàn)槠涓窤P元素被選定移動(dòng)而移動(dòng)。若要避免這種情況，請(qǐng)不要使用嵌套AP元素。6、刪除和復(fù)制AP元素1）、刪除AP元素：選中不需要的AP元素，單擊【編輯】/【清除】菜單命令，或按下Del鍵，即可刪除該AP元素。2）、復(fù)制AP 元素：選中需要復(fù)制的AP元素，單擊【編輯】/【拷貝】菜單命令，然后將光標(biāo)置于文檔中要粘貼AP元素的位置，單擊【編輯】/【粘貼】菜單命令即可完成粘貼?；蛘咧苯舆x中該AP元素后，同時(shí)按下Ctrl+C復(fù)制

43、，將光標(biāo)置于要粘貼AP元素的位置，再按下Ctrl+V粘貼后調(diào)整元素位置即可。4.3.4 AP元素與表格的相互轉(zhuǎn)換1. 將AP元素轉(zhuǎn)換為表格1) 選擇菜單【修改】/【轉(zhuǎn)換】/【將AP Div轉(zhuǎn)換為表格】，即可顯示“將AP Div轉(zhuǎn)換為表格”對(duì)話框，如圖4-47所示。圖4-47將AP Div轉(zhuǎn)換為表格的操作2) 選擇所需的選項(xiàng)，單擊【確定】按鈕即可完成轉(zhuǎn)換，如圖4-48所示。圖4-48 將AP Div轉(zhuǎn)換為表格后效果2. 將表格轉(zhuǎn)換為AP元素1) 單擊【修改】/【轉(zhuǎn)換】/【將表格轉(zhuǎn)換為AP Div】菜單命令，彈出“將表格轉(zhuǎn)換為AP Div”對(duì)話框，圖4-49所示。 圖4-49將表格轉(zhuǎn)換為AP Di

44、v提示：如果出現(xiàn)AP元素嵌套或?qū)盈B的現(xiàn)象將不能進(jìn)行轉(zhuǎn)換。2) 選擇所需的選項(xiàng)，單擊【確定】按鈕即可將現(xiàn)成的表格轉(zhuǎn)換為AP Div，如圖4-50所示。圖4-50 表格轉(zhuǎn)換為AP Div后的效果提示：按默認(rèn)設(shè)置轉(zhuǎn)換后會(huì)自動(dòng)顯示網(wǎng)格，可以單擊【查看】/【網(wǎng)格設(shè)置】菜單命令，將【顯示網(wǎng)格】子菜單項(xiàng)前面的勾去掉即可去掉網(wǎng)格，或者在設(shè)置“將表格轉(zhuǎn)換為AP Div”對(duì)話框時(shí)就將“顯示網(wǎng)格”項(xiàng)前面的去掉。4.4 實(shí)訓(xùn)：鳳凰旅游網(wǎng)4.4.1 實(shí)訓(xùn)1表格布局之“首頁(yè)”【實(shí)訓(xùn)目的】l 掌握使用表格布局網(wǎng)頁(yè)的方法l 掌握表格的操作與各種網(wǎng)頁(yè)元素的插入技能l 熟練動(dòng)畫、圖像、文本、表格和超級(jí)鏈接等的使用下圖4-51是網(wǎng)

45、頁(yè)“鳳凰旅游網(wǎng)”的預(yù)覽效果圖。圖4-51 “鳳凰旅游網(wǎng)”預(yù)覽效果圖該網(wǎng)頁(yè)采用表格布局，綜合使用多種網(wǎng)頁(yè)設(shè)計(jì)元素，頁(yè)面美觀、操作方便。下面就來(lái)介紹該網(wǎng)頁(yè)的制作步驟：（1）布局設(shè)計(jì)。插入一個(gè)6行1列的表格，寬度設(shè)置為940像素，“填充”、“間距”和“邊框”都設(shè)為“0”，表格對(duì)齊方式 “水平” 為“居中對(duì)齊”。其中第一行做標(biāo)題區(qū)；第二行做導(dǎo)航區(qū)；第三行拆分成兩列，左邊是風(fēng)景動(dòng)畫展示區(qū)，右邊再拆分為兩行，上行是子標(biāo)題區(qū)1，下行是內(nèi)容區(qū)1；第四行是子標(biāo)題區(qū)2；第五行是內(nèi)容區(qū)2；最后一行是版權(quán)區(qū)。如圖4-52所示。圖4-52 “鳳凰旅游網(wǎng)”總體布局設(shè)計(jì)（2）設(shè)計(jì)標(biāo)題和導(dǎo)航區(qū)。在第一行插入動(dòng)畫“bn.swf

46、”，設(shè)置行高與flash動(dòng)畫高度一致。第二行在屬性面板設(shè)置“背景顏色”為“#F2CCE3”，“水平”為“居中對(duì)齊”，然后插入一個(gè)1行6列的表格，分別輸入導(dǎo)航項(xiàng)目，如圖4-53所示。圖4-53 設(shè)計(jì)好標(biāo)題和導(dǎo)航條（3）設(shè)計(jì)第三行。在第三行左邊插入風(fēng)景展示動(dòng)畫。右邊“子標(biāo)題區(qū)1”添加標(biāo)題文字并設(shè)置單元格背景顏色為“#D18EE8”；“內(nèi)容區(qū)1”中插入一個(gè)3行3列的表格，“寬度”設(shè)置為“100%”， “填充”、“間距”和“邊框”都設(shè)為“0”，將第一行和第三行中后面的兩個(gè)單元格合并，第二行將前面兩個(gè)單元格進(jìn)行合并，然后分別添加相應(yīng)的文本和圖像，如圖4-54所示。圖4-54 第三行設(shè)計(jì)好后的效果（4）設(shè)

47、計(jì)第四、五行。如步驟（3）中設(shè)計(jì)“子標(biāo)題區(qū)1”的方法設(shè)計(jì)第四行“子標(biāo)題區(qū)2”。在第五行插入一個(gè)2行6列的表格，“寬度”設(shè)置為“100%”， “填充”、“間距”和“邊框”都設(shè)為“0”，然后在每個(gè)單元格中分別添加相應(yīng)的圖像及與之相對(duì)應(yīng)的文本內(nèi)容，并根據(jù)需要適當(dāng)?shù)卦O(shè)置圖像的一些格式。（5）設(shè)計(jì)第六行“版權(quán)區(qū)”。為版權(quán)區(qū)單元格設(shè)置背景顏色“#D18EE8”，并在屬性面板中設(shè)置“水平”對(duì)齊方式為“居中對(duì)齊”，效果如圖4-55所示。圖4-55 網(wǎng)頁(yè)最后三行的設(shè)計(jì)（6）設(shè)置超級(jí)鏈接。分別為導(dǎo)航條設(shè)置超級(jí)鏈接，其他的文字和圖像根據(jù)需要設(shè)置鏈接，部分可以設(shè)置一些空鏈接。（7）設(shè)置樣式。分別為全文、鏈接、圖像和標(biāo)

48、題文本設(shè)置不同的樣式。單擊【屬性】面板的【頁(yè)面屬性】按鈕，設(shè)置字體：12px，顏色：#333。到代碼視圖查看生成的代碼如下：.body,td,th font-size: 12px;color: #333;在【CSS樣式】面板新建“類”樣式“.biaoti1”（字體：新宋體；字號(hào)：15px；顏色：白色#FFFFFF）和“.biaoti2”（字號(hào)：13px；顏色：紅色#FF0000；粗細(xì)：bolder）樣式。為兩個(gè)子標(biāo)題設(shè)置樣式“.biaoti1”，為美食菜單名設(shè)置樣式“.biaoti2”。分別選中網(wǎng)頁(yè)中兩個(gè)子標(biāo)題和美食菜單名，即可打開其屬性面板，在面板中“類”屬性下拉列表框中選中相應(yīng)的樣式名稱即

49、可使用樣式。自動(dòng)生成的代碼如下：.biaoti1 font-family: 新宋體;font-size: 15px;font-weight: bold;color: #FFF;.biaoti2 font-size: 13px;color: #F00;font-weight: bolder;在【CSS樣式】面板新建“標(biāo)簽”樣式“img”，標(biāo)簽樣式設(shè)置好后會(huì)自動(dòng)應(yīng)用到該標(biāo)簽。設(shè)置標(biāo)簽樣式：邊框?qū)挾龋?px；邊框線型：groove；邊框顏色：#D18EE8。自動(dòng)生成的代碼如下：img border: 2px groove #D18EE8;在【CSS樣式】面板新建“復(fù)合內(nèi)容”樣式鏈接樣式“a:link”（字號(hào)：12px；粗細(xì)：bold；下劃線：none）、 訪問(wèn)過(guò)后鏈接樣式“a:visited”（ 字號(hào)：12px；粗細(xì)：bold；下劃線：none）、 鼠標(biāo)置于鏈接上方的樣式“a:hover” （字號(hào)：13px；傾斜：italic；粗細(xì)：bolde