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

第3章

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

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

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

無(wú)邊框表格 有邊框表格 有邊框有間距表格2．選擇表格（1）選擇整個(gè)表格（2）選擇單個(gè)單元格（3）選擇連續(xù)的單元格（4）選擇不連續(xù)的單元格（5）選擇行或列3．調(diào)整表格的大小選取整個(gè)表格后，將鼠標(biāo)放在表格邊框周?chē)暮谏》綁K上，鼠標(biāo)變?yōu)殡p箭頭后按住鼠標(biāo)左鍵拖動(dòng)，即可改變表格大小。把鼠標(biāo)放在需要調(diào)整列的邊框處，鼠標(biāo)變?yōu)?/p>

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

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

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

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

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

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

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

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

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

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

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

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

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