網頁布局教案

第六章網頁布局 教學目標： 知識與技能： 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

許理平：談談關鍵詞在網頁中的布局 -電腦資料04-07

作文的結構布局方法12-11

網頁設計報告04-25

網頁設計總結11-09

網頁設計論文11-08

網頁設計心得12-21

網頁制作的心得12-15

客廳風水布局怎么擺放才好08-19

臥室內有廁所的風水布局11-06