第三

章使用表格和框架規(guī)劃網(wǎng)頁(yè)布局學(xué)習(xí)目標(biāo)規(guī)劃網(wǎng)頁(yè)布局，表格是常用的工具之一，表格在網(wǎng)頁(yè)中不僅可以排列數(shù)據(jù)，還可以對(duì)頁(yè)面中的圖像、文本、動(dòng)畫(huà)等元素進(jìn)行準(zhǔn)確的定位，是頁(yè)面顯得整齊有序、分類(lèi)明確，便于訪問(wèn)者瀏覽。使用表格布局網(wǎng)頁(yè)，在不同平臺(tái)和不同分辨率的瀏覽器中都能保持原有的布局。使用框架規(guī)劃網(wǎng)頁(yè)，可以把網(wǎng)頁(yè)分成幾個(gè)部分，每個(gè)部分都是一個(gè)獨(dú)立的HTML頁(yè)。本章主要介紹使用表格和框架規(guī)劃網(wǎng)頁(yè)布局。:::::《計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列》系列叢書(shū)官方網(wǎng)站http:///edu:::::本章重點(diǎn)

表格的概念

使用表格編輯表格使用表格規(guī)劃網(wǎng)頁(yè)布局框架的概念使用框架設(shè)置網(wǎng)頁(yè)布局:::::《計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列》系列叢書(shū)官方網(wǎng)站http:///edu:::::3.1使用表格

網(wǎng)頁(yè)向?yàn)g覽者提供的信息是多樣化的，例如文字、圖像、Flash動(dòng)畫(huà)等。如何使這些網(wǎng)頁(yè)元素在網(wǎng)頁(yè)中的合理位置上顯示出來(lái)，使網(wǎng)頁(yè)變得有條理和美觀，是設(shè)計(jì)人員在著手設(shè)計(jì)網(wǎng)頁(yè)之前必須考慮的事情。表格的作用就在于幫助設(shè)計(jì)者高效、準(zhǔn)確地定位各種網(wǎng)頁(yè)數(shù)據(jù)，直觀、鮮明地表達(dá)設(shè)計(jì)者的思想。表格的概念插入表格:::::《計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列》系列叢書(shū)官方網(wǎng)站http:///edu:::::3.1.1表格的概念

在網(wǎng)頁(yè)文檔中，表格是用于整理復(fù)雜的數(shù)據(jù)內(nèi)容，安排網(wǎng)頁(yè)文檔的整體布局。利用表格來(lái)設(shè)計(jì)網(wǎng)頁(yè)的布局，可以不受網(wǎng)頁(yè)形態(tài)的限制，并在不同分辨率下維持原有的頁(yè)面布局。典型的利用表格設(shè)計(jì)的網(wǎng)頁(yè)。:::::《計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列》系列叢書(shū)官方網(wǎng)站http:///edu:::::3.1.2插入表格

DreamweaverCS3中，表格可以用于制作簡(jiǎn)單的圖表，使用表格來(lái)顯示數(shù)據(jù)，可以更加方便地進(jìn)行查看、修改以及分析等目的。:::::《計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列》系列叢書(shū)官方網(wǎng)站http:///edu:::::3.2編輯表格

創(chuàng)建表格后，可以對(duì)表格進(jìn)行編輯，包括合并和拆分單元格、添加和刪除單元格、設(shè)置單元格和表格屬性等，并且可以導(dǎo)入和到處表格。選擇表格編輯表格和單元格:::::《計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列》系列叢書(shū)官方網(wǎng)站http:///edu:::::3.2.1選擇表格

選要對(duì)網(wǎng)頁(yè)元素進(jìn)行編輯或設(shè)置，首先需要選擇表格。在DreamewaverCS3中，可以一次選擇整個(gè)表、行或列，也可以選擇連續(xù)的單元格。:::::《計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列》系列叢書(shū)官方網(wǎng)站http:///edu:::::2.2.2使用高級(jí)面板創(chuàng)建本地站點(diǎn)

使用高級(jí)面板創(chuàng)建本地站點(diǎn)，選擇【站點(diǎn)】|【管理站點(diǎn)】命令，打開(kāi)【管理站點(diǎn)】對(duì)話框，單擊【新建】按鈕，在彈出的菜單中選擇【站點(diǎn)】命令，打開(kāi)【站點(diǎn)定義為】對(duì)話框。單擊【高級(jí)】選項(xiàng)卡，打開(kāi)該選項(xiàng)卡對(duì)話框。:::::《計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列》系列叢書(shū)官方網(wǎng)站http:///edu:::::3.2.3編輯表格和單元格

創(chuàng)在HTML頁(yè)中的表格，可以設(shè)置表格單元格的屬性來(lái)改變外觀，也可以對(duì)網(wǎng)頁(yè)中的表格及單元格進(jìn)行調(diào)整大小、添加及刪除行列、合并拆分單元格等操作。:::::《計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列》系列叢書(shū)官方網(wǎng)站http:///edu:::::3.3使用表格規(guī)劃網(wǎng)頁(yè)布局在網(wǎng)頁(yè)設(shè)計(jì)中，頁(yè)面布局是非常重要的部分。好的布局能使整個(gè)網(wǎng)頁(yè)更加美觀、大方、實(shí)用。DreamweaverCS3提供了多種方法來(lái)創(chuàng)建和控制網(wǎng)頁(yè)布局，在表格的【布局模式】中規(guī)劃網(wǎng)頁(yè)布局就是最常用、最實(shí)用的方式之一。表格的【布局模式】來(lái)源于表格，但是在布局模式中簡(jiǎn)化了使用表格進(jìn)行網(wǎng)頁(yè)布局的過(guò)程，避免了使用傳統(tǒng)的方法創(chuàng)建基于表格的頁(yè)面布局時(shí)經(jīng)常出現(xiàn)的一些問(wèn)題，如定位不準(zhǔn)、不易調(diào)整等。

在【布局模式】中規(guī)劃網(wǎng)頁(yè)布局

設(shè)置布局表格和單元格屬性:::::《計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列》系列叢書(shū)官方網(wǎng)站http:///edu:::::3.3.1在【布局模式】中規(guī)劃網(wǎng)頁(yè)布局

表格除了可以羅列數(shù)據(jù)，還可以進(jìn)行頁(yè)面定位。但是，創(chuàng)建表格最初是為了顯示表格數(shù)據(jù)，而不是用于對(duì)Web頁(yè)布局，因此使用表格進(jìn)行頁(yè)面定位或是設(shè)計(jì)布局并不是非常方便。除此以外，使用表格還存在一些其他問(wèn)題。為了解決這一問(wèn)題、簡(jiǎn)化使用表格進(jìn)行頁(yè)面布局的過(guò)程，DreamweaverCS3在表格中提供了【布局模式】。:::::《計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列》系列叢書(shū)官方網(wǎng)站http:///edu:::::2.3.2設(shè)置布局表格和單元格屬性

在DreamweaverCS3中，可以在【屬性】面板中設(shè)置【布局模式】中的任何布局單元格和布局表格的外觀，例如背景、元素對(duì)齊方式等。:::::《計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列》系列叢書(shū)官方網(wǎng)站http:///edu:::::3.4使用框架在網(wǎng)絡(luò)帶寬十分有限的情況下，如何提高網(wǎng)頁(yè)的下載速度，是設(shè)計(jì)網(wǎng)頁(yè)時(shí)必須考慮的問(wèn)題。如果多個(gè)網(wǎng)頁(yè)擁有相同的導(dǎo)航區(qū)，只是內(nèi)容有所不同，則可以考慮使用框架來(lái)設(shè)計(jì)網(wǎng)頁(yè)布局。這樣瀏覽者在查看不同內(nèi)容時(shí)，便無(wú)需每次都下載整個(gè)頁(yè)面，而可以保持導(dǎo)航部分不變，只下載網(wǎng)頁(yè)中需要更新的內(nèi)容部分即可，從而能夠極大提高網(wǎng)頁(yè)的下載速度。這樣的網(wǎng)頁(yè)也稱(chēng)為框架頁(yè)，其最典型的應(yīng)用便是當(dāng)前十分流行的各種論壇。

框架的概念

創(chuàng)建框架網(wǎng)頁(yè)文檔:::::《計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列》系列叢書(shū)官方網(wǎng)站http:///edu:::::3.4.1框架的概念

框架頁(yè)面通過(guò)框架將網(wǎng)頁(yè)分成多個(gè)獨(dú)立的區(qū)域，在每個(gè)區(qū)域可以單獨(dú)顯示不同的網(wǎng)頁(yè)，每個(gè)區(qū)域可以獨(dú)立翻滾。正是基于框架頁(yè)面的這種特點(diǎn)，使用框架可以極大豐富網(wǎng)頁(yè)設(shè)計(jì)的自由度，在不同的頁(yè)面部分設(shè)置不同的網(wǎng)頁(yè)屬性，尤其是對(duì)于頁(yè)面間的鏈接，可以使頁(yè)面的結(jié)構(gòu)變化自如。:::::《計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列》系列叢書(shū)官方網(wǎng)站http:///edu:::::3.4.2創(chuàng)建框架網(wǎng)頁(yè)文檔

使用框架最方便的方法就時(shí)創(chuàng)建框架網(wǎng)頁(yè)文檔，在DreamweaverCS3中，創(chuàng)建框架網(wǎng)頁(yè)文檔的方法有：在【新建文檔】對(duì)話框中創(chuàng)建、在【布局】插入欄中創(chuàng)建和手動(dòng)創(chuàng)建3種。:::::《計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列》系列叢書(shū)官方網(wǎng)站http:///edu:::::3.5編輯框架

創(chuàng)建好框架后，可以修改框架，主要包括選擇框架、設(shè)置框架屬性?？蚣懿⒉皇窃谒袨g覽器中都可以顯示的，這時(shí)就需要在標(biāo)簽中輸入提示信息。

框架的基本操作

設(shè)置框架和框架集屬性:::::《計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列》系列叢書(shū)官方網(wǎng)站http:///edu:::::3.5.1框架的基本操作編輯框架的操作主要包括創(chuàng)建嵌套框架、選擇框架以及設(shè)置框架的屬性等。:::::《計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列》系列叢書(shū)官方網(wǎng)站http:///