01第一章-網(wǎng)頁設(shè)計(jì)概述-教案

1、教案首頁 授課題目（章節(jié)或主題）： 第一章網(wǎng)頁設(shè)計(jì)概述 教學(xué)目的與要求： 了解網(wǎng)頁設(shè)計(jì)基礎(chǔ)知識(shí)，掌握網(wǎng)頁的構(gòu)成要素，理解網(wǎng)頁設(shè)計(jì)的特征與原則 教學(xué)重點(diǎn)： 網(wǎng)頁的構(gòu)成要素 教學(xué)難點(diǎn)： 網(wǎng)頁設(shè)計(jì)的特征與原則 教學(xué)過程: 一、組織教學(xué)： 5分鐘 二、引入新課： 5分鐘 三、講授新課： 85分鐘 四、課堂練習(xí)： 80分鐘 四、小結(jié)：5分鐘 第一章網(wǎng)頁設(shè)計(jì)概述 L1 組織教學(xué)： 調(diào)試設(shè)備、準(zhǔn)備素材；清點(diǎn)學(xué)生人數(shù)，做好考勤 L2、導(dǎo)入新課： 通過展示網(wǎng)頁案例，引入新課 L3、講授新課: 、網(wǎng)頁的基本功能與特性 （一）、功能 1信息傳播 新聞信息、商業(yè)信息、文化信息一一文字、聲音、圖像、視頻、動(dòng)畫 2、交流

2、與反饋 留言板、BBS論壇 3、管理與控制 網(wǎng)上商城（如： 淘寶、當(dāng)當(dāng)、卓越亞馬遜等購物管理）、0A系統(tǒng) 軟控制（如：工作流程控制、管理控制） 硬件控制（如： Modem、路由器的控制） （二）、特性 1傳播性 2、審美性 3、技術(shù)性 二、網(wǎng)頁的構(gòu)成要素 網(wǎng)頁作為一種新興媒體，包含的要素有 （一）、內(nèi)容要素： 文字、圖形、聲音、視頻、動(dòng)畫等，以及 Java Active控件等制作特殊效果及交互功 能（表單）的元素。 （二）、形式要素： 標(biāo)志（logo）、通欄廣告（banner）、圖標(biāo)、背景、條幅廣告、彈出窗口、浮動(dòng)圖（層） 導(dǎo)航欄、信息欄、登錄欄、調(diào)查/反饋欄、搜索/查詢欄、版權(quán)欄 （三）、構(gòu)

3、成要素： 頁面、框架、表格、行、列、單元格、層、時(shí)間線 （四）技術(shù)要素： 超鏈接、源代碼、腳本語言、數(shù)據(jù)庫 三、網(wǎng)頁設(shè)計(jì)的特征與原則 網(wǎng)頁界面設(shè)計(jì)應(yīng)時(shí)刻圍繞“信息傳達(dá)”這一主題來開展。根本上來講它是一種以功能 性為主的設(shè)計(jì)。 （一）、特征 1設(shè)計(jì)以功能為主 2、形象明確、易于接受 3、形式簡(jiǎn)潔 （二）原則 1內(nèi)容先導(dǎo)原則 Web站點(diǎn)需要傳輸?shù)淖钪匾南⑹鞘裁矗?哪一種多媒體方式能最有效地說明它？ 在信息列表中，哪個(gè)信息需要特別關(guān)注？ 哪個(gè)信息需要反復(fù)強(qiáng)調(diào)？ 實(shí)現(xiàn)這個(gè)方法的最好途徑是什么？ 這個(gè)消息與其他部分怎樣平衡？ 2、內(nèi)容決定形式原則 什么樣的訪問方式將使用戶的數(shù)目最多？ 他們將使用什么

4、樣的計(jì)算機(jī)？ 他們是家庭用戶還是辦公用戶？ 他們用的是什么瀏覽器？ 用以選擇文件格式、軟件、插件和瀏覽器支持的最小配置是什么？ 能確定用戶需要的最小配置嗎？ 3、有效性與審美性結(jié)合原則 要考慮帶寬的問題。 要注重色彩的搭配問題。 要考慮適應(yīng)不同瀏覽器，不同分辨率的情況。 要讓瀏覽者容易找到要找的東西，使網(wǎng)頁內(nèi)容便于閱讀。 站點(diǎn)內(nèi)容要精、專，及時(shí)更新。 提供交互性。 簡(jiǎn)單即為美。 針對(duì)不同的用戶群，有著不同的服務(wù)方向，但有一點(diǎn)是可以肯定的，需要恰當(dāng)?shù)脑O(shè)計(jì) 沒有好的或壞的設(shè)計(jì)，只有是否合適、是否恰當(dāng)?shù)脑O(shè)計(jì)。這成為了目前網(wǎng)頁設(shè)計(jì)的 一種標(biāo)準(zhǔn)。 延伸閱讀： 人們經(jīng)常問我：“如果想確保網(wǎng)站容易使用最重要

5、的是什么？” 答案很簡(jiǎn)單既不是“重要的內(nèi)容要放在兩次點(diǎn)擊之內(nèi)” ，也不是“采用用戶的語言” 甚至也不是“保持一致” 。 而是 “別讓我思考！” 多年來我一直在跟人們說這是我的可用性第一定律?？催^的網(wǎng)頁越多我就越堅(jiān)信這 一點(diǎn)。 這是最最重要的原則它是在 Web 設(shè)計(jì)中判斷什么有用什么沒用的終極法則如 果你只能記住一條可用性原則那么就記住這一條！ 它意味著設(shè)計(jì)者應(yīng)該盡量做到當(dāng)我看一個(gè)頁面時(shí)它應(yīng)該是不言而喻、一目了然、自我 解釋的 我應(yīng)該能明白它一一它是什么？怎樣使用它？一一而不需要花費(fèi)精力進(jìn)行思考。 不過我們說的到底有多不言而喻？ 呃，充分的不言而喻，就好像你隔壁的鄰居，她對(duì)你的網(wǎng)站主題毫無興趣，

6、也幾乎不 知道如何使用后退按鈕，但她仍然可以看一眼你的主頁，然后說：“噢這是XXX”，（如果 運(yùn)氣好的話她會(huì)說：“噢這是XXX。真是太好了！ ”當(dāng)然這是另外一回事了。） 這樣來看： 當(dāng)我看到一個(gè)不需要思考的網(wǎng)頁時(shí)，腦袋里面浮現(xiàn)的會(huì)是：“嗯這是XXX，那是XXX， 我想要的東西在這里。” 當(dāng)我看到一個(gè)需要思考的網(wǎng)頁時(shí)，頭腦里面浮現(xiàn)的東西都會(huì)加上一個(gè)問號(hào)。 創(chuàng)建一個(gè)網(wǎng)站的時(shí)候，你要做的就是去掉這些問號(hào)。 四、 網(wǎng)站設(shè)計(jì)制作的基本流程 （一 ）、前期策劃和內(nèi)容組織 1、 網(wǎng)站需求分析 2、 網(wǎng)站整體風(fēng)格定位 3、 網(wǎng)站內(nèi)容組織 （二 J、網(wǎng)站頁面的設(shè)計(jì)制作 1、 尋找網(wǎng)頁的創(chuàng)意 2、 利用圖像軟件設(shè)計(jì)效果圖 3、 利用網(wǎng)頁編輯軟件制作網(wǎng)頁 4、 利用網(wǎng)頁動(dòng)畫軟件制作