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

第三

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

表格的概念

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

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

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

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

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

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

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

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

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

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

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

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

框架的概念

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

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

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

創(chuàng)建好框架后，可以修改框架，主要包括選擇框架、設(shè)置框架屬性。框架并不是在所有瀏覽器中都可以顯示的，這時就需要在標簽中輸入提示信息。

框架的基本操作

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