- 相關推薦
網頁布局教案
第六章網頁布局 教學目標： 知識與技能： n 常用的網站結構式 n 網頁設計（結構式的應用） 1. 使用Photoshop制作網頁框架 2. 使用Dreamweaver制作網頁框架 情感態度： 隨著人類文明的不斷進步，社會化大生產時代將作為人類社會的最終形式而存在，個人英雄主義的時代早已經結束，合作意識對社會的發展至關重要。合作是一種能力，更是一種藝術。唯有善于與人合作，才能獲得更大的力量，爭取更大的成功。現代社會，分工細化，競爭激烈，只有通過小組合作的力量，才能最大限度地實現自己的價值，創造輝煌的人生。 教學重點： n 會使用結構式制作網頁 教學難點： n 會使用Dreamweaver制作網頁框架 教學方法： 講授法、演示法 教學課時： 1課時 教學過程 回顧上章內容 v 色彩的象征意義有哪些？（紅色、藍色） 喜慶、幸福、鮮血、戰爭、危險、狂熱 v 色彩的感覺有哪些 冷暖、輕重、進退、興奮與沉寂 課程導入 通過以下幾個網頁大家看看它在布局上有什么特點？ 一、常用的網站結構式 在網站中，網頁的框架結構就是網站的骨架，是基礎。下面來講解幾種常用的網站結構式。 v 上下結構式：結構比較開闊，大的面積可以充分展示網站的形象圖片，但由于欄數少，容易給人沒有氣勢的感覺。 網頁上下結構式的兩種表現形式 來看一下相關的網頁實例 v 左右結構式：清晰分列兩旁的結構式。一般左側放置導航，最上邊放公司的logo；右側是正文、內容部分或者企業形象展示。左右結構式和上下結構式一樣，常被用于企業網站。 網頁左右結構式的兩種表現形式 來看一下相關的網頁實例 v 上左右結構式：下方兩欄的寬窄營造的網站氣氛不同。圖中均為上左右結構式，但人們瀏覽網站時，首先看到其中的信息最重要的（用灰色標注）部分。它和左右、上下結構式不同的是：信息相對豐富。 網頁上左右結構式的表現形式 來看一下相關的網頁實例 v 上左中右結構式： 和上左右結構式相比，上左中右的信息容量更大，一般門戶網站多采用這種結構式。但這種結構容易是頁面擁擠，看起來比較繁雜。 網頁上左中右結構式表現形式 來看一下相關的網頁實例 課堂提問 大同一職中網站布局用了哪種結構式？ 上左右結構式 二、 網頁設計（結構式應用） v 用所學結構式制作網頁（使用photoshop制作） 根據所給出的素材，拼出一幅上左中右結構式的網頁。（用以前學到的ps知識） v 使用Dreamweave軟件實現網頁的結構式 操作步驟分析 3 2 4 1 操作重點： 插入表格：crtl+alt+t 邊框顏色：選中邊框 屬性面板 邊框顏色 背景圖片：自動重復 頁面屬性：文字大小 文本顏色 課堂提問 v 網頁的布局可以用什么軟件來實現？： Photoshop、dreamweaver v 本章所講網頁框架結構式有哪些？ 上下結構式、左右結構式、上左右結構式、上左中右結構式 n 網頁結構式的綜合應用（下節課詳細講解） v 網頁結構在單個頁面中的綜合應用 v 網頁結構在整個頁面中的綜合應用 課堂小結： v 掌握所學結構式制作網頁 v 會用所學結構式制作網頁 v 會使用phtotshop、dreamweaver制作網頁 作業： 運用你們今天所學的知識，設計我們一職中的網頁。 教學反思： 板書設計： 一、 常用的網站結構式 1.上下結構式 2.左右結構式 3.上左右結構式 4.上左中右結構式 二、 網頁設計（結構式的應用） 1.使用Photoshop制作網頁框架 2.使用Dreamweaver制作網頁框架【網頁布局教案】相關文章：
網頁的教案01-25
作文的結構布局方法12-11
網頁設計報告04-25
網頁設計總結11-09
網頁設計論文11-08
網頁設計心得12-21
網頁制作的心得12-15
客廳風水布局怎么擺放才好08-19
臥室內有廁所的風水布局11-06