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

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

2、車時刻表等大都采用表格的形式。將數(shù)據(jù)或圖形放在表格中顯得更有規(guī)律，更有利于對照和比較。 一張表格由行(row)、列(column)、單元格(cell)三部分組成。創(chuàng)建表格實際上就是創(chuàng)建表格的行、列和單元格。 用HTML語言創(chuàng)建表格的方法如下： 創(chuàng)建表格的語句： 創(chuàng)建表格的標(biāo)題： 創(chuàng)建行的語句： 創(chuàng)建欄名的語句： 創(chuàng)建單元格的語句：,可通過TABLE標(biāo)記的下列屬性對表格的格式進行設(shè)置： ALIGN：指定表格的對齊方式，取值可以是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次特快列車時刻表 站名 到站時刻 開車時刻 北京西 - 16：0 石家莊 18：56

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

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

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

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

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

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

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

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

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

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

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

15、Fireworks MX 2004是為適應(yīng)網(wǎng)頁需要而推出來的一套圖形解決方案，因此它非常重視圖像文件的容量和屏幕輸出等因素，力求找到最佳效果的平衡。這一點與其他傳統(tǒng)傳媒的要求不同，對于一些廣告印刷品來說，也許Fireworks MX 2004并不是處理圖像的最佳選擇。 Fireworks MX 2004從各種圖形編輯軟件中吸取優(yōu)點。例如，它處理圖像的思路、技巧、工具和快捷鍵等方面吸取了Photoshop的特長，還集中了Flash中的圖符和庫面板，以及吸取了Dreamweaver的快速啟動欄等優(yōu)點。 本書不準(zhǔn)備對Fireworks MX 2004進行詳細(xì)的介紹，使用方法請參閱相關(guān)書籍。,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è)計】視圖中選擇【工具】菜單，然后選擇【外部工具】命令，將彈出如圖4.3所示的對話框，再利用【添加】、【標(biāo)題】、【命令】等進行適當(dāng)設(shè)置，以完成兩者的聯(lián)系。,圖4.3 【外部工具】對話框,4.4表單標(biāo)記表單在Web網(wǎng)頁中用來給訪問者填寫信息，實現(xiàn)客戶端與服務(wù)器端的交互功能。表單標(biāo)記的格式: . 在和之間，可以使用以外的任何HTML標(biāo)記,（1）input標(biāo)記格式：表單控件標(biāo)記中具有非常重要的地位，它提供客戶的輸入?yún)^(qū)。該標(biāo)記是單個標(biāo)記，沒有結(jié)束標(biāo)記。 INPUT中有六個屬性：TYPE、NAME、SIZE、VALUE、MAXLENGTH、CHECKED。該標(biāo)記共提供了九種類型的輸入?yún)^(qū)域，由type屬性來決定。,Button Checkbox File Hidden Image Password Radio Reset Submit text,（2）下拉列表框、 標(biāo)記對用來創(chuàng)建一個菜單下拉列表框。具有multiple、