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