1、第四節(jié) 設(shè)計制作網(wǎng)頁,長安區(qū)第十中學(xué) 梁新玲,新課引入：,欣賞兩張素材相同布局不同的網(wǎng)頁 問題: 1.這兩個網(wǎng)頁有什么不同？ 2.你認(rèn)為哪個更好些？為什么？,表格布局在網(wǎng)頁制作中的作用,表格布局可以將頁面分成排列有序的單元格； 表格布局通過設(shè)置屬性，實(shí)現(xiàn)對文本、圖像準(zhǔn)確定位，網(wǎng)頁的布局緊湊而美觀。,提出任務(wù)：,根據(jù)設(shè)計的“書院門”主頁布局草圖制作網(wǎng)站的主頁。,任務(wù)分析：,展示書院門網(wǎng)站的主頁效果圖，分析表格結(jié)構(gòu) 問: 這張網(wǎng)頁是用幾行幾列的表格布局的？,任務(wù)實(shí)施：,任務(wù)1： 根據(jù)網(wǎng)站主頁設(shè)計，插入及編輯表格，完成頁面布局。,思考：,1、插入的表格行、列數(shù)不夠，用什么方法增加行列數(shù)呢？ 2、如何

2、改變表格的列寬和行高？ 3、如果要刪除表格，該如何操作？ 拓展：自行設(shè)計網(wǎng)頁表格布局,歸納提高：創(chuàng)建表格中出現(xiàn)的問題,單元格之間的表格線互相干擾引起表格變形？ 解決方法： 1. 在網(wǎng)頁中從上而下建立多個表格依次獨(dú)立排放。 2.復(fù)雜的表格（表中表），可以采取嵌套單元格。,使用多個表格布局,表格1、6 2x1,表格2、3、5 6x3,表格4 1x3,拓展：嵌套單元格,嘗試將橫向?qū)Ш綏l用嵌套表格來完成,任務(wù)實(shí)施：,任務(wù)2： 設(shè)置表格屬性、單元格屬性 提示： 1.使用表格屬性去除網(wǎng)格線、設(shè)置表格背景色等； 2.使用單元格屬性設(shè)置 單元格背景顏色、背景圖片。,鼠標(biāo)右鍵快捷菜單,任務(wù)實(shí)施：,任務(wù)3：網(wǎng)頁素材的添加 插入藝術(shù)字 插入圖片、文字等 注意 ： 表格背景圖片與插入圖片的區(qū)別？,任務(wù)拓展,各小組根據(jù)自己的網(wǎng)站主題，自主設(shè)計制作網(wǎng)站主頁，插入表格，完成主頁的布局。,展示作品，交流評價,在制作主頁時遇到了哪些問題，是如何解決的？ 針對小組設(shè)計的主頁樣式，用表格能實(shí)現(xiàn)嗎？ 在編輯網(wǎng)頁時遇到了哪些問題，是如何解決的？,課堂總結(jié),本節(jié)我們學(xué)習(xí)了網(wǎng)頁設(shè)計與布局的相關(guān)知識，知道了通過應(yīng)用主題，使網(wǎng)站風(fēng)格一致；學(xué)會了通過插入表格、合并與拆分單元格、設(shè)置單元格屬性，實(shí)現(xiàn)網(wǎng)頁版面的布