第4章 網(wǎng)頁布局與插入圖像

《第4章 網(wǎng)頁布局與插入圖像》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。

1、章名第4章網(wǎng)頁布局與插入圖像網(wǎng)頁的整體布局非常重要，這是基于兩方面的原因：一方面主頁的整體布局，將給人帶來整體視覺上的感受；另一方面瀏覽器本身的定位能力差，常常出現(xiàn)在設(shè)計(jì)階段似乎較好的界面，程序一運(yùn)行界面就亂了的情況，這就是由于沒有用布局方法限制各控件位置的結(jié)果。同樣，網(wǎng)頁中的圖像對(duì)提高生動(dòng)性，增強(qiáng)網(wǎng)頁吸引力方面能夠發(fā)揮很大的作用，在Web的界面設(shè)計(jì)中占有重要的位置。圍繞這兩個(gè)問題本章將講述以下幾個(gè)問題：n網(wǎng)頁布局n插入圖像n編輯圖像4.1網(wǎng)頁布局4.1.1布局的基本概念傳統(tǒng)的布局方法是利用表格的定位、對(duì)齊等功能來對(duì)網(wǎng)頁進(jìn)行布局。首先將網(wǎng)

2、頁劃分成幾個(gè)部分，以決定表格的行數(shù)和列數(shù)，然后創(chuàng)建表格并在表格的各單元格中放置各種網(wǎng)頁元素。雖然對(duì)表格的大小隨時(shí)可以進(jìn)行調(diào)整，行列之間也可以拆分和歸并，但是在布局設(shè)計(jì)中仍然會(huì)出現(xiàn)顧此失彼的感覺。要想成為一個(gè)布局高手，非常不容易。后來，又出現(xiàn)了層和摸板，使布局更為靈活，層的重點(diǎn)是在局部上，而摸板的重點(diǎn)則在整體規(guī)劃上。巧妙地將三者結(jié)合才是網(wǎng)頁布局的最佳方案。4.1.2表格和圖層一、表格1．表格的作用表格可以用于布局，但更多的時(shí)候是用于組織數(shù)據(jù)，如通訊錄、課程表、列車時(shí)刻表等大都采用表格的形式。將數(shù)據(jù)或圖形放在表格中將顯得更有規(guī)律，更有利于對(duì)照

3、和比較。2．表格的創(chuàng)建一張表格由行（rows）、列（columns）、單元格（cells）三部分組成。創(chuàng)建表格實(shí)際上就是創(chuàng)建表格的行、列和單元格。1)用HTML語言創(chuàng)建表格創(chuàng)建表格的語句是：

4、t。(2)BACKGROUND：指定用作表格背景圖片的URL地址。(3)BGCOLOR：指定表格的背景顏色。(4)BORDER：指定表格邊框的寬度，以像素為單位。如果省略該屬性，則默認(rèn)值為0。(5)BORDERCOLOR：指定表格邊框顏色，應(yīng)與BORDER屬性一起使用。(6)BORDERCOLORDARK：指定3D邊框的陰影顏色，應(yīng)與BORDER屬性一起使用。(7)BORDERCOLORLIGHT：指定3D邊框的高亮顯示顏色，與BORDER屬性一起用。(8)CELLPADDING：指定單元格內(nèi)數(shù)據(jù)與單元格邊框之間的間距，以像素為單位。(9

5、)CELLSPACING：指定單元格之間的間距，以像素為單位。(10)WIDTH：指定表格的寬度，以像素或百分比為單位。例如：一次特快列車時(shí)刻表站名到站時(shí)刻開車時(shí)刻北京西-16.0石家莊

6、td>18.569.08鄭州0.010.14武昌6.426.54岳陽9.299.35長(zhǎng)沙11.20---上述HTML語句對(duì)應(yīng)的表格如下圖4.1所示。–9–章名圖4.1列車時(shí)刻表可通過TR標(biāo)記的下

7、列屬性對(duì)指定行的格式進(jìn)行設(shè)置：(1)ALIGN：指定行中單元格的水平對(duì)齊方式，取值為left（默認(rèn)值）、center或right。(2)BACKGROUND：給出圖像文件的URL，該圖像用作指定行的背景。(3)BGCOLOR：指定行的背景顏色。(4)BORDERCOLOR：指定行的邊框顏色，該屬性只有當(dāng)TABLE標(biāo)記的BORDER屬性取非零值時(shí)才起作用。(5)BORDERCOLORDARK：指定行的3D邊框的陰影顏色，該屬性只有當(dāng)TABLE標(biāo)記的BORDER屬性取非零值時(shí)才起作用。(6)BORDERCOLORLIGHT：指定行的3D邊框的

8、高亮顏色，該屬性只有當(dāng)TABLE標(biāo)記的BORDER屬性取非零值時(shí)才起作用。(7)VALIGN：指定行中單元格內(nèi)容的垂直對(duì)齊方式，該屬性的取值可以是top（頂端對(duì)齊）、middle（居中對(duì)齊）、