網(wǎng)頁設(shè)計實(shí)用技術(shù)-第3章

第3章

網(wǎng)頁設(shè)計布局工具綜合應(yīng)用

制作：蔡宗吟3.1表格3.2超鏈接3.3創(chuàng)建并使用外部CSS樣式3.4框架3.5Div+CSS第3章網(wǎng)頁設(shè)計布局工具綜合應(yīng)用

表格是網(wǎng)頁設(shè)計制作不可缺少的元素，它以簡潔明了和高效快捷的方式將圖片、文本、數(shù)據(jù)和表單等元素有序地顯示在頁面上，讓我們可以設(shè)計出漂亮的頁面。使用表格排版的頁面在不同平臺、不同分辨率的瀏覽器里都能保持其原有的布局，而在不同的瀏覽器平臺有較好的兼容性，所以表格是網(wǎng)頁中最常用的排版方式之一。3.1表格將結(jié)合“旅游新聞”頁面的實(shí)現(xiàn)，為大家介紹表格的基本操作過程。3.1.1表格基本操作1．插入表格在文檔窗口中，將光標(biāo)放在需要創(chuàng)建表格的位置，單擊“插入”→“常用”→“表格”命令；或者選擇“插入”→“表格”命令，彈出“表格”對話框。2.1.2DreamweaverCS5工作區(qū)

無邊框表格 有邊框表格 有邊框有間距表格2．選擇表格（1）選擇整個表格（2）選擇單個單元格（3）選擇連續(xù)的單元格（4）選擇不連續(xù)的單元格（5）選擇行或列3．調(diào)整表格的大小選取整個表格后，將鼠標(biāo)放在表格邊框周圍的黑色小方塊上，鼠標(biāo)變?yōu)殡p箭頭后按住鼠標(biāo)左鍵拖動，即可改變表格大小。把鼠標(biāo)放在需要調(diào)整列的邊框處，鼠標(biāo)變?yōu)?/p>

時，按住鼠標(biāo)左鍵拖動即可改變行或列的大小。4．向表格填加內(nèi)容在建立的無邊框兩行兩列的表格中填加內(nèi)容。首先在第一行第一列和第二列輸入內(nèi)容，輸入完成后，表格會根據(jù)內(nèi)容自動調(diào)整單元格的大小，如圖3-8所示。5．插入行或列（1）插入單行或單列（2）插入多行或多列單擊一個單元格，選擇“修改”→“表格”→“插入行或列”命令，彈出“插入行或列”對話框，在其中選擇“行”或“列”選項(xiàng)，如左圖所示。然后在“插入行或列”對話框中設(shè)置需要插入的行或列的數(shù)目，如右圖所示。6．刪除行或列7．拆分和合并單元格8．設(shè)置表格屬性9．設(shè)置單元格屬性在“屬性”面板中可以設(shè)置表格的各項(xiàng)屬性參數(shù)。（1）表格ID：設(shè)置表格的名稱。該名稱通常在編寫代碼時用到，一般不需要設(shè)定。（2）行和列：表格中行和列的數(shù)目?？梢酝ㄟ^修改兩個文本框的數(shù)值來改變表格的行數(shù)或列數(shù)。（3）寬和高：是以像素為單位或按占瀏覽器窗口寬度的百分比計算的表格寬度和高度。通常不需要設(shè)置表格的高度。（4）填充：即單元格邊距是單元格內(nèi)容和單元格邊框之間的距離。如果將填充值設(shè)為5，則得到如圖3-15所示的效果。（5）間距：即單元格間距是相鄰的單元格之間的距離。如果將間距設(shè)為5，則得到如圖3-16所示的效果。

（6）對齊：確定表格相對于同一段落中其他元素（如文本或圖像）的顯示位置。（7）邊框：指定表格邊框的寬度，以像素為單位。（8）清除列寬和清除行高按鈕：從表格中刪除所有明確指定的行高或列寬。（9）和按鈕：將表格寬度在像素和百分比之間轉(zhuǎn)換。圖3-16設(shè)置間距后的效果圖3-15設(shè)置填充后的效果10．CSS風(fēng)格設(shè)置步驟1：給“旅游新聞”設(shè)置文字大小、背景圖片等。步驟2：給所有新聞標(biāo)題信息設(shè)置文字風(fēng)格，使用類名選擇器，類名為“newslist”。步驟3：為表格設(shè)置外邊框，顏色為“#adcf7c”，使用類名選擇器，名稱為“table_border”。使用表格進(jìn)行網(wǎng)頁整體布局，將各種不同的網(wǎng)頁元素準(zhǔn)確定位和整齊規(guī)范地展現(xiàn)出來，創(chuàng)造出友好、精美的界面效果，并確保在不同大小的窗口和屏幕分辨率下都能正常顯示。將復(fù)雜的頁面結(jié)構(gòu)設(shè)計出來，首先要掌握嵌套表格技術(shù)，可以實(shí)現(xiàn)化繁為簡，并能保證每個版塊的相對獨(dú)立。3.1.2表格布局最外層表格結(jié)構(gòu)嵌入表格后的效果3.1.3表格布局應(yīng)用實(shí)例1．新建網(wǎng)頁新建網(wǎng)頁文件，保存新建文檔為index.html。設(shè)置網(wǎng)頁標(biāo)題為“樂山樂水”。2．設(shè)置網(wǎng)頁整體風(fēng)格使用body作為選擇器，設(shè)置頁面的字體屬性“Font-family”為“宋體”，“Font-size”為12像素，“方框”分類中的上邊距“margin-top”值為0，使頁面內(nèi)容與上邊界緊貼。3．制作首頁頁眉（1）在網(wǎng)頁中插入一個2行1列的表格，寬度為1000像素，在表格“屬性”面板中設(shè)置表格為“居中對齊”。在第1行中嵌入2行2列的表格，寬度設(shè)為100%。（2）在250×90大小的位置插入網(wǎng)頁Logo（標(biāo)志），圖片名為logo.png。（3）在750×30大小的單元格中嵌套1行7列的表格“導(dǎo)航表格1”，此表格寬度為257像素且水平居右對齊，第1、3、5、7列的寬度為85像素，第2、4、6列的寬度為1像素。導(dǎo)航表格1導(dǎo)航表格2LOGOFlash頁眉表格結(jié)構(gòu)圖“導(dǎo)航表格1”效果在“導(dǎo)航表格1”單元格中輸入內(nèi)容，文字顏色為“#717270”，設(shè)置ID選擇器“header_text”進(jìn)行風(fēng)格處理，并應(yīng)用于此表格，得到如下圖所示的效果。（4）嵌套1行8列的表格“導(dǎo)航表格2”，水平居中排列。此表格寬度為257像素，高度為47像素，第1列和第8列的寬度設(shè)為11像素，其余單元格自動均分。在第1列插入圖片navi_left.jpg，第8列插入圖片navi_right.jpg。第2列到第7列需設(shè)置背景圖片navi_bg.jpg，由于此圖片大小為1×47，因此需要重復(fù)鋪設(shè)。制作首頁頁眉“導(dǎo)航表格2”階段性效果在第2列到第7列單元中輸入文字內(nèi)容，且水平居中排列。設(shè)置名為“navi_text”的類選擇器，文字大小設(shè)為14像素。制作首頁頁眉“導(dǎo)航表格2”最終效果（5）在大小為1000×270的單元格中插入Flash動畫，文件名為banner.swf。其操作方法如下：在“插入”面板中選擇“常用”→“媒體”→“SWF”命令。制作首頁頁眉“媒體”菜單頁眉最終效果4．設(shè)置頁面主體內(nèi)容結(jié)構(gòu)插入一個1行3列的表格，寬度為1000像素，居中對齊。第1列和第3列單元格寬度為250像素。對表格上、下邊框進(jìn)行設(shè)置，選擇類名選擇器，名為“main_border”，設(shè)置“Border-style”為“solid”，“Border-width”為1像素，“Border-color”為“#3e6508”。對第2列（即中間的單元格）進(jìn)行左、右邊框線設(shè)置，類名選擇器為td2，除邊框線位置外，其他風(fēng)格與選擇器main_border設(shè)置的相同。應(yīng)用后，得到如圖所示的效果。5．制作頁面主體左列內(nèi)容（1）在第1列插入3行1列的表格，如圖3-37所示。在此表格的第1行插入“旅游新聞”版塊。第3行插入“友情鏈接”版塊。第2行為版塊間隔行，高度為3像素，要切換到“代碼”視圖則將其默認(rèn)的空格（

）去掉。間隔設(shè)置“旅游新聞”版塊“友情鏈接”版塊（2）制作“旅游新聞”版塊。在第1列單元格中插入2行1列的表格，寬度為243像素，且水平居中排列。設(shè)置外邊框風(fēng)格，設(shè)置類名選擇器“outer_border”，在“outer_border的CSS定義”對話框中設(shè)置“邊框”類別風(fēng)格屬性。“Border-style”為“solid”，“Border-width”為1像素，“Border-color”為“#b0d182”，如圖所示效果。說明：“out_border”類選擇器將應(yīng)用于“友情鏈接”、“樂山美食”和“樂山酒店”版塊。制作頁面主體左列內(nèi)容將第1行高度設(shè)置為32像素，設(shè)置此單元格的背景圖片為news_bg.jpg，包含的文字內(nèi)容設(shè)置“font-family”為“華文楷體”，“Font-size”為18像素，“Font-weight”為“bold”。同時插入箭頭圖片arrow.gif和更多圖片more.gif，得到如圖3-42所示的效果。在第2行以列表的方式插入新聞信息，并將列表標(biāo)記設(shè)置為圖片news.gif，列表項(xiàng)之間的行高設(shè)置為30像素，得到如圖3-43所示的效果。制作頁面主體左列內(nèi)容（3）制作“友情鏈接”版塊。（操作方法與“旅游新聞”相同）制作頁面主體左列內(nèi)容6．制作主體內(nèi)容中間列內(nèi)容（1）插入一個2行1列的表格，寬度為100%，水平居中顯示，垂直居頂端。第1行用于制作“景點(diǎn)推薦”內(nèi)容，第2行用于制作“旅游線路”內(nèi)容。（2）制作“景點(diǎn)推薦”版塊將第1行的高度設(shè)置為320像素，設(shè)置ID選擇器“scenery_bottom_bg”，為其設(shè)置背景圖片line_bg.png，在“背景”區(qū)域中加載“Background-image”選項(xiàng)的文件路徑，設(shè)置“Background-repeat”為“no-repeat”，“Background-position(Y)”為“bottom”。背景效果如圖所示。制作主體內(nèi)容中間列內(nèi)容在“景點(diǎn)推薦”版塊所在單元格插入一個3行1列的表格，寬度為95%，水平居中顯示。制作主體內(nèi)容中間列內(nèi)容“景點(diǎn)推薦”標(biāo)題欄“景點(diǎn)推薦”詳細(xì)內(nèi)容間隔設(shè)置在“景點(diǎn)推薦標(biāo)題欄”單元格內(nèi)插入一個2行2列的表格，寬度為100%，并對第1列進(jìn)行合并，設(shè)置其寬度為10像素，背景色為“#3e6508”，得到如圖所示的效果。對第2行第2列進(jìn)行設(shè)置，高度設(shè)為1像素，同時去掉代碼中的“

”，背景色為“#3e6508”，得到如圖效果。制作主體內(nèi)容中間列內(nèi)容在第1行第2列嵌套一個1行2列的表格，寬度設(shè)為100%，“景點(diǎn)推薦”四個字放在第1列，圖片“more_1.gif”放在第2列且水平居右，注意使用空格進(jìn)行適當(dāng)間隔。“景點(diǎn)”兩個字進(jìn)行風(fēng)格設(shè)置，使用名為“scenery_jd”的類選擇器，設(shè)置“Font-family”為“華文行楷”，“Font-size”為24像素，“Color”為“#f18821”。對“推薦”兩個字使用“scenery_tj”類選擇器，設(shè)置“Font-family”為“華文楷體”，“Font-size”為16像素，并有加粗效果。應(yīng)用后，得到如圖所示的效果。制作主體內(nèi)容中間列內(nèi)容在“景點(diǎn)推薦詳細(xì)內(nèi)容”所在單元格里插入一個2行3列的表格分別插入圖片和文字后，最終效果如下圖制作主體內(nèi)容中間列內(nèi)容（3）制作“旅游路線”版塊插入一個3行1列的表格，寬度為95%，水平居中。第1行設(shè)置“旅游路線”標(biāo)題信息，第2行設(shè)置間隔高度為15像素，第3行插入詳細(xì)內(nèi)容。此步驟與“景點(diǎn)推薦”版塊的設(shè)置類似。7．制作主體內(nèi)容右列內(nèi)容右列設(shè)置方式與左列類似。使用類名選擇器，名為img_position，在其“CSS規(guī)則定義”對話框中選擇“定位”類別，將“position”值設(shè)為“relative”，“top”值設(shè)為15像素，得到如圖所示效果。8．制作頁腳信息插入一個1行1列的表格，寬度為1000像素，高度為100像素，水平居中對齊。選擇ID選擇器，名為“footer_bg”，為頁腳添加背景圖片bottom.gif，因?yàn)閳D片大小超過了此表格，為了達(dá)到最佳顯示效果，“Background-position(Y)”值為“top”。然后輸入兩行文字信息，并水平居中顯示?！皹飞綐匪本W(wǎng)站首頁制作完成。保存后，可按F12鍵查看頁面效果。超鏈接是網(wǎng)頁中最重要的元素之一，也是應(yīng)用最多的一項(xiàng)功能。一個網(wǎng)站是由多個頁面組成的，而這些頁面之間依據(jù)鏈接確定相互之間的導(dǎo)航關(guān)系。有了超鏈接的存在，瀏覽者可以通過單擊網(wǎng)頁中的某個元素輕松地實(shí)現(xiàn)網(wǎng)頁之間的轉(zhuǎn)換、下載文件、收發(fā)郵件等。3.2超鏈接超鏈接（hyperlink）是網(wǎng)頁相互聯(lián)系的橋梁，它的標(biāo)記為<a>，英文全稱為anchor，中文意思是“錨”，可以把超鏈接看作是一個“錨”，它可以拋向在當(dāng)前頁面定義的任何指定位置，如網(wǎng)頁、圖像、聲頻、視頻、Word文檔、壓縮包，甚至是頁面中的某個位置（錨點(diǎn)）。3.2.1超鏈接基本概念1．超鏈接的分類內(nèi)部超鏈接：同一網(wǎng)站文檔之間的鏈接。外部超鏈接：不同網(wǎng)站文檔之間的鏈接。錨點(diǎn)超鏈接：同一網(wǎng)頁或不同網(wǎng)頁中指定位置的鏈接。電子郵件超鏈接：啟動郵件客戶端程序，可以寫郵件并發(fā)送到鏈接的郵箱中。3.2.1超鏈接基本概念2．鏈接路徑概念（1）絕對路徑：指某個文件在網(wǎng)絡(luò)上的完整路徑，包括適用的協(xié)議（如http、ftp、rtsp等）、Web服務(wù)器、路徑和文件名等。（2）根目錄相對路徑：是指從站點(diǎn)根文件夾到被鏈接文檔經(jīng)由的路徑，以前斜杠開頭。例如/about/index.html就是站點(diǎn)根文件夾下的about子文件夾中的一個文件（index.html）的根路徑。（3）文檔目錄相對路徑：以當(dāng)前文檔所在的位置為起點(diǎn)，到被鏈接文檔經(jīng)過的路徑。相對路徑最適合網(wǎng)站的內(nèi)部鏈接。1．內(nèi)部超鏈接格式（1）如果是同一目錄內(nèi)的網(wǎng)頁文件。<ahref="目標(biāo)文件名.html">鏈接載體</a>（2）如果鏈接到下一級目錄中的網(wǎng)頁文件。<ahref="目錄名/目標(biāo)文件名.html">鏈接載體</a>（3）如果鏈接到上一級目錄中的網(wǎng)頁文件。<ahref="../目標(biāo)文件名.html">鏈接載體</a>（4）如果鏈接到同級目錄中的網(wǎng)頁文件。<ahref="../目錄名/目標(biāo)文件名.html">鏈接載體</a>3.2.2創(chuàng)建內(nèi)部超鏈接2．文本超鏈接（1）在文檔窗口“設(shè)計”視圖中選擇文字，如首頁中的導(dǎo)航條信息“樂山概況”。（2）在對應(yīng)的屬性面板中執(zhí)行下列操作之一：單擊“鏈接”文本框右側(cè)的文件夾圖標(biāo)

，瀏覽并選擇一個目標(biāo)文件。使用“指向文件”圖標(biāo)

，將鏈接目標(biāo)指向“文件”面板中的網(wǎng)頁文件，如圖所示。3.2.2創(chuàng)建內(nèi)部超鏈接（3）從“屬性”面板中的“目標(biāo)”下拉列表框中選擇目標(biāo)文件的打開位置，選項(xiàng)含義如下。_blank：將目標(biāo)文件加載到新的瀏覽器窗口。_parent：將目標(biāo)文件加載到鏈接載體所在框架的父框架或父窗口。如果鏈接載體所在框架不是嵌套框架，則目標(biāo)文件加載到整個瀏覽器窗口。_self：將目標(biāo)文件加載到鏈接載體所在的同一框架或窗口。此為默認(rèn)值，通常不需要指定它。_top：將目標(biāo)文件加載到整個瀏覽器窗口，從而刪除所有框架。3.2.2創(chuàng)建內(nèi)部超鏈接3．圖片超鏈接圖片超鏈接有兩種形式（1）圖像超鏈接。如果將整個圖像作為鏈接載體，其操作方法與創(chuàng)建文字超鏈接一致，只是選中的超鏈接熱點(diǎn)是圖像而不是文字。（2）圖像熱點(diǎn)超鏈接。圖像熱點(diǎn)也叫做圖像地圖或圖像映射，是指在同一幅圖像中定義多個區(qū)域，每個區(qū)域指定一個不同的超鏈接，當(dāng)單擊不同區(qū)域時，可以跳轉(zhuǎn)到指定的目標(biāo)網(wǎng)頁。以“樂山旅游地圖”travelmap.html為例，創(chuàng)建圖像熱點(diǎn)的方法如下：步驟1：選中圖像，在對應(yīng)的屬性面板左下方選擇“地圖”選項(xiàng)來制作熱點(diǎn)，如圖所示。步驟2：根據(jù)需要創(chuàng)建矩形、圓形和多邊形熱點(diǎn)。單擊

按鈕可以創(chuàng)建矩形熱點(diǎn)，單擊

按鈕可以創(chuàng)建圓形熱點(diǎn)，單擊

按鈕可以創(chuàng)建多邊形熱點(diǎn)，單擊

圖標(biāo)可以對設(shè)置的熱點(diǎn)進(jìn)行大小、位置的調(diào)整。步驟3：在選中的熱點(diǎn)“屬性”面板中=，進(jìn)行鏈接、目標(biāo)等屬性的設(shè)置?！皹飞綐匪本W(wǎng)站首頁的“友情鏈接”版塊就是要實(shí)現(xiàn)外部超鏈接。如選擇“樂山旅游政務(wù)網(wǎng)”文本信息，在屬性面板的“鏈接”文本框內(nèi)輸入URL地址/，“目標(biāo)”為“_blank”，如圖所示。3.2.3創(chuàng)建外部超鏈接當(dāng)網(wǎng)頁內(nèi)容很長時，為了瀏覽更快捷，可以使用錨點(diǎn)鏈接來實(shí)現(xiàn)在同一頁的定位。要在頁面內(nèi)實(shí)現(xiàn)錨點(diǎn)超鏈接，需要定義兩個標(biāo)記，一個是超鏈接標(biāo)記，另一個是書簽標(biāo)記。超鏈接標(biāo)記格式為：<ahref="#書簽名">鏈接載體</a>當(dāng)單擊鏈接載體后，將定位到“書簽名”的位置。書簽標(biāo)記的格式為：<aname="書簽名">目標(biāo)位置</a>3.2.4錨點(diǎn)超鏈接以“樂山美食”網(wǎng)頁為例為大家介紹錨點(diǎn)超鏈接的實(shí)現(xiàn)（1）在“設(shè)計視圖”窗口中，將插入點(diǎn)定位到需要命名錨記的地方。如把插入點(diǎn)定位在“蹺腳牛肉”所在的位置，如圖所示。3.2.4錨點(diǎn)超鏈接（2）執(zhí)行如下操作。選擇“插入”→“常用”→“命名錨記”命令。選擇菜單“插入”→“命名錨記”命令。按Ctrl+Alt+A組合鍵。（3）在“命名錨記”對話框中輸入錨記的名稱，要求名稱要所見即所知，最好是英文或拼音縮寫。例如，輸入“qjnr”（蹺腳牛肉拼音縮寫），如左圖所示。單擊“確定”按鈕后，錨記在插入點(diǎn)中出現(xiàn)，如右圖所示。3.2.4錨點(diǎn)超鏈接2．鏈接命名錨記（1）在“設(shè)計視圖”窗口中選擇要創(chuàng)建鏈接的文本或圖片。如圖所示，選中“蹺腳牛肉”文字。（2）在對應(yīng)的“屬性”面板中設(shè)置“鏈接”文本框內(nèi)容，其格式為#號+命名錨記。輸入“#qjnr”（錨記名稱區(qū)分大小寫）。3.2.4錨點(diǎn)超鏈接思考：如果要在不同網(wǎng)頁之間實(shí)現(xiàn)錨記鏈接，該怎么操作？例如，單擊首頁上的“樂山美食”選項(xiàng)，將準(zhǔn)確定位到food.html頁面中的相關(guān)位置。1．電子郵件超鏈接2．下載鏈接3.2.5其他類型超鏈接超鏈接文本的默認(rèn)風(fēng)格是字體顏色為藍(lán)色，且?guī)в邢聞澗€。當(dāng)超鏈接文本被訪問后，顏色變?yōu)樽仙?。如果是超鏈接圖像，就會默認(rèn)帶藍(lán)色邊框。如圖所示，首頁中的一些文本和圖像設(shè)置了超鏈接后，頁面整體效果會變得不太友好，需要對超鏈接進(jìn)行風(fēng)格處理。3.2.6超鏈接的CSS設(shè)置1．標(biāo)簽選擇器使用超鏈接標(biāo)簽A作為選擇器，可以對文本超鏈接進(jìn)行風(fēng)格控制，在“a的CSS規(guī)則定義”對話框的“類型”區(qū)域中，設(shè)置“Text-decoration”值為“none”，即表示沒有下劃線，“Color”值設(shè)為“#000”黑色。應(yīng)用后，超鏈接文本外觀與普通文本效果一致。使用img標(biāo)簽選擇器，設(shè)置邊框?qū)傩浴癇order-style”為“none”。2．偽類選擇器：超鏈接有四個偽類，分別代表其四種不同的狀態(tài)。a:link表示未訪問的鏈接。a:hover表示鼠標(biāo)移動到鏈接上。a:active表示鼠標(biāo)激活鏈接，即單擊超鏈接。a:vivisted表示已訪問的鏈接。外部CSS樣式是把網(wǎng)頁中使用的樣式定義在一個獨(dú)立的CSS文件中（擴(kuò)展名為.css），一個外部樣式可以應(yīng)用于多個網(wǎng)頁。當(dāng)改變這個樣式表文件時，所有被控制的頁面的樣式會隨之改變。3.3創(chuàng)建并使用外部CSS樣式1．通過CSS樣式面板創(chuàng)建。（1）選擇“CSS文件”面板，打開“新建CSS規(guī)則”對話框。（2）在“新建CSS規(guī)則”對話框中，選擇定義規(guī)則的位置為“新建樣式表文件”，確定要創(chuàng)建的CSS選擇器及名稱，如圖所示。（3）單擊“確定”按鈕后，彈出“將樣式表文件另存為”對話框，輸入樣式表名稱。普通情況下，一個網(wǎng)站僅需一張外部CSS樣式文件，命名為“style”。3.3.1創(chuàng)建外部CSS文件2．通過“文件”命令項(xiàng)創(chuàng)建。（1）選擇“文件”→“新建”命令，在彈出的“新建文檔”對話框中選擇“CSS”頁面類型。（2）單擊“創(chuàng)建”按鈕后，Dreamweaver會創(chuàng)建CSS文檔窗口，選擇“文件”→“保存”命令。1．代碼方式鏈接使用<link>標(biāo)記鏈接外部CSS樣式表，其格式為：<head>…<linkhref="style.css"rel="stylesheet"type="text/css"/>…</head>3.3.2鏈接外部CSS文件2．基于Dreamweaver操作方式鏈接（1）單擊“CSS樣式”面板右下角的“附加樣式表”圖標(biāo)

，彈出“鏈接外部樣式表”對話框，如左圖所示。（2）在“文件/URL”文本框中輸入樣式表的名字，或單擊“瀏覽”按鈕，通過“選擇樣式表文件”對話框選擇需要鏈接的樣式表文件，如右圖所示?？蚣苁蔷W(wǎng)頁設(shè)計中使用的布局工具，框架的作用就是把同一個瀏覽器窗口劃分成幾個相互隔離的區(qū)域，每個區(qū)域加載一個網(wǎng)頁文件（也可以是其他格式文件），利用框架結(jié)構(gòu)實(shí)現(xiàn)在同一個瀏覽器窗口中顯示多個HTML頁面。3.4框架1．框架定義框架由框架集（Frameset）和單個框架（Frame）組成。2．框架標(biāo)記及代碼結(jié)構(gòu)<html><head>……</head><frameset><frame/><frame/></frameset></html>3.4.1框架基礎(chǔ)（1）<frameset>標(biāo)記及屬性。<frameset>標(biāo)記定義了一個框架集的屬性，其格式為：<framesetrows="橫向框架數(shù)"cols="縱向框架數(shù)"frameborder="yes|no"border="像素值"framespacing="像素值"bordercolor="顏色值">……</frameset>屬性含義Rows設(shè)置橫向分割的框架數(shù)，可以以像素或百分比為單位Cols設(shè)置縱向分割的框架數(shù)，可以以像素或百分比為單位Border設(shè)定邊框的寬度（通常以像素為單位）bordercolor如果有邊框，可以設(shè)置邊框的顏色frameborder設(shè)置有無邊框framespacing設(shè)置各窗口間的空白（2）<frame>標(biāo)記及屬性。<frame>標(biāo)記代表指定的各個框架，包括加載頁面和框架其他屬性等，其格式為：<framesrc="源文件"name="框架名"scrolling="yes|no|auto"noresize="noresize"id="框架ID值"border="像素值"bordercolor="顏色值"frameborder="yes|no"marginwidth="像素值"marginheight="像素值"/>屬性含義src指定該框架加載的源文件路徑name指定框架名稱，由字母開頭scrolling設(shè)置有無滾動條，是（yes）、否（no）或自動（auto）noresize不允許瀏覽者調(diào)整窗口的大小，默認(rèn)值為允許調(diào)整大小id指定框架的ID值border設(shè)置邊框的寬度bordercolor設(shè)置邊框的顏色frameborder設(shè)置有無邊框，有（yes）或無（no）marginwidth設(shè)置框架加載內(nèi)容與左右邊框的空白marginheight設(shè)置框架加載內(nèi)容與上下邊框的空白行高為80像素自動分配行高行高為80像素<framesetrows="80,*,80"frameborder="no"border="0"framespacing="0"><framesrc=""name="topFrame"scrolling="No"noresize="noresize"id="topFrame"title="topFrame"/><framesrc=""name="mainFrame"id="mainFrame"title="mainFrame"/><framesrc=""name="bottomFrame"scrolling="No"noresize="noresize"id="bottomFrame"title="bottomFrame"/></frameset>

（3）T型框架代碼。T型結(jié)構(gòu)是應(yīng)用最廣的框架結(jié)構(gòu)，現(xiàn)在我們以代碼的形式完成如圖3-87所示的T型結(jié)構(gòu)。<framesetrows="90,*"frameborder="no"border="0"framespacing="0"><framesrc="top.html"name="topFrame"scrolling="No"noresize="noresize"id="topFrame"title="topFrame"/><framesetcols="270,*"framespacing="0"frameborder="no"border="0"><framesrc="left.html"name="leftFrame"scrolling="No"noresize="noresize"id="leftFrame"title="leftFrame"/><framesrc="main.html"name="mainFrame"id="mainFrame"title="mainFrame"/></frameset></frameset>1．新建框架集文件（1）選擇“文件”→“新建”命令，在彈出的“新建文檔”對話框中選擇“示例中的頁”選項(xiàng)中的“框架頁”選項(xiàng)，在右邊窗格中將出現(xiàn)Dreamweaver提供的各類示例頁（即框架結(jié)構(gòu)），如圖所示。3.4.2創(chuàng)建框架（2）在“示例頁”區(qū)域中選擇“上方固定，左側(cè)嵌套”選項(xiàng)，單擊“創(chuàng)建”按鈕將會彈出“框架標(biāo)簽輔助功能屬性”對話框，如圖所示。（3）修改好后單擊“確定”按鈕即可創(chuàng)建一個帶框架的網(wǎng)頁文檔，如圖所示。2．保存框架文檔（1）保存框架頁。選擇“文件”→“保存框架頁”命令，在彈出的“另存為”對話框中將框架集保存為frameset.html。（2）保存單個框架頁。在需要保存的框架內(nèi)單擊，選擇“文件”→“保存框架”命令，逐個保存框架。將上面的框架保存為top.html，左邊的框架保存為left.html，右邊的框架保存為main.html。1．框架的基本操作（1）選定框架。設(shè)置框架屬性時，必須先選中框（2）改變框架大小。用鼠標(biāo)拖拽框架邊框可隨意改變框架大小。（3）刪除框架。用鼠標(biāo)把框架邊框拖拽到父框架的邊框上，可刪除框架。3.4.3設(shè)置框架集與框架2．設(shè)置框架集屬性（1）選擇“窗口”→“框架”命令，打開“框架”面板，選中整個框架集，在屬性面板中可對上下型結(jié)構(gòu)進(jìn)行設(shè)置，包括邊框、邊框顏色和邊框?qū)挾?，并可對最上面的框架設(shè)置行高，比如值為80像素，如圖所示。（2）在“框架”面板中，選中嵌套的框架集。在“屬性”面板中可對左右型框架結(jié)構(gòu)進(jìn)行設(shè)置，設(shè)置左框架的列寬為140像素，其余屬性不變，如圖所示。3．設(shè)置框架屬性選中框架，如單擊“框架”面板上的名為“topFrame”的框架，在“屬性”面板上可以設(shè)置其框架屬性：框架名稱、源文件、空白邊距、滾動條、重置大小和邊框?qū)傩缘?，如圖所示。使用框架布局工具完成“旅游景點(diǎn)”頁面制作，其效果如圖3.4.4框架實(shí)例應(yīng)用1．新建網(wǎng)頁文件，設(shè)置框架基本結(jié)構(gòu)在站點(diǎn)根目錄下新建文件夾，名為travelspot，將“旅游景點(diǎn)”相關(guān)網(wǎng)頁存于此文件夾。（1）新建頁面，此頁面結(jié)構(gòu)是典型的“T型”結(jié)構(gòu)，但為了保證頁面在不同分辨率的顯示器上始終保持整體居中效果，首先新建一個左中右結(jié)構(gòu)的頁面，左列和右列框架的寬度設(shè)為“*”，中間列框架的寬度為1000像素。建議在“代碼視圖”中以編寫代碼方式完成結(jié)構(gòu)設(shè)置，代碼如下：<framesetcols="*,1000,*"frameborder="no"><framesrc=""name="left"/><framesrc=""name="middle"/><framesrc=""name="right"/></frameset>（2）切換到“設(shè)計視圖”窗口，得到如圖所示的界面效果。（3）單擊左列框架內(nèi)空白處保存文件，名為blank.html。右列框架加載的頁面也為blank.html。（4）單擊中間列，選擇“插入”面板中的“布局”區(qū)域，單擊“框架”選項(xiàng)中的“頂部和嵌套的左側(cè)框架”選項(xiàng)。得到如圖所示頁面效果。2．制作top.html頁面內(nèi)容（1）在“框架”面板中選中內(nèi)嵌框架集，在“屬性”面板中將行高設(shè)置為354像素（由于此頁面內(nèi)容在前面章節(jié)中已經(jīng)制作，設(shè)計者可通過復(fù)制方式實(shí)現(xiàn)內(nèi)容的復(fù)制。）3．制作left.html頁面內(nèi)容（1）在“框架”面板中選中內(nèi)嵌框架集，在“屬性”面板中將列寬設(shè)置為260像素（2）在頁面中鏈接外部CSS文件style.css（相關(guān)風(fēng)格在前面已做）。在頁面中插入一個4行2列的表格，寬度為250像素。第1行不合并，高度為5像素，去掉默認(rèn)的“

”空格。第2行合并，高度為44像素。第3行不合并，對其第2列設(shè)置寬度為9像素，高度為16像素。第4行暫不設(shè)置，如圖（3）對第1行第1列進(jìn)行內(nèi)嵌風(fēng)格設(shè)置。設(shè)置并應(yīng)用類名選擇器tr1，對“邊框”類別中“Border-style”的上、右、左邊框風(fēng)格設(shè)為“Solid”，寬度為1像素，邊框顏色為灰色“#c8c8c8”。（4）對第2行進(jìn)行內(nèi)嵌風(fēng)格設(shè)置。輸入“旅游景點(diǎn)”四個字，使用空格進(jìn)行合理排版。設(shè)置并應(yīng)用類名選擇器tr2，設(shè)置背景圖片bg.png，文字字體為“宋體”，大小為18像素，加粗，行高為40像素。（5）對第3行進(jìn)行內(nèi)嵌風(fēng)格設(shè)置。設(shè)置類名選擇器tr3，對“邊框”類別中的“Border-style”的右、左邊框風(fēng)格設(shè)為“Solid”，寬度為1像素，邊框顏色為灰色“#c8c8c8”。并將此選擇器應(yīng)用于第1列。在第2列中插入圖片triangle.png。（6）對第4行第1列設(shè)置內(nèi)嵌風(fēng)格。設(shè)置類名為tr4，對“邊框”類別中的“Border-style”的右、下、左邊框風(fēng)格設(shè)為“Solid”，寬度為1像素，邊框顏色為灰色“#c8c8c8”。在第4行第1列中插入具體旅游景點(diǎn)。實(shí)現(xiàn)景點(diǎn)內(nèi)容的布局有兩種方式，一種是嵌入表格，另一種是列表。這里是通過嵌入表格來完成，插入一個10行2列的表格，寬度為100%，單元格行高為35像素。在第2列中輸入完內(nèi)容后，得到如圖所示的效果。設(shè)置類名選擇器tr4_line。在“邊框”區(qū)域中設(shè)置左邊框?yàn)椤癝olid”，寬度為4像素，邊框顏色為“#F00”。在“方框”類別中設(shè)置左填充為10像素。設(shè)置完畢后，對每項(xiàng)文字應(yīng)用此選擇器，得到如圖效果。4．制作main.html頁面內(nèi)容5．在框架中使用超鏈接當(dāng)鼠標(biāo)單擊頁面left.html的導(dǎo)航信息時，其目標(biāo)文件將顯示在名為mainFrame的右框架中。（1）選中“樂山大佛”導(dǎo)航信息，在“屬性”面板中設(shè)置鏈接文件為main.html，在“目標(biāo)”下拉列表框中選擇右框架名稱為“mainFrame”。如果要實(shí)現(xiàn)如圖所示的效果，該怎么做呢？隨著Web標(biāo)準(zhǔn)在國內(nèi)的普及，Div+CSS布局模式成為了網(wǎng)頁設(shè)計發(fā)展的流行趨勢，目前很多大型網(wǎng)站，如門戶網(wǎng)站網(wǎng)易、新浪和雅虎，商業(yè)類網(wǎng)站淘寶等均采用此布局方式。本節(jié)將介紹Div基礎(chǔ)、Div布局技術(shù)和實(shí)例講解，完成“旅游攻略”頁面的制作。3.5Div+CSS1．Div+CSS布局技術(shù)優(yōu)點(diǎn)2．Div標(biāo)簽標(biāo)記<div>的英文全稱是Division，中文意思為“區(qū)分”，也稱為層，在層里面可以放置各種內(nèi)容，比如文字、圖像、Flash，甚至是一個表格，因此我們也稱它是個透明的容器。其格式如下：<div>一起學(xué)習(xí)div+CSS技術(shù)</div>如果<div>標(biāo)記被單獨(dú)使用，它在網(wǎng)頁中的效果與使用段落標(biāo)簽是一樣的。3.5.1Div基礎(chǔ)（1）在“設(shè)計視圖”窗口，將插入點(diǎn)放置在要顯示層的位置。（2）執(zhí)行下列操作插入層。選擇菜單“插入”→“布局對象”→“Div標(biāo)簽”命令。在“插入”面板“布局”區(qū)域中單擊“插入Div標(biāo)簽”圖標(biāo)

。（3）在彈出的“插入Div標(biāo)簽”對話框中填寫相應(yīng)的選項(xiàng)，如圖所示。3.5.2插入Div的基本操作（4）單擊“確定”按鈕后，Div標(biāo)簽將以虛線框的形式顯示在文檔中，并帶有默認(rèn)的文本，如圖所示。將插入點(diǎn)放置在線框內(nèi)，可輸入任何內(nèi)容。本節(jié)將介紹使用Div+CSS技術(shù)制作“旅游攻略”頁面，如圖所示。3.5.3Div+CSS應(yīng)用實(shí)例1．設(shè)置頁面布局結(jié)構(gòu)#header#main#footer2．創(chuàng)建“旅游攻略”目錄及網(wǎng)頁文件為了便于管理，在站點(diǎn)根目錄下新建文件夾strategy，并在此目錄下新建images文件夾，將頁面所需圖片復(fù)制到images文件夾中。新建“旅游攻略”網(wǎng)頁文件strategy.html。使用body作為標(biāo)簽選擇器，設(shè)置頁面間距為0像素。3．設(shè)置頁面基本布局結(jié)構(gòu)（1）對頁眉部分進(jìn)行設(shè)置。（2）對主體內(nèi)容結(jié)構(gòu)進(jìn)行設(shè)置。當(dāng)層之間發(fā)生嵌套關(guān)系后，如果對嵌套的層進(jìn)行CSS風(fēng)格設(shè)置，其“新建CSS規(guī)則”對話框上會自動填加如圖3-116所示的選擇器，稱為“復(fù)合內(nèi)容（基于選擇的內(nèi)容）”或者“上下文”選擇器。設(shè)置頁面基本布局結(jié)構(gòu)（3）對頁腳結(jié)構(gòu)進(jìn)行設(shè)置。在#main層之后插入#footer層，寬度為1000像素，高度為100像素，并居中對齊。設(shè)置頁面基本布局結(jié)構(gòu)（4）頁面結(jié)構(gòu)代碼如下。<divid="logo">此處顯示

id"logo"的內(nèi)容</div><divid="navi">此處顯示

id"navi"的內(nèi)容</div><divid="tips">此處顯示

id"tips"的內(nèi)容</div><divid="main"><divid="main_left">此處顯示

id"main_left"的內(nèi)容</div><divid="main_right">此處顯示

id"main_right"的內(nèi)容</div>

此處顯示

id"main"的內(nèi)容</div><divid="footer">此處顯示

id"footer"的內(nèi)容</div>4．制作頁眉部分內(nèi)容（1）將默認(rèn)文字去掉，在#logo層插入背景圖片logo.png，“Background-repeat”值為“no-repeat”。其CSS代碼如下：#logo{ height:90px; width:1000px; margin-top:0px; margin-right:auto; margin-bottom:0px; margin-left:auto; background-image:url(images/logo.png); background-repeat:no-repeat;}（2）嵌入#logo_search層，寬度為313像素，高度為39像素，左浮動，距上邊界30像素，距左邊界300像素，并設(shè)置背景圖片serach.png。其CSS代碼如下：#logo#logo_search{ height:39px; width:313px; margin-top:30px; margin-left:300px; background-image:url(images/search.png); background-repeat:no-repeat;}制作頁眉部分內(nèi)容（3）在#logo_search層之后插入#logo_button層，寬度為341像素，高度為29像素，左浮動，距上邊界35像素，并設(shè)置背景圖片button.png，不重復(fù)。其CSS代碼如下：#logo#logo_button{ background-image:url(images/button.png); flo