網頁的版面設計
教學目標：
知識與技能：
l 認識到網頁版面設計的重要性。
l 了解網頁版面設計的常見布局方式。
l 掌握在網頁中用布局表格來布局頁面的方法。
過程與方法：
l 能根據網站的主題、素材類型、風格，確定網頁的布局方式,yoga mat。
情感態度與價值觀：
l 通過實踐創作的過程，形成主動學習和利用信息技術、參與信息作品創作的態度。
重點難點：用布局表格布局頁面,equipment mat。
教學方法：講解、演示、任務驅動
教學環境：
硬件：多媒體網絡教室
軟件：多媒體輔助教學軟件
學情分析：
據調查高一學生在初中學過網頁制作的只有少數；學生對表格的建立與編輯有一定的基礎。今天對高一新生講授的是：用Dreamweaver MX 2004 這個專業化網頁制作工具對網頁進行版面設計，對學生和老師都是挑戰。
課時安排：一課時
板書設計：詳見課件。
教學過程：
教學環節
教師活動
學生活動
引
入
廣播兩個網頁頁面（內容相同、其中一個經過版面設計，另一個沒有），問更喜歡哪個？
指出：漂亮的頁面能給人視覺享受，比較受歡迎。它之所以受歡迎,北京网页设计，是因為對它進行了版面設計。――進入主題
設問：什麼是網頁的版面設計？
屏幕廣播課件的主頁，讓學生看屏幕得知答案。
瀏覽、思考、回答
學
習
新
知
完
成
任
務
一、選擇頁面的大小
我們正在學習建立自己的網站，我們都希望自己制作的網頁漂亮、有獨特的風格、有較高的點擊率，因此，我們在制作網頁時，就要重視網頁的版面設計。
在設計網頁的版面時,花蓮，首先要明確網頁的尺寸。
提問：通常將頁面的寬度尺寸設置在多少以內？
請同學們先瀏覽課件『頁面大小』，再回答問題。
閱讀學件
回答：780
二、網頁布局
當我們點擊鼠標，在網絡中漫游時，一個個精彩的網頁會呈現在我們面前。試問網頁的精彩因素有哪些呢？色彩的搭配、文字的變化、圖片的處理等，這些當然是不可忽略的因素，除了這些，還有一個重要的因素――網頁布局。
『網頁布局』顧名思義是指對網頁元素的整體安排,民宿。
明確了網頁的尺寸之後，下一步就是網頁布局。
1、常見的網頁布局類型
布置任務一：了解網頁布局的常見類型和各自的特點。
（參見『布局類型』欄目）
學生閱讀學件了解當前網頁布局的常見類型及特點。
1、『國』字型。
特點：充分利用版面，信息量大。
2、拐角型。
特點：簡單明了，容易把握。
3、標題正文型。
特點：簡潔
4、封面型。
特點：生動活潑，簡單明了。
2、用布局表格來布局頁面
用DW打開示例網頁,情色，以標准模式顯示網頁的布局。
目前因特網上大多數網頁都是用表格布局的。但是，使用表格進行布局不太方便，因為最初創建表格是為了將數據排列整齊，而不是用於對網頁進行布局。
為了簡化使用表格進行頁面布局的過程， DW 提供了『布局』模式。在『布局』模式中，繪制布局表格或布局單元格就如同在Word中畫矩形框一樣容易。
演示：用DW新建一個網頁，在布局模式下，繪制布局表格和布局單元格,宜蘭民宿，移動位置，改變大小，強調布局表格與布局單元格的區別。
布置任務二：在布局模式下，模仿示例，繪制布局表格和布局單元格來布局頁面。
（參見『技術支持』欄目）
巡回輔導。
反饋：展示幾個好的作品，及有問題的作品，解決學生完成任務過程中出現的問題。
觀看
聽講
觀看演示。
觀看學件，模仿示例布局網頁，完成任務。
三、圖文編排
在完成布局之後，就可以輸入文字，插入圖片，並且對文本、圖片進行必要的設置，再設置背景色或背景圖片,色情，使得整個網頁渾然一體。
* 布置任務三：在剛布局好的網頁 bujulianxi.htm 中填入相應的具體的內容，完成整個頁面的設計工作,徵信社。
（參見『圖文編排』欄目）
反饋：展示幾個好的作品，及有問題的作品。
完成任務三。
小
結
網頁版面設計的步驟是：首先確定頁面大小,徵信，接著（用布局表格和布局單元格）布局頁面，然後進行圖文編排。
推薦閱讀的文章：