當前位置 : 首頁 > 教師論文

Frontpage中表格的應用
日期:2010-11-12 來源:大河中學

網址:虎門硝煙(http://10.7.16.2/hmweb/)觀察其版面布局,從中可看出它由四個表格構成整個版面的四個區域。其中有些表格屬于規則表格,有些屬不規則表格不規則表格通過規則表格拆分、合并單元格得到,表格布局如下圖所示:
表格布局圖
三、創建表格創建表格的方式1、插入表格 (插入→表格)2、插入表格鈕3、繪制表格學生練習:創建表格。第一步:參考下圖的表格結構,創建表格。  第二步:通過合并、拆分單元格實現下圖的表格布局效果。  學生實踐與探討以下幾個問題: 1、設置表格屬性時,表格寬度有兩個單位:像素和百分比,它們有何區別?如果選擇像素為單位,屏幕設置為800*600像素的用戶,應該指定多少像素的寬度比較合適?(嘗試操作)(在表格處單擊右鍵,選擇表格屬性,進入表格屬性框)2、在IE中瀏覽網頁時,如果不想顯示表格,該如何設置?3、如何設置表格的背景?  參考效果如下:  四、編輯表格主要操作:1、調整表格結構(合并、拆分單元格)2、設置表格的寬度及對齊方式3、設置表格邊框、單元格邊距等 (右鍵——表格屬性)4、 設置表格和單元格的背景顏色和圖片。(右鍵“單元格屬性”背景)  學生練習:編輯表格  五、在表格的單元格中添加內容模仿“虎門硝煙”網站的首頁:http://10.7.16.2/hmweb/學生練習:在單元格中添加內容。    探究:根據網頁設計要求有一個“彎角”制作的效果。當我們插入一個彎角圖片到單元格時,會發現彎角圖片與上方導航欄之間出現一個空隙。如何解決圖片與表格的緊密連接,實現網頁中圖形的拼接呢?

  一、新課引入 大家根據自己的生活和學習經驗,舉例幾個應用表格的例子,思考表格的用途有哪些? 例子:成績表、課程表、文明班評比、金牌榜等。 用途:數據對比、統計,方便閱讀、瀏覽。網頁中的應用:表格在網頁設計中的意義遠非一般概念中的表格應用的理解,它更大的用處在于網頁版面的布局--定位頁面元素。    許多網頁,表面上看起來并沒有使用表格,實際上卻是大量表格組織起來的。網頁中的內容和數據,如果不使用表格組織,在瀏覽器中往往發生變形和走樣,看不到預期的效果,如果使用表格,就不會發生這種情況。 舉例:虎門硝煙網站http://10.7.16.2/hmweb/ (用Frontpage打開首頁,讓學生觀察網頁是如何使用表格排版的)   二、分析網頁布局 這個是虎門硝煙網站的首頁,大家分析這個網頁的表格布局如何?(注:先把其中表格內的文字、圖片、動畫等所有內容刪除)  
管理:大河中學 時間:2010-11-12 收藏本頁