資源簡介

第2節 制作網站——應用表格布局網頁
【教學目標】
知識與技能目標
（1）了解表格在網頁設計中的作用。
（2）掌握網頁中表格的制作方法、表格屬性的設置方法以及單元格的修飾與編輯方法，能夠在單元格中正確插入文字和圖片。
（3）能夠根據網頁設計內容，正確布局表格的結構，掌握表格嵌套的設計方法。
過程與方法
比較——>分析——>實踐（規劃、充實、美化、預覽、調整……）——>總結，參考樣圖，聯系“WPS表格”中表格的制作方法，小組協作，完成任務操作和知識的小結。
情感態度與價值觀
通過對比學習使學生體驗軟件學習的一般方法和規律，提高學生自主學習的能力；通過運用表格布局網頁對象活動，進一步掌握各種不同對象屬性的設置方法和規律，體驗創造的快樂；通過“動物——人類的朋友”網站的設計與制作，激發學生關愛動物、保護動物的責任感，從而進一步樹立共同改善人類生存環境的意識。
【教學重點】
1、了解表格在網頁設計中的重要作用和功能。
2、掌握插入、編輯表格的方法及表格的屬性設置。
3、掌握表格嵌套的作用及嵌套方法，恰當設計表格。
【教學難點】
恰當使用表格的嵌套設計；表格中的文字排版、表格間距的設定。
【教學方法】
對比教學法、探究學習、模仿學習、小組協作學習。
【課時安排】
1～2課時
【教學過程】
教學環節 教師活動 學生活動 設計意圖
一、導入 【網頁表格布局的作用】 1、對比：兩種形式的網頁效果：一種是表格結構網頁（未顯示表格線biaoge.html），一種是簡單結構網頁(biaoge2.html)，再呈現另一張表格結構的網頁（顯示表格線biaoge1.html) 2、結論：對比之下，在制作網站頁面時，利用表格結構可有效控制文字、圖片等對象的位置，使網頁的布局既緊湊又整齊美觀 3、引題：運用表格布局網頁結構（呈現學案中效果圖） 對比觀察 得出結論 明確任務。 激情、激趣 開門見山
二、新授 分析 對照學案中的樣圖，分析表格的行列數。 （二）制作 【表格布局】 1、制作一個外框單元格 任務:1：啟動Dreamweaver軟件，導入“d:\dongwu”站點文件夾，新建一張空白網頁。單擊“插入”——“表格”命令，打開“表格”對話框，設置行、列數為1行1列，表格寬度為“1000 像素”，邊框粗細為“1”像素，其他參數默認，并設置“頁面屬性”中上邊距為“0”像素，左邊距也為“0”像素。并以“biaoge.html”為文件名進行網頁的首次保存。 重要提點： 用表格來布局網頁時，通常會在整個表格外部加上僅有一個單元格的表格，即形成表格嵌套，這樣可以使整個網頁的結構穩定。 制作表格并設置表格的結構 （表格布局2演示視頻） 任務2：在單元格內，分別插入1行3列、1行5列及8行1列的三個表格，再在8行1列的表格相應的4個單元格內，分別插入1行2列的表格，表格寬度為“100% 百分比”，邊框粗細為“1”像素，其他參數默認。 【表格充實】 任務3：參照樣圖效果，在表格相應的單元格中插入圖片和輸入文字，并進行適當的編輯，再次保存，預覽效果。（注：素材的保存）。 重要提點： 文字、圖片的編輯、保存方法，跟首頁制作過程中的方法、注意點一致。 在插入圖片與文字前需注意單元格中光標的定位問題，一般設置單元格屬性窗口中“垂直”屬性為“頂端”對齊。 3、單元格屬性面板：（在即將編輯的單元格內單擊，屬性面板即可切換到如圖所示） 【表格美化】 任務4：根據網頁設計需要，參考樣圖，選擇表格或單元格，修改其屬性的“背景顏色”值，再對不需要顯示的表格邊框線，設置其“邊框”值為“0”像素。保存網頁，預覽欣賞效果，如有欠缺，再有針對性地加以調整設置，并最后保存、預覽。 重要提點： 表格屬性面板：（選中整個表格，屬性面板即可切換到如圖所示） 最終效果如下圖： （詳見學案） 大致分析 在師適當的講演引導下，生進行表格布局操作，落后的有問題的學生可以求助本組其他同學或直接參考視頻幫助文件。 在以上第一步操作的基礎上觀看演示視頻，自行完成這部分操作。 聯系已有知識，結合教師提點，完成內容充實，尤其注意單元格屬性面板的切換方法。 在教師引導下預覽效果，發現問題，學習編輯的方法，調整，再預覽、調整，反復修改，最終定稿，保存。 因為是模仿操作，所以，師帶領學生先對頁面結構做仔細分析，在此基礎上，再由教師帶領學生完成部分表格結構的布局，然后，放手讓學生自己根據演示視頻完成操作，教師巡視，適當提點，也可結合具體情況，請領先的學生下位幫助指導。 表格充實部分是學生已有的知識，教師只要稍作提點單元格對齊方式的設置即可放手讓學生自己操作，有問題，可以隨時提出來，大家一起解決。 美化表格，主要涉及到表格屬性和單元格屬性的設置問題，這里需要反復預覽和修改，特別要適時指導學生切換表格和單元格屬性面板的方法，有的放矢。 整個表格布局網頁的初次制作，還是一個比較繁瑣的過程，關鍵在于教師的引導和適當的指導，完成整個網頁的制作任務，學生將會有一個質的提升。
三、展評 個別學生作品展示（優秀的，有典型問題的等） 師生適當點評 個別展示，修改和完善。 有做有評。
四、總結 1、表格布局（插入與編輯，尤其是表格的嵌套） 2、表格充實（圖、文，對齊等） 3、表格美化（表格、單元格對象的邊框、背景等） 根據學案及作品，自行小結。 歸納梳理。
教學后記

展開更多......

收起↑