第4章網(wǎng)頁(yè)布局與圖像.ppt

1、第4章 網(wǎng)頁(yè)布局與圖像,4.1 網(wǎng)頁(yè)布局,4.1.1 布局的基本概念 傳統(tǒng)的布局方法是利用表格的定位、對(duì)齊等功能來(lái)對(duì)網(wǎng)頁(yè)進(jìn)行布局。首先將網(wǎng)頁(yè)劃分成幾個(gè)部分，以決定表格的行數(shù)和列數(shù)，然后創(chuàng)建表格并在表格的各單元格中放置各種網(wǎng)頁(yè)元素。雖然對(duì)表格的大小隨時(shí)可以進(jìn)行調(diào)整，行列之間也可以拆分和歸并，但是在布局設(shè)計(jì)中仍然會(huì)出現(xiàn)顧此失彼的感覺(jué)。要想成為一個(gè)布局高手，非常不容易。 后來(lái)，又出現(xiàn)了層和模板，使布局更為靈活。層的重點(diǎn)是在局部上，而模板的重點(diǎn)則在整體規(guī)劃上。巧妙地將三者結(jié)合才是網(wǎng)頁(yè)布局的最佳方案。,4.1.2 表格和圖層,1. 表格 表格可以用于布局，但更多的時(shí)候是用于組織數(shù)據(jù)，如通訊錄、課程表、列

2、車(chē)時(shí)刻表等大都采用表格的形式。將數(shù)據(jù)或圖形放在表格中顯得更有規(guī)律，更有利于對(duì)照和比較。 一張表格由行(row)、列(column)、單元格(cell)三部分組成。創(chuàng)建表格實(shí)際上就是創(chuàng)建表格的行、列和單元格。 用HTML語(yǔ)言創(chuàng)建表格的方法如下： 創(chuàng)建表格的語(yǔ)句： 創(chuàng)建表格的標(biāo)題： 創(chuàng)建行的語(yǔ)句： 創(chuàng)建欄名的語(yǔ)句： 創(chuàng)建單元格的語(yǔ)句：,可通過(guò)TABLE標(biāo)記的下列屬性對(duì)表格的格式進(jìn)行設(shè)置： ALIGN：指定表格的對(duì)齊方式，取值可以是left(默認(rèn)值)、center或right。 BACKGROUND：指定用作表格背景圖片的URL地址。 BGCOLOR：指定表格的背景顏色。 BORDER：指定表格邊框

3、的寬度，以像素為單位。如果省略該屬性，則默認(rèn)值 為0。 BORDERCOLOR：指定表格邊框顏色，應(yīng)與BORDER屬性一起使用。 BORDERCOLORDARK：指定3D邊框的陰影顏色，應(yīng)與BORDER屬性一起 使用。 BORDERCOLORLIGHT：指定3D邊框的高亮顯示顏色，與BORDER屬性一起使用。 CELLPADDING：指定單元格內(nèi)數(shù)據(jù)與單元格邊框之間的間距，以像素為單位。 CELLSPACING：指定單元格之間的間距，以像素為單位。 WIDTH：指定表格的寬度，以像素或百分比為單位。,例如： 1次特快列車(chē)時(shí)刻表 站名 到站時(shí)刻 開(kāi)車(chē)時(shí)刻 北京西 - 16：0 石家莊 18：56

4、 9：08 鄭州 0：01 0：14 武昌 6：42 6：54 岳陽(yáng) 9：29 9：35 長(zhǎng)沙 11：20 - 上述HTML語(yǔ)句對(duì)應(yīng)的表格，如下圖4.1所示。,圖4.1 列車(chē)時(shí)刻表,可通過(guò)TR標(biāo)記的下列屬性對(duì)指定行的格式進(jìn)行設(shè)置： ALIGN：指定行中單元格的水平對(duì)齊方式，取值為left(默認(rèn)值)、center或right。 BACKGROUND：給出圖像文件的URL，該圖像用作指定行的背景。 BGCOLOR：指定行的背景顏色。 BORDERCOLOR：指定行的邊框顏色，該屬性只有當(dāng)TABLE標(biāo)記的BORDER屬性取非零值時(shí)才起作用。 BORDERCOLORDARK：指定行的3D邊框的陰影顏色

5、，該屬性只有當(dāng)TABLE標(biāo)記的BORDER屬性取非零值時(shí)才起作用。 BORDERCOLORLIGHT：指定行的3D邊框的高亮顏色，該屬性只有當(dāng)TABLE標(biāo)記的BORDER屬性取非零值時(shí)才起作用。 VALIGN：指定行中單元格內(nèi)容的垂直對(duì)齊方式，該屬性的取值可以是top(頂端對(duì)齊)、middle(居中對(duì)齊)、bottom(底端對(duì)齊)或baseline(基線(xiàn)對(duì)齊)。,可通過(guò)TD和TH標(biāo)記的下列屬性對(duì)指定單元格的格式進(jìn)行設(shè)置： ALIGN：指定單元格內(nèi)文本的水平對(duì)齊方式，取值為left(默認(rèn)值)、center或right。 BACKGROUND：指定圖像的URL，該圖像用作單元格的背景。 BGCOL

6、OR：指定單元格的背景顏色。 BORDERCOLOR：指定單元格的邊框顏色。 BORDERCOLORDARK：用于指定單元格的3D邊框的陰影顏色。 BORDERCOLORLIGHT：用于指定單元格的3D邊框的高亮顏色。 COLSPAN：指定合并單元格時(shí)一個(gè)單元格跨越的表格列數(shù)。 NOWRAP：若指定該屬性，則避免Web瀏覽器將單元格里的文本換行。 ROWSPAN：指定合并單元格時(shí)一個(gè)單元格跨越的表格行數(shù)。 VALIGN：指定單元格中文本的垂直對(duì)齊方式，取值可以是top、middle(默認(rèn)值)、bottom或baseline。 用可視化方法簡(jiǎn)化了對(duì)表格的創(chuàng)建操作。通過(guò)鼠標(biāo)的點(diǎn)擊操作，能夠創(chuàng)建出各

7、類(lèi)復(fù)雜的表格來(lái)。在創(chuàng)建表格的過(guò)程中，系統(tǒng)又提供了兩種不同的方法：Table控件法和模板創(chuàng)建法。,利用Table控件法的具體步驟如下： (1)進(jìn)入【設(shè)計(jì)】視圖窗口，將光標(biāo)放置在表格將要出現(xiàn)的位置上，選擇【工具箱】窗口的HTML選項(xiàng)卡，然后雙擊Table控件或拖曳Table控件到設(shè)計(jì)頁(yè)面中適當(dāng)位置。 (2)選中插入的Table表，然后用鼠標(biāo)將其拖曳到合適的位置，并縮放為適當(dāng)大小。 (3)選中Table，在右邊屬性窗口中選擇相應(yīng)屬性，輸入屬性的值，以改變表格的外觀(guān)。一些常用的屬性如下： Rows(行)：代表表格的行數(shù)。 Cell Padding(單元格填充)：代表單元格中內(nèi)容與邊界之間的空間。 Ce

8、ll Spacing(單元格間距)：代表單元格之間的間距。 Width(表寬)：代表以像素(pixel)或以瀏覽器窗口的百分比(%)為單位指定表格的寬度。 Border(邊寬)：代表表格邊框的寬度，當(dāng)不需要顯示邊框時(shí)，輸入0。,使用模板創(chuàng)建表格的步驟如下： (1)在【布局】菜單中，單擊【插入表】，將彈出如圖4.2所示的對(duì)話(huà)框。 (2)窗口的左上方有兩種選擇：如果選擇【自定義】，然后單擊【單元格屬性】，可以進(jìn)行更加詳細(xì)的設(shè)置。如果想在整體布局的基礎(chǔ)上進(jìn)行表格設(shè)計(jì)，可選中【模板】，然后在下拉列表框中進(jìn)一步選擇模板，然后再在模板的各個(gè)框架中放入表格。,圖4.2 【插入表】對(duì)話(huà)框,2圖層 圖層是一個(gè)容

9、器，在圖層內(nèi)可以放置各種類(lèi)型的網(wǎng)頁(yè)元素。如文本、圖像、表格、甚至還可以放置圖層(圖層嵌套)。每個(gè)圖層相當(dāng)于一個(gè)獨(dú)立的小屏幕。 圖層是一個(gè)可以任意移動(dòng)的容器，甚至允許圖層之間重疊放置，這是它與框架的不同之處，這也是圖層的最大優(yōu)點(diǎn)。因?yàn)榉胖迷趫D層上的元素，可以隨圖層被拖放到任意位置，為元素的定位和網(wǎng)頁(yè)布局帶來(lái)極大的方便，同時(shí)也為控制動(dòng)態(tài)元素奠定了基礎(chǔ)。 早期版本的Internet Explorer和Netscape Navigator瀏覽器都不支持圖層，只有4.0及以后的版本才支持圖層。但即使是現(xiàn)在，這兩種瀏覽器對(duì)圖層的定義方法似乎還沒(méi)有完全統(tǒng)一。,在A(yíng)SP.NET 2.0的設(shè)計(jì)界面中可以使用DI

10、V標(biāo)記來(lái)定義圖層。 (1)用HTML語(yǔ)言創(chuàng)建圖層 例如，利用下列代碼創(chuàng)建一個(gè)寬100px、高100px的圖層。 我是層！ (2)用可視化方法創(chuàng)建圖層 用可視化方法簡(jiǎn)化了對(duì)圖層的創(chuàng)建操作。通過(guò)鼠標(biāo)的點(diǎn)擊操作，能夠創(chuàng)建出圖層。具體步驟如下： 進(jìn)入【設(shè)計(jì)】視圖窗口，再將光標(biāo)放置在圖層將要出現(xiàn)的位置上，選擇【工具箱】中的HTML選項(xiàng)卡，然后雙擊Div控件或拖曳Div控件到設(shè)計(jì)頁(yè)面中適當(dāng)位置。 選中插入的Div，利用出現(xiàn)的8個(gè)控制點(diǎn)，拖曳到合適的位置，并縮放為適當(dāng) 大小。 選中Div，在右邊屬性窗口中的某些屬性上進(jìn)行選擇或輸入內(nèi)容，瀏覽時(shí)圖層會(huì)發(fā)生相應(yīng)變化。,4.2 插 入 圖 像,為了在網(wǎng)頁(yè)上插入圖像

11、，先要將需要的圖像增加到網(wǎng)站目錄(或其子目錄)中。然后在布局的基礎(chǔ)上，利用以下兩種方法插入圖像： (1) 將HTML選項(xiàng)卡中的Image控件拖放至指定的位置，然后在它的src屬性中設(shè)置圖像的URL。 (2) 在【源】視圖中寫(xiě)以下代碼。例如： 用這種方法可以插入JPEG、GIF、PNG等圖像。如果要在網(wǎng)頁(yè)中顯示Flash動(dòng)態(tài)圖像，除了需要將*.swf圖增加到網(wǎng)站中，還需要使用以下語(yǔ)句，才能將該圖像顯示出來(lái)： 其中frame.swf是Flash可執(zhí)行文件的名字。,4.3 編 輯 圖 像,4.3.1 用HTML語(yǔ)言編輯圖像,在HTML語(yǔ)言中，可使用IMG標(biāo)記在網(wǎng)頁(yè)中插入一個(gè)行內(nèi)圖像。IMG標(biāo)記有許多

12、屬性，其中最常用的是SRC、ALT、HEIGHT、WIDTH、BORDERHSPACE、VSPACE和ALIGN屬性。而且，IMG標(biāo)記不僅用于在網(wǎng)頁(yè)中插入圖像，也可以用于播放Video for Windows的多媒體文件(.avi)，以后將分別介紹。 1. 設(shè)置圖像的位置和替換文本 SRC屬性給出圖像文件的URL地址，圖像可以是JPEG文件、GIF文件或PNG文件。ALT屬性給出圖像的簡(jiǎn)單文本說(shuō)明，這段文本在瀏覽器不能顯示圖像時(shí)顯示出來(lái)，或圖像加載時(shí)間過(guò)長(zhǎng)時(shí)先顯示出來(lái)。 2. 指定圖像的高和寬 通過(guò)HEIGHT和WIDTH屬性來(lái)設(shè)置圖像的高度和寬度，所用單位可以是像素或百分?jǐn)?shù)。如果只給出了高度

13、或?qū)挾?，則圖像將按比例進(jìn)行縮放。 3. 設(shè)置圖像的邊框 使用IMG標(biāo)記的BORDER屬性可以給圖像添加邊框效果，該屬性的取值為正整數(shù)，單位為像素。,4. 設(shè)置圖像與文本之間的空白 使用IMG標(biāo)記的HSPACE和VSPACE屬性可以設(shè)置圖像與文本之間的空白，單位均為像素。 5. 設(shè)置圖像在頁(yè)面上的對(duì)齊方式 如果插入的圖像在頁(yè)面上單獨(dú)占一行，則可以將IMG標(biāo)記置于和標(biāo)記之間，并通過(guò)P標(biāo)記的ALIGN屬性來(lái)設(shè)置圖像對(duì)齊方式。 6. 設(shè)置圖像與文本的對(duì)齊方式 當(dāng)在頁(yè)面中進(jìn)行圖文混排時(shí)，可以使用IMG標(biāo)記的ALIGN屬性來(lái)設(shè)置圖像與文本在垂直方向的對(duì)齊方式，此時(shí)ALIGN屬性的取值如下： top：圖像與

14、文本頂部對(duì)齊。 middle：圖像與文本中央對(duì)齊。 bottom：圖像與文本底部對(duì)齊。 通過(guò)設(shè)置IMG標(biāo)記的ALIGN屬性，也可以在圖像的左、右繞排文本，此時(shí)ALIGN屬性的取值為： left：圖像居左，文本居右。 right：圖像居右，文本居左。 使用換行標(biāo)記BR的CLEAR屬性，可以將換行后的文本移到圖像的下面。,4.3.2 用可視化方法編輯圖像,1. 確定圖像編輯器 通過(guò)與一些外部編輯器結(jié)合可以用可視化方法編輯圖像。例如與Fireworks MX 2004相結(jié)合就是一個(gè)例子。 Fireworks MX 2004能夠?qū)⑽粓D和矢量編輯工具相結(jié)合，隨時(shí)對(duì)圖像進(jìn)行編輯，還可以用批處理方式工作。

15、Fireworks MX 2004是為適應(yīng)網(wǎng)頁(yè)需要而推出來(lái)的一套圖形解決方案，因此它非常重視圖像文件的容量和屏幕輸出等因素，力求找到最佳效果的平衡。這一點(diǎn)與其他傳統(tǒng)傳媒的要求不同，對(duì)于一些廣告印刷品來(lái)說(shuō)，也許Fireworks MX 2004并不是處理圖像的最佳選擇。 Fireworks MX 2004從各種圖形編輯軟件中吸取優(yōu)點(diǎn)。例如，它處理圖像的思路、技巧、工具和快捷鍵等方面吸取了Photoshop的特長(zhǎng)，還集中了Flash中的圖符和庫(kù)面板，以及吸取了Dreamweaver的快速啟動(dòng)欄等優(yōu)點(diǎn)。 本書(shū)不準(zhǔn)備對(duì)Fireworks MX 2004進(jìn)行詳細(xì)的介紹，使用方法請(qǐng)參閱相關(guān)書(shū)籍。,2. 建

16、立ASP.NET 2.0與Fireworks MX 2004之間的調(diào)用關(guān)系 為了調(diào)用Fireworks MX 2004軟件編輯圖像，必須安裝Fireworks MX 2004軟件并建立ASP.NET 2.0與它之間的聯(lián)系。建立聯(lián)系的方法是，在【設(shè)計(jì)】視圖中選擇【工具】菜單，然后選擇【外部工具】命令，將彈出如圖4.3所示的對(duì)話(huà)框，再利用【添加】、【標(biāo)題】、【命令】等進(jìn)行適當(dāng)設(shè)置，以完成兩者的聯(lián)系。,圖4.3 【外部工具】對(duì)話(huà)框,4.4表單標(biāo)記表單在Web網(wǎng)頁(yè)中用來(lái)給訪(fǎng)問(wèn)者填寫(xiě)信息，實(shí)現(xiàn)客戶(hù)端與服務(wù)器端的交互功能。表單標(biāo)記的格式: . 在和之間，可以使用以外的任何HTML標(biāo)記,（1）input標(biāo)記格式：表單控件標(biāo)記中具有非常重要的地位，它提供客戶(hù)的輸入?yún)^(qū)。該標(biāo)記是單個(gè)標(biāo)記，沒(méi)有結(jié)束標(biāo)記。 INPUT中有六個(gè)屬性：TYPE、NAME、SIZE、VALUE、MAXLENGTH、CHECKED。該標(biāo)記共提供了九種類(lèi)型的輸入?yún)^(qū)域，由type屬性來(lái)決定。,Button Checkbox File Hidden Image Password Radio Reset Submit text,（2）下拉列表框、 標(biāo)記對(duì)用來(lái)創(chuàng)建一個(gè)菜單下拉列表框。具有multiple、