網(wǎng)頁設(shè)計(jì)技術(shù)教程 第4章 圖像、表格與框架

《網(wǎng)頁設(shè)計(jì)技術(shù)教程 第4章 圖像、表格與框架》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。

1、第4章圖像、表格與框架本章要點(diǎn)：?圖像的特點(diǎn)與操作?表格的創(chuàng)建、編輯和屬性設(shè)置?表格的屬性設(shè)置?框架網(wǎng)頁的使用4.1使用圖像改善網(wǎng)頁效果4.1.1圖像格式簡(jiǎn)介1．JPG格式JPG是利用JPEG方法壓縮的圖像格式，它也是瀏覽器所廣泛支持的一種格式。2．GIF格式GIF（GraphicsInterchangeFormat）是“圖形互換格式”的簡(jiǎn)稱，它是專為聯(lián)機(jī)圖形設(shè)計(jì)的，目的是能夠在不同平臺(tái)上交流使用。3．BMP格式BMP（BitMap）是一種與設(shè)備無關(guān)的圖像文件格式，它是Windows軟件推薦使用的一種位圖格式。4.1.2圖像的基本操作1．調(diào)整圖像的大小2．設(shè)置圖像邊框3．設(shè)置圖像與文本

2、的對(duì)齊方式4．設(shè)置圖像環(huán)繞5．設(shè)置圖像間距通過實(shí)例說明如何設(shè)置圖像間距：（1）在網(wǎng)頁中插入兩幅圖像；（2）選中圖像，單擊鼠標(biāo)右鍵，執(zhí)行快捷菜單上的【圖片屬性】命令，打開【圖片屬性】對(duì)話框，選擇【外觀】選項(xiàng)卡，將【布局】選項(xiàng)中的【水平間距】、【垂直間距】設(shè)置為20，單擊【確定】按鈕，完成設(shè)置。4.1.3圖像工具欄的使用在FrontPage2002中，可以直接使用【圖像】工具欄中的各種工具對(duì)網(wǎng)頁中的圖像進(jìn)行編輯。通過執(zhí)行【視圖】→【工具欄】→【圖片】命令，打開【圖片】工具欄，如圖:4.1.4創(chuàng)建圖像映射圖像映射就是在圖像的局部區(qū)域上定義一個(gè)鏈接到其他對(duì)象或網(wǎng)頁的超鏈接。圖像映射通常通過兩種

3、途徑實(shí)現(xiàn)：通過幾何圖形創(chuàng)建鏈接熱點(diǎn)和通過圖片中的文本建立一個(gè)圖像映射。下面通過具體實(shí)例來介紹其創(chuàng)建方法，最后的效果如圖具體操作步驟如下：（1）創(chuàng)建一個(gè)新網(wǎng)頁，在網(wǎng)頁中加入如圖所示的元素：表格、文字和一幅準(zhǔn)備好的圖片，并作好網(wǎng)頁的布局。然后選中圖片準(zhǔn)備創(chuàng)建熱點(diǎn)。（2）單擊【圖片】工具欄的按鈕，在圖片中插入文字，這時(shí)如果圖片不是GIF格式，系統(tǒng)會(huì)提示將其轉(zhuǎn)換為GIF格式。（3）此時(shí)在圖片中會(huì)出現(xiàn)一個(gè)白邊的輸入框，框中有一個(gè)閃動(dòng)的光標(biāo)，提示用戶輸入文字。在輸入框中輸入“地球”，并調(diào)節(jié)邊框的大小，執(zhí)行【格式】→【字體】命令或直接通過【格式】工具欄上的快捷命令編輯字體的顏色和大小。（4）在輸入的

4、文字上單擊鼠標(biāo)右鍵，執(zhí)行快捷菜單中的【圖片熱點(diǎn)屬性】命令，打開【編輯超鏈接】對(duì)話框，選擇本熱點(diǎn)要鏈接到的目標(biāo)網(wǎng)頁。如下圖所示：（5）依次重復(fù)步驟2、3、4為圖片添加其他的文字熱點(diǎn)。（6）單擊【圖片】工具欄的按鈕，為圖片插入幾何形狀的熱點(diǎn)。（7）重復(fù)步驟6，為圖片中的其它星體創(chuàng)建熱點(diǎn)。（8）另外，單擊【圖片】工具欄的按鈕，可以突出所有定義的熱點(diǎn)，保存網(wǎng)頁，在瀏覽器中瀏覽，效果如下圖所示：4.1.5圖片的替代性文本和低分辨率圖片在FrontPage2002中為圖片添加替代性文本的具體操作步驟如下：（1）在【網(wǎng)頁】視圖中，用鼠標(biāo)右鍵單擊圖形，執(zhí)行快捷菜單上的【圖片屬性】命令，也可以直接在編輯

5、狀態(tài)下雙擊圖片，打開【圖片屬性】對(duì)話框。（2）單擊【圖片屬性】對(duì)話框中的【常規(guī)】選項(xiàng)卡，如圖4-8所示。在【替代表示】項(xiàng)的【文本】文本框中輸入替代文本。（3）單擊【確定】按鈕，完成設(shè)置。這樣在預(yù)覽時(shí)，就可以看到替代圖片顯示的文本。?注意：很多Web瀏覽器在下載圖形的過程中，或?yàn)g覽者將鼠標(biāo)移動(dòng)到圖片上方時(shí)，也會(huì)出現(xiàn)圖片的顯示文本，另外，在選擇替代文本時(shí)，所選文字應(yīng)該能夠表達(dá)圖像的主要含義。4.2表格4.2.1創(chuàng)建和編輯表格FrontPage2002中提供了四種創(chuàng)建表格的方法：1．快速創(chuàng)建表格單擊【常用】工具欄中的【插入表格】按鈕2．菜單命令插入表格執(zhí)行【表格】→【插入】→【表格】命令，打

6、開【插入表格】對(duì)話框3．手繪表格操作步驟如下：（1）執(zhí)行【表格】→【手繪表格】命令，打開【表格】工具欄（2）單擊【表格】工具欄的【手繪表格】按鈕，鼠標(biāo)指針在文本編輯區(qū)變?yōu)殂U筆狀圖標(biāo)。4．將文本轉(zhuǎn)換為表格要將文本轉(zhuǎn)換為表格，必須先設(shè)置文本的格式。一般用逗號(hào)分割數(shù)據(jù)項(xiàng)，用回車符表示段落結(jié)束4.2.2表格工具欄的操作【表格】工具欄中常用工具的使用。?手繪表格?擦除?插入行?插入列?合并單元格?填充顏色?單元格布局4.2.3設(shè)置表格各種屬性執(zhí)行【表格】→【表格屬性】命令，可以看到表格屬性包括三部分：表格屬性、單元格屬性和標(biāo)題屬性，打開其中的【表格屬性】對(duì)話框，如圖：表格的外觀設(shè)置示意圖4.2.

7、4頁面布局如下圖所示，就是一個(gè)采用表格布局的網(wǎng)頁，具體制作過程，用戶可以參考以上的表格編輯方法，自己獨(dú)立完成。4.3創(chuàng)建框架網(wǎng)頁4.3.1認(rèn)識(shí)框架下面是一個(gè)簡(jiǎn)單的框架網(wǎng)頁示例，如下圖所示。設(shè)計(jì)時(shí)使用框架將網(wǎng)頁分為三部分，點(diǎn)擊左下邊框架中的導(dǎo)航網(wǎng)頁時(shí)，通過右下邊的主要區(qū)域顯示目標(biāo)網(wǎng)頁的內(nèi)容。4.3.2在網(wǎng)頁中使用框架1．使用模板創(chuàng)建框架網(wǎng)頁（1）執(zhí)行【文件】→【新建】→【網(wǎng)頁或站點(diǎn)】命令，出現(xiàn)【新建網(wǎng)頁或站點(diǎn)】任務(wù)窗格，打開【網(wǎng)頁模板】對(duì)話框，選