網頁設計實用技術-第3章

第3章

網頁設計布局工具綜合應用

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

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

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

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

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

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

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

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

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

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

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

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

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

，彈出“鏈接外部樣式表”對話框，如左圖所示。（2）在“文件/URL”文本框中輸入樣式表的名字，或單擊“瀏覽”按鈕，通過“選擇樣式表文件”對話框選擇需要鏈接的樣式表文件，如右圖所示?？蚣苁蔷W頁設計中使用的布局工具，框架的作用就是把同一個瀏覽器窗口劃分成幾個相互隔離的區(qū)域，每個區(qū)域加載一個網頁文件（也可以是其他格式文件），利用框架結構實現(xiàn)在同一個瀏覽器窗口中顯示多個HTML頁面。3.4框架1．框架定義框架由框架集（Frameset）和單個框架（Frame）組成。2．框架標記及代碼結構<html><head>……</head><frameset><frame/><frame/></frameset></html>3.4.1框架基礎（1）<frameset>標記及屬性。<frameset>標記定義了一個框架集的屬性，其格式為：<framesetrows="橫向框架數"cols="縱向框架數"frameborder="yes|no"border="像素值"framespacing="像素值"bordercolor="顏色值">……</frameset>屬性含義Rows設置橫向分割的框架數，可以以像素或百分比為單位Cols設置縱向分割的框架數，可以以像素或百分比為單位Border設定邊框的寬度（通常以像素為單位）bordercolor如果有邊框，可以設置邊框的顏色frameborder設置有無邊框framespacing設置各窗口間的空白（2）<frame>標記及屬性。<frame>標記代表指定的各個框架，包括加載頁面和框架其他屬性等，其格式為：<framesrc="源文件"name="框架名"scrolling="yes|no|auto"noresize="noresize"id="框架ID值"border="像素值"bordercolor="顏色值"frameborder="yes|no"marginwidth="像素值"marginheight="像素值"/>屬性含義src指定該框架加載的源文件路徑name指定框架名稱，由字母開頭scrolling設置有無滾動條，是（yes）、否（no）或自動（auto）noresize不允許瀏覽者調整窗口的大小，默認值為允許調整大小id指定框架的ID值border設置邊框的寬度bordercolor設置邊框的顏色frameborder設置有無邊框，有（yes）或無（no）marginwidth設置框架加載內容與左右邊框的空白marginheight設置框架加載內容與上下邊框的空白行高為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型結構是應用最廣的框架結構，現(xiàn)在我們以代碼的形式完成如圖3-87所示的T型結構。<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àn)Dreamweaver提供的各類示例頁（即框架結構），如圖所示。3.4.2創(chuàng)建框架（2）在“示例頁”區(qū)域中選擇“上方固定，左側嵌套”選項，單擊“創(chuàng)建”按鈕將會彈出“框架標簽輔助功能屬性”對話框，如圖所示。（3）修改好后單擊“確定”按鈕即可創(chuàng)建一個帶框架的網頁文檔，如圖所示。2．保存框架文檔（1）保存框架頁。選擇“文件”→“保存框架頁”命令，在彈出的“另存為”對話框中將框架集保存為frameset.html。（2）保存單個框架頁。在需要保存的框架內單擊，選擇“文件”→“保存框架”命令，逐個保存框架。將上面的框架保存為top.html，左邊的框架保存為left.html，右邊的框架保存為main.html。1．框架的基本操作（1）選定框架。設置框架屬性時，必須先選中框（2）改變框架大小。用鼠標拖拽框架邊框可隨意改變框架大小。（3）刪除框架。用鼠標把框架邊框拖拽到父框架的邊框上，可刪除框架。3.4.3設置框架集與框架2．設置框架集屬性（1）選擇“窗口”→“框架”命令，打開“框架”面板，選中整個框架集，在屬性面板中可對上下型結構進行設置，包括邊框、邊框顏色和邊框寬度，并可對最上面的框架設置行高，比如值為80像素，如圖所示。（2）在“框架”面板中，選中嵌套的框架集。在“屬性”面板中可對左右型框架結構進行設置，設置左框架的列寬為140像素，其余屬性不變，如圖所示。3．設置框架屬性選中框架，如單擊“框架”面板上的名為“topFrame”的框架，在“屬性”面板上可以設置其框架屬性：框架名稱、源文件、空白邊距、滾動條、重置大小和邊框屬性等，如圖所示。使用框架布局工具完成“旅游景點”頁面制作，其效果如圖3.4.4框架實例應用1．新建網頁文件，設置框架基本結構在站點根目錄下新建文件夾，名為travelspot，將“旅游景點”相關網頁存于此文件夾。（1）新建頁面，此頁面結構是典型的“T型”結構，但為了保證頁面在不同分辨率的顯示器上始終保持整體居中效果，首先新建一個左中右結構的頁面，左列和右列框架的寬度設為“*”，中間列框架的寬度為1000像素。建議在“代碼視圖”中以編寫代碼方式完成結構設置，代碼如下：<framesetcols="*,1000,*"frameborder="no"><framesrc=""name="left"/><framesrc=""name="middle"/><framesrc=""name="right"/></frameset>（2）切換到“設計視圖”窗口，得到如圖所示的界面效果。（3）單擊左列框架內空白處保存文件，名為blank.html。右列框架加載的頁面也為blank.html。（4）單擊中間列，選擇“插入”面板中的“布局”區(qū)域，單擊“框架”選項中的“頂部和嵌套的左側框架”選項。得到如圖所示頁面效果。2．制作top.html頁面內容（1）在“框架”面板中選中內嵌框架集，在“屬性”面板中將行高設置為354像素（由于此頁面內容在前面章節(jié)中已經制作，設計者可通過復制方式實現(xiàn)內容的復制。）3．制作left.html頁面內容（1）在“框架”面板中選中內嵌框架集，在“屬性”面板中將列寬設置為260像素（2）在頁面中鏈接外部CSS文件style.css（相關風格在前面已做）。在頁面中插入一個4行2列的表格，寬度為250像素。第1行不合并，高度為5像素，去掉默認的“

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

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

id"logo"的內容</div><divid="navi">此處顯示

id"navi"的內容</div><divid="tips">此處顯示

id"tips"的內容</div><divid="main"><divid="main_left">此處顯示

id"main_left"的內容</div><divid="main_right">此處顯示

id"main_right"的內容</div>

此處顯示

id"main"的內容</div><divid="footer">此處顯示

id"footer"的內容</div>4．制作頁眉部分內容（1）將默認文字去掉，在#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像素，并設置背景圖片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;}制作頁眉部分內容（3）在#logo_search層之后插入#logo_button層，寬度為341像素，高度為29像素，左浮動，距上邊界35像素，并設置背景圖片button.png，不重復。其CSS代碼如下：#logo#logo_button{ background-image:url(images/button.png); flo