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

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

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

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

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

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

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

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

）A.正確

B.錯(cuò)誤B課堂練習(xí)2.哪一項(xiàng)對(duì)Dreamweaver表格的描述是錯(cuò)誤的？（

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

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

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

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

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

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