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