九年級 信息技術(shù) 第2章第3節(jié)《用表格布局網(wǎng)頁》課件

九年級—廣州版—信息技術(shù)—第2章第3節(jié)

用表格布局網(wǎng)頁Dreamweaver與演示文稿軟件

在處理媒體元素時的不同演示文稿軟件（WPS演示、PowerPoint）在處理媒體元素時，會將其看作是一個個的層來處理，層與層之間可以重疊。Dreamweaver在處理媒體元素時，則采用平面占位法。注意：使用Dreamweaver插入媒體元素時，需要先規(guī)劃好媒體元素擺放的位置（即進行布局），再添加媒體元素。先布局后添加網(wǎng)頁元素的范例學(xué)習(xí)目標了解目前常見的網(wǎng)頁版式。學(xué)會設(shè)計個性化網(wǎng)頁版式的基本方法。掌握添加各種網(wǎng)頁元素的方法。網(wǎng)頁內(nèi)容歸類網(wǎng)站徽標+導(dǎo)航欄+橫幅廣告網(wǎng)頁內(nèi)容歸類導(dǎo)航菜單+其他網(wǎng)頁內(nèi)容歸類主體內(nèi)容網(wǎng)頁內(nèi)容歸類版權(quán)信息+聯(lián)系方式+其他一、常見網(wǎng)頁版式1.網(wǎng)頁內(nèi)容分類模塊（1）網(wǎng)站徽標+導(dǎo)航欄+橫幅廣告（2）導(dǎo)航菜單+其他（3）主體內(nèi)容（4）版權(quán)信息+聯(lián)系方式+其他（5）廣告+其他一、常見網(wǎng)頁版式2.1網(wǎng)頁版式之一：三字形網(wǎng)站徽標+導(dǎo)航欄+橫幅廣告主體內(nèi)容版權(quán)信息+聯(lián)系方式+其他一、常見網(wǎng)頁版式2.2網(wǎng)頁版式之二：Ｔ字形網(wǎng)站徽標+導(dǎo)航欄+橫幅廣告導(dǎo)航菜單+其他主體內(nèi)容一、常見網(wǎng)頁版式2.3網(wǎng)頁版式之三：同字形網(wǎng)站徽標+導(dǎo)航欄+橫幅廣告主體內(nèi)容導(dǎo)航菜單+其他廣告+其他一、常見網(wǎng)頁版式2.4網(wǎng)頁版式之四：ＰＯＰ形POP引自廣告術(shù)語，是指頁面布局像一張宣傳海報，以一張精美圖片作為頁面的設(shè)計中心。POP型布局的網(wǎng)頁常用于時尚類網(wǎng)站首頁。其優(yōu)點是頁面優(yōu)美，具有視覺沖擊力，缺點是網(wǎng)頁打開速度慢。網(wǎng)頁布局網(wǎng)頁的精彩與否不僅在于網(wǎng)頁的色彩搭配、文字變化、圖像處理，還在于網(wǎng)頁的布局。網(wǎng)頁布局是制作網(wǎng)頁的重要環(huán)節(jié)，它包括對頁面中各版塊的位置、大小、間距以及疊加關(guān)系等方面的規(guī)劃。課堂案例

如圖所示，制作人員根據(jù)客戶的描述，規(guī)劃網(wǎng)站首頁基本布局圖。該布局圖主要由圖像、文字、浮動導(dǎo)航幾個色塊組合而成，簡潔明了地展示了網(wǎng)頁的基本結(jié)構(gòu)和圖文比例，并且直觀地表現(xiàn)了徽標（logo）、導(dǎo)航欄、橫幅廣告（Banner）、主體內(nèi)容和頁尾版塊的位置。播放視頻內(nèi)容：《設(shè)計網(wǎng)頁版式》表格在網(wǎng)頁布局中的作用Dreamweaver中的表格是一種特殊元素，不但可以用于放置各種數(shù)據(jù)，還可以作為頁面布局元素使用。

表格是網(wǎng)頁設(shè)計中一個非常有用的工具，它不僅可以將相關(guān)數(shù)據(jù)有序地排列在一起，還可以精確地定位文字、圖像等網(wǎng)頁元素在頁面中的位置，使頁面在形式上豐富多彩又條理清楚，在組織上井然有序而不顯單調(diào)。使用表格進行網(wǎng)頁布局的最大好處是，即使瀏覽者改變計算機的分辨率也不會影響網(wǎng)頁的瀏覽效果。因此，表格是網(wǎng)站設(shè)計人員必須掌握的工具。

播放視頻內(nèi)容：《添加網(wǎng)頁元素》播放視頻內(nèi)容：《用Flash制作動感圖片》課堂小結(jié)Dreamweaver對媒體元素的處理形式。網(wǎng)頁的常見結(jié)構(gòu)模塊。常見的網(wǎng)頁版式。使用表格設(shè)計個性化網(wǎng)頁版式的方法。表格在網(wǎng)頁布局中的作用。添加各種網(wǎng)頁元素的方法。課堂練習(xí)1.我們在著手制作網(wǎng)頁時，

不需要過多地考慮網(wǎng)頁總體風(fēng)格和布局。（

）A.正確

B.錯誤B課堂練習(xí)2.哪一項對Dreamweaver表格的描述是錯誤的？（

）A.主要用于計算數(shù)據(jù)B.是一種特殊的網(wǎng)頁元素C.可以用于放置各種數(shù)據(jù)D.可以作為頁面布局元素使用A課堂練習(xí)3.以下網(wǎng)頁屬于哪種版面布局形式：（

）A.三字形B.T字形C.同字形D.POP形D課堂練習(xí)4.下面哪一項是制作網(wǎng)頁的重要環(huán)節(jié)？（

）A.網(wǎng)頁的色彩搭配B.文字變化C.網(wǎng)頁的布局D.圖像處理C

網(wǎng)頁的精彩與否不僅在于網(wǎng)頁的色彩搭配、文字變化、圖像處理，還在于網(wǎng)頁的布局。網(wǎng)頁布局是制作網(wǎng)頁的重要環(huán)節(jié)謝謝觀看！九年級—廣州版—信息技術(shù)—第2章第3節(jié)

《用表格布局網(wǎng)頁》答疑課堂答疑一為什么“表格寬度”這里我們設(shè)置為800像素，它與電腦顯示的分辨率有什么關(guān)系？可以把它隨意調(diào)大嗎？

電腦的分辨率相當于舞臺，表格相當于劃定的表演區(qū)域。用戶顯示器的分辨率限制了網(wǎng)頁的可視范圍，一旦表格寬度超出了顯示器的分辨率，就需要用戶使用左右的滾動條來切換顯示的內(nèi)容。因此，不能隨意調(diào)大表格寬度，影響用戶的瀏覽體驗。課堂答疑二在Dreamweaver的插入菜單中還提供了一個生成“導(dǎo)航條”的功能，它與這種用表格制成的導(dǎo)航條有什么不同呢？Dreamweaver生成“