ch03使用表格和框架規(guī)劃網(wǎng)頁布局

第三

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

表格的概念

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

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

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

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

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

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

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

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

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

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

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

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

框架的概念

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

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

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

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

框架的基本操作

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