每位老師不可或缺的課件是教案課件，因此教案課件可能就需要每天都去寫(xiě)。制定教案是認(rèn)真?zhèn)湔n的必要手段之一。下面讓我們一起探索“網(wǎng)頁(yè)設(shè)計(jì)教案”的奧秘，請(qǐng)您收藏此頁(yè)面以便隨時(shí)查閱！

網(wǎng)頁(yè)設(shè)計(jì)教案 篇1

《HTML網(wǎng)頁(yè)設(shè)計(jì)》課程教學(xué)大綱

一、教學(xué)目的和任務(wù)

《HTML靜態(tài)網(wǎng)頁(yè)設(shè)計(jì)》是我院軟件開(kāi)發(fā)專(zhuān)業(yè)的專(zhuān)業(yè)基礎(chǔ)課，選用教材《網(wǎng)頁(yè)設(shè)計(jì)》，全書(shū)共分為17章，其中HTML內(nèi)容占11章，包括HTML基本語(yǔ)法，常用標(biāo)簽的使用，表格的使用，層和框架的使用，在HTML中多媒體的應(yīng)用，表單的使用，網(wǎng)頁(yè)的圖像及多媒體，以及站點(diǎn)的創(chuàng)建和管理。其中重點(diǎn)包括常用標(biāo)簽的使用，表格的使用，框架和表單的使用，文字與段落，以及CSS應(yīng)用。

一方面本課程通過(guò)對(duì)網(wǎng)頁(yè)用戶(hù)界面設(shè)計(jì)中的信息傳達(dá)、視覺(jué)符號(hào)的應(yīng)用等專(zhuān)業(yè)知識(shí)的講授，讓學(xué)生能掌握網(wǎng)頁(yè)設(shè)計(jì)中相關(guān)的設(shè)計(jì)思維與視覺(jué)表現(xiàn)方面的知識(shí)，讓學(xué)生把網(wǎng)站中要傳達(dá)的信息通過(guò)數(shù)碼交互媒體的手段展現(xiàn)出來(lái)。另一方面通過(guò)對(duì)相關(guān)設(shè)計(jì)軟件的使用進(jìn)行課堂講解與練習(xí)，使學(xué)生能夠掌握相關(guān)軟件操作的基本知識(shí)，并能夠通過(guò)靈活應(yīng)用課堂知識(shí)處理一些在實(shí)際項(xiàng)目中遇到的技術(shù)困難。

二、教學(xué)方法與教學(xué)要求

1課前認(rèn)真?zhèn)湔n，選好實(shí)例

網(wǎng)頁(yè)制作技術(shù)不斷地發(fā)展變化，新的技術(shù)、新的方法也在不斷涌現(xiàn)，所以我們也需要將網(wǎng)頁(yè)設(shè)計(jì)的最新、最實(shí)用的技術(shù)引用到課堂上去。課堂教學(xué)是傳授知識(shí)的主要方式和場(chǎng)所，目的在于將書(shū)本知識(shí)轉(zhuǎn)化為學(xué)生的知識(shí)和技能。為實(shí)現(xiàn)這一目的，我深入鉆研教材，理清教材內(nèi)容特點(diǎn)、編排次序和知識(shí)點(diǎn)之間的銜接關(guān)系，整理出一條條線索。如在上第一節(jié)課時(shí)，我會(huì)從網(wǎng)上下載一些經(jīng)典的并具有代表性的網(wǎng)頁(yè)給同學(xué)欣賞，在看的過(guò)程中一一的介紹并分解到書(shū)本的各個(gè)章節(jié)的知識(shí)點(diǎn),提高學(xué)生們的興趣與積極性。

課堂的教學(xué)方法

教學(xué)過(guò)程是教師與學(xué)生之間信息傳遞及反饋的過(guò)程。“我認(rèn)為教學(xué)的藝術(shù)不在于傳授本領(lǐng)，而在于激勵(lì)、喚醒、鼓舞?！币虼?，在學(xué)習(xí)過(guò)程中，給學(xué)生明確的思路，激勵(lì)學(xué)生積極主動(dòng)參與思考，運(yùn)用任務(wù)驅(qū)動(dòng)法、模塊教學(xué)法，案例教學(xué)法和項(xiàng)目教學(xué)法等教學(xué)手段，引導(dǎo)他們?cè)诮鉀Q問(wèn)題的過(guò)程中體驗(yàn)到學(xué)習(xí)帶來(lái)的成功感和愉悅感，使學(xué)習(xí)興趣長(zhǎng)久地保持下去。

案例教學(xué)法。案例教學(xué)法，即在教師指導(dǎo)下，根據(jù)教學(xué)目標(biāo)的內(nèi)容的需要，采用案例組織學(xué)生進(jìn)行學(xué)習(xí)、研究、鍛煉能力的方法。案例教學(xué)法可分為案例導(dǎo)入、案例例證、案例討論、案例結(jié)尾和案例練習(xí)等多種方法。

在課堂上我采用是案例例證法，通過(guò)精心挑選案例，明確提出需要掌握的知識(shí)點(diǎn)及操作技能，以案例帶動(dòng)知識(shí)點(diǎn)，貫穿整個(gè)教學(xué)過(guò)程。具體做法是通過(guò)具體案例提出任務(wù)，將任務(wù)分解到每次的課堂教學(xué)中實(shí)現(xiàn)，教學(xué)過(guò)程中為了調(diào)動(dòng)學(xué)生的學(xué)習(xí)積極性，教學(xué)過(guò)程中常常采用互動(dòng)方式，即老師提出一種解決問(wèn)題的思路，然后讓學(xué)生采用其他方式來(lái)解決同一個(gè)問(wèn)題。

項(xiàng)目教學(xué)法。項(xiàng)目教學(xué)法是指通過(guò)實(shí)施一個(gè)完整的項(xiàng)目工作而進(jìn)行的教學(xué)活動(dòng),采取小組討論、協(xié)作學(xué)習(xí)的方式。

將課程中的各個(gè)知識(shí)點(diǎn)或技術(shù)點(diǎn)采用教師給出項(xiàng)目要求或參考項(xiàng)目需求的方式，讓學(xué)生分組選擇項(xiàng)目或者自己調(diào)研確定項(xiàng)目，小組合作進(jìn)行項(xiàng)目規(guī)劃和頁(yè)面設(shè)計(jì)。通過(guò)“小組合作規(guī)劃設(shè)計(jì)”，以“項(xiàng)目小組”為基本形式、小組成員之間的合作性活動(dòng)為主體、完成小組項(xiàng)目為主要目標(biāo)、小組整體水平為主要依據(jù)來(lái)評(píng)定成績(jī)的考核形式，為學(xué)生創(chuàng)造一個(gè)良好的合作氛圍。小組的每一個(gè)成員在這一過(guò)程中都有發(fā)揮自己優(yōu)勢(shì)和表現(xiàn)自己的機(jī)會(huì)，通過(guò)小組成員之間相互討論、評(píng)價(jià)、反饋、傾聽(tīng)、激勵(lì)以及互為師生、優(yōu)勢(shì)互補(bǔ)等合作形式，激發(fā)學(xué)生的學(xué)習(xí)興趣，改進(jìn)學(xué)生的學(xué)習(xí)方法與態(tài)度，增強(qiáng)學(xué)生的集體榮譽(yù)感和團(tuán)隊(duì)協(xié)作精神。

三、教學(xué)內(nèi)容與教學(xué)安排

1、課堂講授

第一章 HTML入門(mén)簡(jiǎn)介

主要掌握文檔標(biāo)記的使用，頭部標(biāo)記title，主體標(biāo)簽body，標(biāo)題標(biāo)記等，了解和掌握HTML文檔的結(jié)構(gòu)。第二章HTML常用標(biāo)簽

通過(guò)學(xué)習(xí)斜體字標(biāo)簽、下標(biāo)標(biāo)簽、上標(biāo)標(biāo)簽、插入字標(biāo)簽、刪除字標(biāo)簽、計(jì)算機(jī)代碼標(biāo)簽、鍵盤(pán)輸入文字標(biāo)簽、計(jì)算機(jī)代碼樣式標(biāo)簽等，用于控制文字樣式。第三章 超鏈接

超鏈接章節(jié)主要掌握錨點(diǎn)、外部鏈接、郵件鏈接、腳本鏈接、空鏈接的相關(guān)基本知識(shí)，用于鏈接跳轉(zhuǎn)功能的實(shí)現(xiàn) 第四章 框架

通過(guò)框架頁(yè)示例，學(xué)習(xí)網(wǎng)頁(yè)框架的基礎(chǔ)知識(shí)，掌握框架邊框的設(shè)置、框架邊距的設(shè)置、設(shè)置框架縮放、設(shè)置框架滾動(dòng)條、設(shè)置框架邊框的顏色，對(duì)框架進(jìn)行上下分割窗口、左右分割窗口來(lái)設(shè)計(jì)框架頁(yè)面，設(shè)置浮動(dòng)框架的高度和寬度，設(shè)置浮動(dòng)框架的對(duì)齊方式等。

第五章 表格【上】

表格章節(jié)主要學(xué)習(xí)設(shè)置表格的邊框、表格的背景顏色、表格邊框顏色、設(shè)置表格高度和寬度以及設(shè)置表格背景圖像等。第五章 表格【下】

本章主要掌握表格間距設(shè)置，表格水平對(duì)齊設(shè)置，表格標(biāo)題的設(shè)置，行標(biāo)簽和單元格背景顏色的設(shè)置，掌握表格跨行跨列的設(shè)置以及表格的嵌套，用于今后利用表格進(jìn)行網(wǎng)頁(yè)布局。第六章 列表

本章節(jié)主要學(xué)習(xí)各種列表：有序列表、無(wú)序列表、目錄列表、菜單列表、自定義列表以及嵌套列表等。用于網(wǎng)頁(yè)的排版設(shè)計(jì) 第七章 表單

表單章節(jié)是HTML的重點(diǎn)章節(jié)，將學(xué)習(xí)表單的各種控件知識(shí)：如單行文本域、密碼域、單選按鈕、復(fù)選框、普通按鈕、文本域、圖像域、多行文本域、選擇列表等。第八章 網(wǎng)頁(yè)圖像

本章節(jié)主要學(xué)習(xí)網(wǎng)頁(yè)圖像設(shè)置的相關(guān)知識(shí)，主要有如何加載圖像、如何設(shè)置圖像大小、如何設(shè)置圖像邊框、如何設(shè)置圖像對(duì)齊方式、如何設(shè)置圖像與文本的距離、如何設(shè)置圖像的提示文字、如何設(shè)置圖像超鏈接、如何圖像影像地圖等。第九章 網(wǎng)頁(yè)多媒體

網(wǎng)頁(yè)的多媒體運(yùn)用知識(shí)必不可少，本章節(jié)將學(xué)習(xí)如何設(shè)置文字及圖像的滾動(dòng)效果、如何加入背景音樂(lè)、如何嵌入flash動(dòng)畫(huà)、如何嵌入mp3、如何嵌入mpg視頻等。第十章 CSS基礎(chǔ)

本章節(jié)將學(xué)習(xí)使用CSS進(jìn)行網(wǎng)頁(yè)樣式風(fēng)格的設(shè)計(jì)。要使學(xué)生掌握使用CSS的基本語(yǔ)法，以及在HTML中使用CSS的幾種方法。達(dá)到網(wǎng)頁(yè)美化的目的。

2、課堂及課后練習(xí)

第一章 HTML入門(mén)簡(jiǎn)介 任務(wù)一【文檔標(biāo)記的使用】 任務(wù)二【頭部標(biāo)記】 任務(wù)三【主體標(biāo)簽BODY】 任務(wù)四【標(biāo)題標(biāo)記】 任務(wù)五【控制文字的格式】 任務(wù)六【特定文字標(biāo)記的應(yīng)用】 任務(wù)七【換行符標(biāo)記的應(yīng)用】 第二章 HTML常用標(biāo)簽 任務(wù)一【文字樣式示例】 任務(wù)二【斜體字】

任務(wù)三【設(shè)置文字樣式】 任務(wù)四【下標(biāo)】 任務(wù)五【上標(biāo)】

任務(wù)六【插入字標(biāo)簽】 任務(wù)七【刪除字標(biāo)簽】 任務(wù)八【計(jì)算機(jī)代碼標(biāo)簽】 任務(wù)九【鍵盤(pán)輸入文字標(biāo)簽】 任務(wù)十【計(jì)算機(jī)代碼樣式標(biāo)簽】 第三章 超鏈接

任務(wù)一【HTML鏈接】 任務(wù)二【錨點(diǎn)】 任務(wù)三【外部鏈接】 任務(wù)四【郵件鏈接】 任務(wù)五【腳本鏈接】 任務(wù)六【空鏈接】 第四章 框架

任務(wù)一【框架頁(yè)示例】 任務(wù)二【設(shè)置框架邊框】 任務(wù)三【設(shè)置框架邊距】 任務(wù)四【設(shè)置框架縮放】 任務(wù)五【設(shè)置框架滾動(dòng)條】 任務(wù)六【設(shè)置框架邊框的顏色】 任務(wù)七【上下分割窗口】 任務(wù)八【左右分割窗口】

任務(wù)九【浮動(dòng)框架的高度和寬度】 任務(wù)十【浮動(dòng)框架的對(duì)齊方式】 第五章 表格【上】 任務(wù)一【表格邊框】 任務(wù)二【表格高度】 任務(wù)三【表格背景顏色】 任務(wù)四【表格邊框顏色】 任務(wù)五【表格高度和寬度】 任務(wù)六【表格背景】 第五章 表格【下】 任務(wù)七【表格間距】 任務(wù)八【表格水平對(duì)齊】 任務(wù)九【表格標(biāo)題】 任務(wù)十【行標(biāo)簽】

任務(wù)十一【單元格背景顏色】 任務(wù)十二【跨行跨列】 任務(wù)十三【表格嵌套】 第六章 列表

任務(wù)一【有序列表1】 任務(wù)二【有序列表2】 任務(wù)三【有序列表3】 任務(wù)四【無(wú)序列表】 任務(wù)五【目錄列表】 任務(wù)六【菜單列表】 任務(wù)七【定義列表】 任務(wù)八【嵌套列表】 第七章 表單

任務(wù)一【表單method屬性測(cè)試】 任務(wù)二【單行文本域】 任務(wù)三【密碼域】 任務(wù)四【單選按鈕】 任務(wù)五【復(fù)選框】 任務(wù)六【普通按鈕】 任務(wù)七【文本域】 任務(wù)八【圖像域】 任務(wù)九【多行文本域】 任務(wù)十【選擇列表】 第八章 網(wǎng)頁(yè)圖像 任務(wù)一【加載圖像】 任務(wù)二【設(shè)置圖像大小】 任務(wù)三【設(shè)置圖像邊框】 任務(wù)四【設(shè)置圖像對(duì)齊方式】 任務(wù)五【設(shè)置圖像與文本的距離】 任務(wù)六【設(shè)置圖像的提示文字】 任務(wù)七【設(shè)置圖像超鏈接】 任務(wù)八【圖像影像地圖】 第九章 網(wǎng)頁(yè)多媒體 任務(wù)一【滾動(dòng)效果1】 任務(wù)二【滾動(dòng)效果2】 任務(wù)三【背景音樂(lè)】

任務(wù)四【嵌入flash動(dòng)畫(huà)】 任務(wù)五【嵌入mp3】

任務(wù)六【嵌入mpg視頻】 第十章 CSS基礎(chǔ)

任務(wù)一【使用CSS美化網(wǎng)頁(yè)字體】 任務(wù)二【使用CSS美化網(wǎng)頁(yè)背景】 任務(wù)三【使用CSS讓用戶(hù)自由定制個(gè)性化的頁(yè)面】

3、課程作業(yè)（按知識(shí)點(diǎn)劃分，共計(jì)八個(gè)部分）第一部分、制作第一個(gè)網(wǎng)頁(yè)

第二部分、新聞信息瀏覽頁(yè)面的制作

（一）第三部分、新聞信息瀏覽頁(yè)面的制作

（二）第四部分、網(wǎng)站結(jié)構(gòu)的實(shí)現(xiàn)

（一）第五部分、網(wǎng)站結(jié)構(gòu)的實(shí)現(xiàn)

（二）第六部分、用戶(hù)信息錄入頁(yè)面的實(shí)現(xiàn)

（二）第七部分、網(wǎng)頁(yè)文本的樣式設(shè)置 第八部分、CSS結(jié)構(gòu)、規(guī)則及屬性

四、課程考核

本課程理論考試采用閉卷形式，上機(jī)實(shí)踐與其他課程進(jìn)行組合考試，同時(shí)結(jié)合平時(shí)作業(yè)進(jìn)行課程考核與成績(jī)?cè)u(píng)定?？己嗽u(píng)分以百分制計(jì)，原則上理論、實(shí)踐考試成績(jī)占80%，平時(shí)作業(yè)成績(jī)占20%。

五、教材及參考書(shū)

教材： 《網(wǎng)頁(yè)設(shè)計(jì)》 中國(guó)水利水電出版社 參考書(shū)：《HTML 標(biāo)準(zhǔn)教程》 賈素玲 王強(qiáng) 著 清華大學(xué)出版社

六、教學(xué)設(shè)備及教具要求

由學(xué)院統(tǒng)一安排多媒體教室及機(jī)房，任課教師準(zhǔn)備多媒體課件等教學(xué)相關(guān)資料。

網(wǎng)頁(yè)設(shè)計(jì)教案 篇2

文字作為信息傳達(dá)的主要手段目前也是網(wǎng)頁(yè)設(shè)計(jì)的主體，文字是網(wǎng)頁(yè)中必不可少的元素，也是網(wǎng)頁(yè)中的主要信息描述要素，所以網(wǎng)頁(yè)中文字將占據(jù)相當(dāng)大的面積，文字表現(xiàn)的好與壞將影響到整個(gè)網(wǎng)頁(yè)的質(zhì)量。網(wǎng)頁(yè)文字的主要功能是傳達(dá)各種信息，而要達(dá)到這種傳達(dá)的有效性，必須考慮文字編輯的整體效果，能給人以清晰的視覺(jué)印象，避免頁(yè)面繁雜零亂，減去不必要的裝飾變化，使人易認(rèn)、易懂、易讀。不能為造型而編輯，忘記了文字本身是傳達(dá)內(nèi)容和表達(dá)信息的主題。

網(wǎng)頁(yè)文字編排與設(shè)計(jì)，重要的一點(diǎn)在于要服從信息內(nèi)容的性質(zhì)及特點(diǎn)的要求，其風(fēng)格要與內(nèi)容特性相吻合，而不是相脫離，更不能相互沖突。如政府網(wǎng)頁(yè)其文字具有莊重和規(guī)范的特質(zhì)，字體造型規(guī)整而有序，簡(jiǎn)潔而大方;休閑旅游類(lèi)內(nèi)容網(wǎng)頁(yè)，文字編輯應(yīng)具有歡快輕盈的風(fēng)格，字體生動(dòng)活潑，跳躍明快，有鮮明的節(jié)奏感，給人以生機(jī)盎然的感受;有關(guān)歷史文化教育方面的網(wǎng)頁(yè)，字體編輯可具有一種蒼勁古樸的意蘊(yùn)、端莊典雅的風(fēng)范或優(yōu)美清新的格調(diào);公司網(wǎng)頁(yè)可根據(jù)行業(yè)性質(zhì)、企業(yè)理念或產(chǎn)品特點(diǎn)，追求某種富于活力的字體編排與設(shè)計(jì);個(gè)人主頁(yè)則可結(jié)合個(gè)人的性格特點(diǎn)及追求，別出心裁，給人一種強(qiáng)烈獨(dú)特印象。

在網(wǎng)頁(yè)文字的編排與設(shè)計(jì)中，由于計(jì)算機(jī)給我們提供了大量可供選擇的字體，導(dǎo)致字體的變化趨于多樣化這既為網(wǎng)頁(yè)編輯提供了方便，同時(shí)也對(duì)編排與設(shè)計(jì)的選擇能力提出了考驗(yàn)。雖然可供選擇的字體很多，但在同一網(wǎng)頁(yè)上，使用幾種字體尚需精心編輯和考慮。一般來(lái)講，同一頁(yè)面上使用的字體種類(lèi)最多只能有三四種。由于文本字體的顯示是需要本地硬盤(pán)字體文件的支持的，所以在互聯(lián)網(wǎng)上使用過(guò)多的字體是沒(méi)有意義的。文字在視覺(jué)傳達(dá)中作為頁(yè)面的形象要素之一，除了表意以外，還具有傳達(dá)感情的功能，因而必須具有視覺(jué)上的美感，能給人以美好印象，獲得良好的心理反應(yīng)。

圖片是文字以外最早引入到網(wǎng)絡(luò)中的多媒體對(duì)象。網(wǎng)絡(luò)可以圖文并茂地向用戶(hù)提供信息，成倍地加大了它所提供的信息量。而且圖片的引入也大大美化了網(wǎng)絡(luò)頁(yè)面?？梢哉f(shuō)，要使網(wǎng)頁(yè)在純文本基礎(chǔ)上變得更有趣味，最為簡(jiǎn)捷省力的辦法就是使用圖片。對(duì)于一條信息來(lái)說(shuō)，圖片對(duì)受眾吸引也遠(yuǎn)遠(yuǎn)超過(guò)單純的文字。

圖片的位置、面積、數(shù)量、形式、方向等直接關(guān)系到網(wǎng)頁(yè)的視覺(jué)傳達(dá)。在圖片的選擇和優(yōu)化的同時(shí)，應(yīng)考慮圖片在整體編輯計(jì)劃中的作用，達(dá)到和諧整齊。要達(dá)到這樣的效果，在頁(yè)面圖片的合理選用時(shí)，一要注意統(tǒng)一，二要注意悅目，三要注意突出重點(diǎn)，特別是在處理和相關(guān)文字編排在一起的圖片時(shí)。

網(wǎng)頁(yè)在一定意義上說(shuō)也是一種藝術(shù)品，因?yàn)樗纫笪淖值膬?yōu)美流暢，又要求頁(yè)面的新穎、整潔，使用色彩可以產(chǎn)生強(qiáng)烈的視覺(jué)效果，使頁(yè)面更加生動(dòng)。而且，瀏覽者在洲覽網(wǎng)頁(yè)時(shí)，留下的第一印象就是頁(yè)面的色彩設(shè)計(jì)，它的好壞直接影響閱讀者的觀賞興趣。因此，色彩設(shè)計(jì)在網(wǎng)頁(yè)設(shè)計(jì)中居于十分重要的地位。網(wǎng)頁(yè)的色彩設(shè)計(jì)應(yīng)把握以下幾個(gè)方面。

首先是整個(gè)頁(yè)面的色彩選擇，確定一個(gè)主色調(diào)，可以有利于體現(xiàn)網(wǎng)站主題。我們現(xiàn)在看到的網(wǎng)頁(yè)，一般以淺顏色為背景的居多，如淺灰色、淺黃色、淺藍(lán)色、淺綠色。以淺顏色為底，柔和、素淡，配上深顏色的字，如黑色，讀來(lái)自然、流暢，也有利于突出頁(yè)面的重點(diǎn)，有利于整個(gè)頁(yè)面的配色，更容易為大多數(shù)人認(rèn)可和掌握。其他一些次要內(nèi)容，如背景圖片、線條適宜采用不搶眼的顏色，以免喧賓奪主。只有少量精心選擇的元素，為了突出強(qiáng)調(diào)的需要，才采用明亮的色彩，這些彩色亮點(diǎn)就會(huì)產(chǎn)生強(qiáng)烈的視覺(jué)沖擊，但如果用得太多了，就會(huì)形成一種均勻的噪聲，而達(dá)不到強(qiáng)調(diào)的效果。

其次，在背景的色調(diào)搭配上一定要注意不能有強(qiáng)烈的對(duì)比，特別是同時(shí)使用色彩對(duì)立的顏色。大面積顏色適宜采用低比度，因?yàn)檫^(guò)于豐富的背景色彩會(huì)影響前景圖片和文字的取色，嚴(yán)重時(shí)會(huì)使文字溶于背景中，不易辨識(shí)。所以，背景一般應(yīng)以單純?yōu)橐?。如果需要一定的變化以增加背景的厚度，也?yīng)是在盡量統(tǒng)一的前提下的一種變化。例如在制用標(biāo)題時(shí)，為追求醒目的視覺(jué)效果，可用比較深的顏色，配上對(duì)比鮮明的字體。實(shí)際上背景的作用主要在于統(tǒng)一整個(gè)網(wǎng)頁(yè)的風(fēng)格和情調(diào)，對(duì)視覺(jué)的主體起到一定的襯托和協(xié)調(diào)作用，一方面吸引網(wǎng)民的注意力，另一方面有助于體現(xiàn)網(wǎng)站的主題。

5技術(shù)、設(shè)計(jì)之兩手都

網(wǎng)絡(luò)技術(shù)與設(shè)計(jì)創(chuàng)意的緊密結(jié)合，使網(wǎng)頁(yè)的設(shè)計(jì)由平面設(shè)計(jì)擴(kuò)展到立體設(shè)計(jì)，由純粹的視覺(jué)藝術(shù)擴(kuò)展到空間聽(tīng)覺(jué)藝術(shù)，網(wǎng)頁(yè)效果不再近似于書(shū)籍或報(bào)刊雜志等印刷媒體，而更接近干電影或電視的觀賞效果。技術(shù)發(fā)展促進(jìn)了技術(shù)與設(shè)計(jì)的緊密結(jié)合，把瀏覽者帶入一個(gè)真正現(xiàn)實(shí)中的虛擬世界。

技術(shù)與設(shè)計(jì)的緊密結(jié)合在網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)中體現(xiàn)得尤為突出。

網(wǎng)頁(yè)設(shè)計(jì)教案 篇3

摘要在當(dāng)前高校教育過(guò)程中，多媒體網(wǎng)頁(yè)設(shè)計(jì)課程是十分重要的組成部分，同時(shí)也是網(wǎng)頁(yè)設(shè)計(jì)專(zhuān)業(yè)的必修課程，對(duì)提高學(xué)生網(wǎng)頁(yè)設(shè)計(jì)能力具有十分重要的幫助作用。在現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)課程教學(xué)過(guò)程中，為能夠課程教學(xué)效果得到提高，促進(jìn)學(xué)生網(wǎng)頁(yè)設(shè)計(jì)能力進(jìn)一步發(fā)展，應(yīng)當(dāng)進(jìn)行UI界面設(shè)計(jì)教學(xué)，從而對(duì)學(xué)生設(shè)計(jì)能力進(jìn)行更好培養(yǎng)。本文就多媒體網(wǎng)頁(yè)設(shè)計(jì)課程教學(xué)中的UI界面設(shè)計(jì)教學(xué)進(jìn)行分析。

關(guān)鍵詞網(wǎng)頁(yè)設(shè)計(jì)；UI界面設(shè)計(jì)；教學(xué)分析

隨著現(xiàn)代網(wǎng)絡(luò)技術(shù)不斷發(fā)展，社會(huì)上對(duì)網(wǎng)頁(yè)設(shè)計(jì)人才也有著越來(lái)越大的需求，因此在高校教育過(guò)程中加強(qiáng)網(wǎng)頁(yè)設(shè)計(jì)課程教學(xué)，對(duì)網(wǎng)頁(yè)設(shè)計(jì)專(zhuān)業(yè)人才進(jìn)行培養(yǎng)具有十分重要的作用及意義。就當(dāng)前網(wǎng)頁(yè)設(shè)計(jì)課程教學(xué)實(shí)際情況而言，UI界面設(shè)計(jì)教學(xué)已經(jīng)成為十分重要的一項(xiàng)內(nèi)容，可在很大程度上提高學(xué)生設(shè)計(jì)能力，促進(jìn)網(wǎng)頁(yè)設(shè)計(jì)教學(xué)進(jìn)一步發(fā)展。作為網(wǎng)頁(yè)設(shè)計(jì)課程教師，應(yīng)當(dāng)充分認(rèn)識(shí)UI界面設(shè)計(jì)教學(xué)的重要性，并且要通過(guò)有效方法及策略加強(qiáng)UI界面設(shè)計(jì)教學(xué)，使其得到理想效果。

1網(wǎng)頁(yè)設(shè)計(jì)課程中UI界面設(shè)計(jì)教學(xué)的重要性分析

首先，UI設(shè)計(jì)教學(xué)使網(wǎng)頁(yè)設(shè)計(jì)實(shí)踐中視覺(jué)傳達(dá)設(shè)計(jì)理論的不適性得以有效解決。對(duì)于傳統(tǒng)視覺(jué)設(shè)計(jì)理論而言，其研究對(duì)象主要為靜止媒介中相關(guān)視覺(jué)現(xiàn)象及規(guī)律，其代表主要就是形式、色彩以及圖形與文字等一些基礎(chǔ)理論課程，其視覺(jué)對(duì)象大部分都屬于二維空間，其基礎(chǔ)為視覺(jué)感官刺激，是一種信息傳遞設(shè)計(jì)。相比于傳統(tǒng)視覺(jué)傳達(dá)設(shè)計(jì)而言，網(wǎng)頁(yè)設(shè)計(jì)的承載媒介與其存在本質(zhì)差異，與靜止媒介相比較而言，網(wǎng)絡(luò)媒介在形式上具備光影效果強(qiáng)化，同時(shí)還具備運(yùn)動(dòng)現(xiàn)象參與以及交互行為主導(dǎo)，在網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中以靜止形態(tài)為基礎(chǔ)的版式和視覺(jué)流程原理兩者之間有嚴(yán)重不適情況出現(xiàn)，網(wǎng)頁(yè)設(shè)計(jì)涉及到聽(tīng)覺(jué)、視覺(jué)及觸覺(jué)等多種感覺(jué)渠道，因此在網(wǎng)頁(yè)設(shè)計(jì)實(shí)踐過(guò)程中單獨(dú)利用傳統(tǒng)視覺(jué)設(shè)計(jì)理論很難對(duì)其進(jìn)行指導(dǎo)，而UI設(shè)計(jì)理念的應(yīng)用能夠使這一情況得以很好解決。其次，UI設(shè)計(jì)教學(xué)使網(wǎng)頁(yè)設(shè)計(jì)方法及設(shè)計(jì)效果具有更加明確的驗(yàn)證方式。對(duì)于設(shè)計(jì)類(lèi)課程而言，其核心內(nèi)容就是通過(guò)對(duì)學(xué)生進(jìn)行啟發(fā)，使其對(duì)設(shè)計(jì)進(jìn)行思考及實(shí)踐，這樣才能夠使設(shè)計(jì)教育產(chǎn)生更加實(shí)際的價(jià)值。在UI設(shè)計(jì)理論體系中，其核心目標(biāo)為用戶(hù)，也就是對(duì)用戶(hù)進(jìn)行研究，從而對(duì)設(shè)計(jì)更好服務(wù)于用戶(hù)進(jìn)行研究，在學(xué)生將網(wǎng)站項(xiàng)目作為互聯(lián)網(wǎng)產(chǎn)品實(shí)行設(shè)計(jì)訓(xùn)練情況下，課堂教學(xué)中的各個(gè)方面均將會(huì)更加明確，并且在實(shí)行設(shè)計(jì)實(shí)踐過(guò)程中，也就能夠在情感上對(duì)所選擇設(shè)計(jì)方法合理性更加容易理解。在UI設(shè)計(jì)過(guò)程中提出信息架構(gòu)有關(guān)理論，這一理論使網(wǎng)站信息結(jié)構(gòu)設(shè)計(jì)具有更加可靠方法，并且在設(shè)計(jì)網(wǎng)站導(dǎo)航系統(tǒng)、標(biāo)識(shí)系統(tǒng)以及檢索系統(tǒng)與組織系統(tǒng)過(guò)程中，可使設(shè)計(jì)人員責(zé)任及實(shí)施方法更加明晰。另外，在UI設(shè)計(jì)中引入用戶(hù)測(cè)試，在檢驗(yàn)網(wǎng)頁(yè)設(shè)計(jì)方案使用方面具有更加系統(tǒng)的方法，根據(jù)具有較強(qiáng)代表性的.客戶(hù)對(duì)方案的最終可行性設(shè)計(jì)進(jìn)行測(cè)試，也就是對(duì)其最終目標(biāo)進(jìn)行測(cè)試。第三，UI設(shè)計(jì)教學(xué)能夠使網(wǎng)頁(yè)設(shè)計(jì)課程更好應(yīng)用于網(wǎng)頁(yè)設(shè)計(jì)教學(xué)。對(duì)于UI設(shè)計(jì)理論教學(xué)而言，其對(duì)網(wǎng)頁(yè)技術(shù)課程和網(wǎng)頁(yè)技術(shù)課程兩者之間界定進(jìn)行明確，可使設(shè)計(jì)人員對(duì)設(shè)計(jì)更加專(zhuān)注地進(jìn)行思考及實(shí)踐，而不必對(duì)程序進(jìn)行考慮，同時(shí)隨著當(dāng)前網(wǎng)頁(yè)制作工具逐漸向集成化及人性化發(fā)展，在面對(duì)設(shè)計(jì)對(duì)象中，通過(guò)復(fù)雜功能可使設(shè)計(jì)過(guò)程更加簡(jiǎn)單化。在課堂實(shí)際教學(xué)過(guò)程中，應(yīng)當(dāng)使學(xué)生對(duì)當(dāng)前網(wǎng)頁(yè)制作技術(shù)能夠達(dá)到的效果有所了解，并且要了解一些基礎(chǔ)操作代碼，這在實(shí)際教學(xué)過(guò)程中對(duì)不同層次學(xué)生分配不同任務(wù)十分有利，可使因材施教得以真正實(shí)現(xiàn)，并且對(duì)于課程中的主要任務(wù)，可將其定位于教學(xué)設(shè)計(jì)方法，可對(duì)設(shè)計(jì)任務(wù)的驅(qū)動(dòng)性及設(shè)計(jì)實(shí)踐參與進(jìn)一步強(qiáng)調(diào)，可使學(xué)生了解設(shè)計(jì)并非僅僅為簡(jiǎn)單制作。①②

2當(dāng)前網(wǎng)頁(yè)設(shè)計(jì)課程中UI設(shè)計(jì)教學(xué)現(xiàn)狀分析

就當(dāng)前實(shí)際情況而言，UI設(shè)計(jì)課程仍屬于前沿學(xué)科，由于當(dāng)前UI設(shè)計(jì)專(zhuān)業(yè)就業(yè)形勢(shì)比較良好，很多高校均開(kāi)設(shè)UI設(shè)計(jì)專(zhuān)業(yè)課程，從而使UI設(shè)計(jì)課程教學(xué)得到良好發(fā)展。然而，當(dāng)前我國(guó)UI設(shè)計(jì)產(chǎn)業(yè)仍不夠完善，當(dāng)前很多人對(duì)UI設(shè)計(jì)認(rèn)識(shí)仍處于較淺層次，因而當(dāng)前高校內(nèi)UI設(shè)計(jì)教學(xué)仍缺乏完善系統(tǒng)，其具體體現(xiàn)主要表現(xiàn)在以下方面：第一，UI設(shè)計(jì)課程與網(wǎng)頁(yè)設(shè)計(jì)課程結(jié)合程度比較低。對(duì)于UI設(shè)計(jì)課程而言，其中包含很多網(wǎng)頁(yè)設(shè)計(jì)方面的相關(guān)知識(shí)點(diǎn)，然而很多高校在對(duì)UI設(shè)計(jì)課程進(jìn)行設(shè)計(jì)時(shí)與其它課程之間出現(xiàn)脫節(jié)情況，其所導(dǎo)致結(jié)果就是學(xué)生無(wú)法對(duì)該課程知識(shí)較好地進(jìn)行系統(tǒng)性學(xué)習(xí)。第二，UI設(shè)計(jì)課程設(shè)置缺乏實(shí)踐性。對(duì)于UI設(shè)計(jì)課程而言，其實(shí)踐性比較強(qiáng)，然而當(dāng)前很多院校在實(shí)際教學(xué)過(guò)程中往往存在定位不清楚情況，其所造成結(jié)果及時(shí)學(xué)生未能夠?qū)ο嚓P(guān)專(zhuān)業(yè)知識(shí)進(jìn)行較系統(tǒng)學(xué)習(xí)，導(dǎo)致其在今后社會(huì)就業(yè)過(guò)程中缺乏應(yīng)有技能。第三，教師素質(zhì)比較低。在UI設(shè)計(jì)教學(xué)過(guò)程中，教師素質(zhì)會(huì)對(duì)其產(chǎn)生直接影響，然而在當(dāng)前高校UI設(shè)計(jì)教學(xué)過(guò)程中，很多教師都缺乏專(zhuān)業(yè)素質(zhì)，學(xué)歷比較低，并且實(shí)踐能力比較差，未能夠較好把握課程教學(xué)，導(dǎo)致實(shí)際教學(xué)效果不理想。②③

3網(wǎng)頁(yè)設(shè)計(jì)教學(xué)過(guò)程中UI設(shè)計(jì)教學(xué)的有效策略分析

3.1進(jìn)一步完善課程教學(xué)大綱

在當(dāng)前網(wǎng)頁(yè)設(shè)計(jì)教學(xué)過(guò)程中，UI設(shè)計(jì)課程教學(xué)已經(jīng)成為必須內(nèi)容，其與其它課程之間具有十分密切的聯(lián)系，所以在設(shè)置課程方面應(yīng)當(dāng)對(duì)課程教學(xué)大綱進(jìn)一步進(jìn)行完善。首先，應(yīng)當(dāng)對(duì)當(dāng)前教學(xué)目標(biāo)明確。對(duì)于UI界面設(shè)計(jì)課程教學(xué)目標(biāo)而言，一方面是要求學(xué)生將各種相關(guān)網(wǎng)頁(yè)設(shè)計(jì)實(shí)踐操作方法掌握，并且對(duì)各種網(wǎng)頁(yè)設(shè)計(jì)規(guī)范及標(biāo)準(zhǔn)熟知；另一方面而言，就是要使學(xué)生將網(wǎng)頁(yè)設(shè)計(jì)相關(guān)流程掌握，對(duì)于用戶(hù)設(shè)計(jì)理念應(yīng)當(dāng)準(zhǔn)確領(lǐng)悟，并且應(yīng)當(dāng)對(duì)相關(guān)流程熟知。其次，對(duì)課時(shí)行合理分配。由于UI設(shè)計(jì)課程內(nèi)容具有較強(qiáng)連貫性，該課程開(kāi)始應(yīng)當(dāng)安排在二年級(jí)或者三年級(jí)開(kāi)設(shè)，從而使學(xué)生能夠?qū)⒈匾A(chǔ)知識(shí)掌握，之所以對(duì)課時(shí)進(jìn)行這樣的設(shè)計(jì)，主要目的就是使學(xué)生先對(duì)相關(guān)系統(tǒng)理論知識(shí)進(jìn)行一年時(shí)間學(xué)習(xí)，使其能夠?qū)⑾嚓P(guān)基礎(chǔ)理論知識(shí)掌握，在此基礎(chǔ)上對(duì)該課程進(jìn)行深入進(jìn)一步學(xué)習(xí)。另外，還能夠?yàn)閷W(xué)生今后就業(yè)劃分提供能力進(jìn)行學(xué)習(xí)，可使學(xué)生依據(jù)今后就業(yè)崗位對(duì)相關(guān)學(xué)習(xí)能力進(jìn)行鍛煉。第三，對(duì)設(shè)置課程原則明確。在對(duì)課程進(jìn)行具體設(shè)置過(guò)程中，應(yīng)當(dāng)注意遵循相關(guān)原則，主要包括人性化原則、反饋原則以及靈活性原則，此外還包括安全性原則與易用性原則。

3.2明確培養(yǎng)人才方案

人才培養(yǎng)方案能夠?qū)虒W(xué)活動(dòng)進(jìn)行指導(dǎo)，同時(shí)也是教學(xué)活動(dòng)得以開(kāi)展的依據(jù)，人才培養(yǎng)方案對(duì)具體教學(xué)內(nèi)容及具體課程設(shè)置結(jié)構(gòu)進(jìn)行規(guī)定，在制定人才培養(yǎng)方面為不斷進(jìn)行變化的，人才培養(yǎng)的制定應(yīng)當(dāng)以深入社會(huì)調(diào)研為基礎(chǔ)，同時(shí)應(yīng)當(dāng)與學(xué)生實(shí)際特點(diǎn)相結(jié)合。通過(guò)調(diào)查UI設(shè)計(jì)專(zhuān)業(yè)人員實(shí)際就業(yè)情況及社會(huì)對(duì)學(xué)生能力要求，其結(jié)果顯示當(dāng)前學(xué)生就業(yè)能力，尤其學(xué)生實(shí)踐能力仍有一定缺陷。因此，在當(dāng)前實(shí)際教學(xué)過(guò)程中應(yīng)當(dāng)對(duì)人才培養(yǎng)方案進(jìn)行積極探討，從而將明確人才培養(yǎng)方案制定出來(lái)，以便能夠?qū)θ瞬排囵B(yǎng)方向進(jìn)行合理定位。對(duì)于UI設(shè)計(jì)課程而言，其是以地區(qū)產(chǎn)業(yè)升級(jí)需求為基礎(chǔ)，為社會(huì)培養(yǎng)實(shí)用型高素質(zhì)人才的一門(mén)課程，所以其課程定位應(yīng)當(dāng)為確定一體化項(xiàng)目課程。所以，通過(guò)進(jìn)行課程學(xué)習(xí)，所培養(yǎng)的學(xué)生應(yīng)當(dāng)具備的技能主要包括以下方面：其一，應(yīng)當(dāng)具備牢固理論基礎(chǔ)。對(duì)于UI界面設(shè)計(jì)而言，其理論性比較強(qiáng)，若缺乏牢固理論基礎(chǔ)，則在今后結(jié)業(yè)過(guò)程中學(xué)生也就無(wú)法對(duì)相關(guān)知識(shí)點(diǎn)進(jìn)行熟練運(yùn)用，所以學(xué)生對(duì)該課程進(jìn)行學(xué)習(xí)的前提就是應(yīng)當(dāng)將相關(guān)理論知識(shí)掌握。其二，應(yīng)當(dāng)具備較強(qiáng)的實(shí)踐操作能力。學(xué)生在畢業(yè)之后都是要直接進(jìn)入就業(yè)崗位的，所以學(xué)生必須要具備較強(qiáng)就業(yè)實(shí)踐能力。其三，應(yīng)當(dāng)具備較高綜合素質(zhì)。隨著當(dāng)前社會(huì)就業(yè)壓力越來(lái)越大，人才競(jìng)爭(zhēng)也越來(lái)越激烈，學(xué)生為能夠使自身競(jìng)爭(zhēng)力得以有效提高，必須要具備良好人文素質(zhì)及職業(yè)道德，同時(shí)還應(yīng)當(dāng)具備較高的思想政治素質(zhì)。

3.3積極創(chuàng)新課堂教學(xué)手段

首先，應(yīng)當(dāng)積極豐富課堂教學(xué)方法，進(jìn)一步激發(fā)學(xué)生學(xué)習(xí)熱情。傳統(tǒng)灌輸式教學(xué)模式會(huì)對(duì)學(xué)生學(xué)習(xí)熱情及創(chuàng)新思維產(chǎn)生抑制，所以，教師應(yīng)當(dāng)改變傳統(tǒng)單一教學(xué)方法。在實(shí)際教學(xué)過(guò)程中，教師可選擇多種方法相結(jié)合的教學(xué)方式，可使學(xué)生通過(guò)課堂融入社會(huì)，然后再回歸課堂，并且可在課堂對(duì)自身所設(shè)計(jì)優(yōu)秀作品進(jìn)行展示，使學(xué)生在多樣化訓(xùn)練過(guò)程中能夠積極參與。其次，在課堂教學(xué)過(guò)程中可引入設(shè)計(jì)競(jìng)賽，從而使學(xué)生社會(huì)實(shí)踐能力得以增強(qiáng)。在提高學(xué)生實(shí)踐能力方面，設(shè)計(jì)競(jìng)賽屬于十分重要的一種途徑，所以在UI設(shè)計(jì)教學(xué)過(guò)程中可適當(dāng)引入設(shè)計(jì)競(jìng)賽內(nèi)容，從而使理論性及實(shí)踐性實(shí)現(xiàn)有效結(jié)合，進(jìn)而有效提高學(xué)生學(xué)習(xí)積極性。第三，可開(kāi)展作品展示，加強(qiáng)學(xué)生之間學(xué)習(xí)交流。在實(shí)際課堂教學(xué)過(guò)程中，教師可選擇課堂展覽方式，可邀請(qǐng)同一專(zhuān)業(yè)學(xué)生共同進(jìn)行欣賞，使學(xué)生能夠在參觀展覽過(guò)程中加強(qiáng)交流討論，從而使學(xué)生綜合素養(yǎng)能夠得以有效提高，促進(jìn)學(xué)生進(jìn)一步發(fā)展。③④

4結(jié)語(yǔ)

在當(dāng)前多媒體網(wǎng)頁(yè)設(shè)計(jì)實(shí)際教學(xué)過(guò)程中，UI設(shè)計(jì)教學(xué)是十分重要的一項(xiàng)內(nèi)容，對(duì)網(wǎng)頁(yè)設(shè)計(jì)教學(xué)進(jìn)一步發(fā)展具有很大促進(jìn)作用。因此，在實(shí)際教學(xué)過(guò)程中，教師應(yīng)當(dāng)充分認(rèn)識(shí)UI設(shè)計(jì)教學(xué)重要性，并且應(yīng)用了解當(dāng)前教學(xué)現(xiàn)狀，從而通過(guò)進(jìn)一步完善課程教學(xué)大綱，明確培養(yǎng)人才方案，積極創(chuàng)新課堂教學(xué)手段等方式加強(qiáng)UI設(shè)計(jì)教學(xué)，從而使實(shí)際教學(xué)效果得以提升。

注釋

①?gòu)堒?網(wǎng)頁(yè)設(shè)計(jì)課程中關(guān)于UI設(shè)計(jì)教學(xué)的探索體會(huì)[J].湖北美術(shù)學(xué)院學(xué)報(bào),2009(4).

②張延玲,喻蕓.網(wǎng)頁(yè)設(shè)計(jì)課程中融入U(xiǎn)I設(shè)計(jì)理念的教學(xué)探索[J].電腦知識(shí)與技術(shù),2015(34).

③熊科軍,黃琴,李平平.淺議網(wǎng)頁(yè)設(shè)計(jì)課程中UI設(shè)計(jì)教學(xué)的重要性[J].大眾文藝,2015(5).

④陸培培.淺析獨(dú)立學(xué)院UI界面設(shè)計(jì)課程的教學(xué)改革[J].美術(shù)教育研究,2015(19).

網(wǎng)頁(yè)設(shè)計(jì)教案 篇4

《網(wǎng)頁(yè)設(shè)計(jì)B》課程教學(xué)大綱

Web Design B

課程代碼： 課程性質(zhì)：專(zhuān)業(yè)基礎(chǔ)理論課/選修 適用專(zhuān)業(yè)：信息與計(jì)算科學(xué)

開(kāi)課學(xué)期：7 總學(xué)時(shí)數(shù)：32 執(zhí) 筆：劉偉

一、課程的性質(zhì)和目的

網(wǎng)頁(yè)設(shè)計(jì)是針對(duì)學(xué)習(xí)制作網(wǎng)頁(yè)的相關(guān)問(wèn)題，注重網(wǎng)頁(yè)設(shè)計(jì)基本知識(shí)的培養(yǎng)的一門(mén)課程，可作為進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)學(xué)習(xí)的本、專(zhuān)科學(xué)生的入門(mén)基礎(chǔ)課，通過(guò)本課程教學(xué)，使學(xué)生掌握網(wǎng)頁(yè)制作的基礎(chǔ)知識(shí)并應(yīng)用開(kāi)發(fā)設(shè)計(jì)網(wǎng)站；初步學(xué)會(huì)使用Dreamweavr MX、Flash MX等開(kāi)發(fā)工具制作精美的網(wǎng)頁(yè)網(wǎng)站；初步掌握XML語(yǔ)言、腳本語(yǔ)言開(kāi)發(fā)基于WEB的數(shù)據(jù)庫(kù)系統(tǒng)；培養(yǎng)解決實(shí)際問(wèn)題的動(dòng)手能力。

二、課程教學(xué)內(nèi)容及學(xué)時(shí)分配

第一章 HTML（4學(xué)時(shí)）

了解HTML的定義, 理解HTML的基本結(jié)構(gòu)與主要功能；了解HTML的標(biāo)記與基本結(jié)構(gòu)；了解HTML文字格式與頁(yè)面格式；了解超級(jí)鏈結(jié)，列表和表格；了解HTML文件中多媒體與框架的設(shè)置；解表單標(biāo)志的設(shè)置。

主要內(nèi)容：Internet簡(jiǎn)介；Internet的主要功能，WWW簡(jiǎn)介；HTML簡(jiǎn)介；HTML語(yǔ)言、HTML主要功能、HTML的基本結(jié)構(gòu)；HTML文件結(jié)構(gòu)的格式；HTML的基本語(yǔ)法、基本結(jié)構(gòu)、文件結(jié)構(gòu)的格式標(biāo)記。

第二章 網(wǎng)頁(yè)編輯工具（2學(xué)時(shí)）

簡(jiǎn)單了解Frontpage 2000軟件的安裝配置與操作使用；簡(jiǎn)單了解Dreamweaver MX軟件的安裝配置與操作使用；簡(jiǎn)單了解Flash MX軟件的安裝配置與操作使用。

主要內(nèi)容：網(wǎng)頁(yè)編輯工具Frontpage 2000、Dreamweaver MX。第三章 ASP技術(shù)（6學(xué)時(shí)）

了解ASP特點(diǎn)，理解ASP的工作原理，了解ASP的運(yùn)行環(huán)境；了解ASP的程序語(yǔ)法；了解ASP的內(nèi)建對(duì)象；了解ASP的內(nèi)建組件；了解ASP訪問(wèn)數(shù)據(jù)庫(kù)的方法。

主要內(nèi)容：ASP(active server pages)是動(dòng)態(tài)服務(wù)器網(wǎng)頁(yè)，是Ｍircorsoft 公司在1996年底推出的一種運(yùn)行于服務(wù)器端的WEB應(yīng)用程序開(kāi)發(fā)技術(shù)。它既不是一種語(yǔ)

總學(xué)分?jǐn)?shù)：2

編寫(xiě)年月：2002年3月 修訂年月：2007年7月

言也不是一種開(kāi)發(fā)工具，是內(nèi)含于IIS/PWS之中的可以集成SCIPT語(yǔ)言到HTML主頁(yè)的服務(wù)器端的腳本語(yǔ)言環(huán)境。

第四章 JSP技術(shù)（6學(xué)時(shí)）

了解JSP特點(diǎn)，理解JSP的工作原理，了解JSP的運(yùn)行環(huán)境；了解JSP的程序語(yǔ)法；了解JSP的內(nèi)建對(duì)象；了解JSP的內(nèi)建組件；了解JAVABEAN的使用；了解JSP訪問(wèn)數(shù)據(jù)庫(kù)的方法。

主要內(nèi)容：SP是定義于Servlet之上的一個(gè)JAVA標(biāo)準(zhǔn)延伸機(jī)制。JSP將網(wǎng)頁(yè)的HTML部分和多段JAVA程序代碼合并在單一文檔中，即在傳統(tǒng)的HTML網(wǎng)頁(yè)中加入了JAVA程序片段和JSP標(biāo)記。

第五章 XML（3學(xué)時(shí)）

了解XML的歷史與優(yōu)點(diǎn)；了解XML的語(yǔ)法；了解XSL的定義與XML的結(jié)合；了解CSS的定義與XML的結(jié)合。

主要內(nèi)容：XML（extensible markup language 可拓展置標(biāo)語(yǔ)言）繼承了SGML的優(yōu)點(diǎn)，又彌補(bǔ)了HTML的不足，它提供了一個(gè)直接處理WEB數(shù)據(jù)的通用方法，著重描述WEB頁(yè)面的內(nèi)容，而不是顯示格式；CSS與XSL。

第六章 VBSRIPT、JAVASCRIPT（5學(xué)時(shí)）

理解VBSRIPT功能與使用；理解JAVASCRIPT功能與使用；了解JAVASCRIPT中內(nèi)置對(duì)象。

主要內(nèi)容：VBSCRIPT的語(yǔ)法與使用；JAVASCRIPT的語(yǔ)法與使用；JAVASCRIPT中內(nèi)置對(duì)象。

第七章 ACTIVEX技術(shù)（2學(xué)時(shí)）

了解ACTIVEX控件的開(kāi)發(fā)、注冊(cè)與使用。

主要內(nèi)容：ACTIVEX控件的開(kāi)發(fā)；ACTIVEX控件的注冊(cè)；ACTIVEX控件的使用。

第八章 基于WEB的數(shù)據(jù)庫(kù)的開(kāi)發(fā)（4學(xué)時(shí)）

了解基于WEB的數(shù)據(jù)庫(kù)開(kāi)發(fā)的原理；了解基于WEB的數(shù)據(jù)庫(kù)開(kāi)發(fā)的一般步驟；了解基于WEB的數(shù)據(jù)庫(kù)開(kāi)發(fā)的類(lèi)型。

主要內(nèi)容：數(shù)據(jù)庫(kù)在ASP中使用；JSP訪問(wèn)數(shù)據(jù)庫(kù)；ASP、JSP中數(shù)據(jù)庫(kù)的連接技術(shù)。

三、課程教學(xué)的基本要求

1.了解網(wǎng)頁(yè)設(shè)計(jì)的基本概念，熟練使用網(wǎng)頁(yè)設(shè)計(jì)工具快速構(gòu)建網(wǎng)站； 2.能比較熟練地使用ASP、JASP技術(shù)創(chuàng)建動(dòng)態(tài)頁(yè)面； 3.初步掌握基于web的數(shù)據(jù)庫(kù)信息系統(tǒng)技術(shù)的解決方案。

4.重難點(diǎn)：（1）.HTML 重點(diǎn)：HTML標(biāo)記的使用，框架的設(shè)置；表單的使用 難點(diǎn)：文字格式與頁(yè)面格式，列表和表格，表單標(biāo)記。（2）.ASP

重點(diǎn)：ASP的工作原理，ASP的頁(yè)面數(shù)據(jù)的傳遞

難點(diǎn)：內(nèi)建對(duì)象的使用，ASP的語(yǔ)法，ASP訪問(wèn)數(shù)據(jù)庫(kù)的方法；（3）.JSP 重點(diǎn)：JSP的工作原理，JSP的頁(yè)面數(shù)據(jù)的傳遞

難點(diǎn)：內(nèi)建對(duì)象的使用，JSP的語(yǔ)法，JSP訪問(wèn)數(shù)據(jù)庫(kù)的方法；JAVABEAN的使用。

（4）.XML 重點(diǎn)：XML的語(yǔ)法優(yōu)點(diǎn)，如何在CSS與XSL中結(jié)合XML 難點(diǎn)：XSL與CSS定義與使用。（5）.ACTIVEX組件

重點(diǎn)：ACTIVEX組件的注冊(cè)使用 難點(diǎn)：ACTIVEX組件的實(shí)現(xiàn)。（6）.基于WEB的數(shù)據(jù)庫(kù)開(kāi)發(fā)

重點(diǎn)：ASP、JSP中數(shù)據(jù)庫(kù)的連接技術(shù)，開(kāi)發(fā)環(huán)境

難點(diǎn)：中間層的實(shí)現(xiàn)

該課程實(shí)踐性較強(qiáng)，需要學(xué)生多上機(jī)練習(xí)加強(qiáng)理解；針對(duì)所留習(xí)題，可以組織兩到三次討論，以便學(xué)員掌握網(wǎng)站建設(shè)的思想。

總評(píng)成績(jī)：平時(shí)作業(yè)占30%，閉卷考試占70%。

四、本課程與其它課程的聯(lián)系與分工 先修課程：軟件工程，數(shù)據(jù)庫(kù)原理

五、建議教材及教學(xué)參考書(shū)

［1］侯文彬等編，《網(wǎng)頁(yè)設(shè)計(jì)教程》，清華大學(xué)出版社，2003年出版社 ［2］丁愛(ài)萍，《網(wǎng)頁(yè)制作教程》，電子工業(yè)出版社，2001年出版社

［3］魏應(yīng)彬等，《網(wǎng)頁(yè)設(shè)計(jì)與WEB數(shù)據(jù)庫(kù)發(fā)布技術(shù)》，清華大學(xué)出版社，2000年出版社 ［4］張銘澤等，《JavaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)》，機(jī)械工業(yè)出版社，2000年出版社

網(wǎng)頁(yè)設(shè)計(jì)教案 篇5

論文關(guān)鍵詞：網(wǎng)頁(yè)設(shè)計(jì)；互聯(lián)網(wǎng)絡(luò)；信息傳播；平面設(shè)計(jì)教學(xué)

論文摘要：隨著信息時(shí)代的發(fā)展，互聯(lián)網(wǎng)的普及，使互聯(lián)網(wǎng)絡(luò)成為“第四大信息傳播的媒介”。網(wǎng)頁(yè)設(shè)計(jì)以信息傳播為裁體，兩者之間緊密聯(lián)系。作為互聯(lián)網(wǎng)的重要元素之一——網(wǎng)頁(yè)，它的發(fā)展雖然沒(méi)有多長(zhǎng)時(shí)間，但作為一種新的視覺(jué)表現(xiàn)形式，兼容了平面設(shè)計(jì)的特征，并具有迅捷，交互性好、傳播面廣等特點(diǎn)，為互聯(lián)網(wǎng)絡(luò)的信息傳播提供良好的平臺(tái)并且在教學(xué)中不斷探索網(wǎng)頁(yè)的設(shè)計(jì)理念，加上通知。

每一個(gè)時(shí)代都有代表性的發(fā)明作為這個(gè)時(shí)代的象征，像第一次工業(yè)革命，蒸汽機(jī)的發(fā)明，使得那時(shí)成為蒸汽時(shí)代；愛(ài)迪生發(fā)明了電燈從那時(shí)起進(jìn)入了電的時(shí)代，要說(shuō)21世紀(jì)，我想應(yīng)該是網(wǎng)絡(luò)的時(shí)代，自從互聯(lián)網(wǎng)的出現(xiàn)使“地球村”的概念更加貼切，可以說(shuō)網(wǎng)絡(luò)拉近了地球上每一個(gè)角落的人。互聯(lián)網(wǎng)代表著一種嶄新的信息交流方式，它使信息的傳播突破了傳統(tǒng)的政治、經(jīng)濟(jì)、地域及文化的阻隔，使信息傳達(dá)的范圍、速度與效率都產(chǎn)生了質(zhì)的飛躍。互聯(lián)網(wǎng)是由成千上萬(wàn)的網(wǎng)站組成，而每個(gè)網(wǎng)站都是由諸多網(wǎng)頁(yè)構(gòu)成，故網(wǎng)頁(yè)是構(gòu)成互聯(lián)網(wǎng)的基本元素。而網(wǎng)頁(yè)設(shè)計(jì)是伴隨著計(jì)算機(jī)互聯(lián)網(wǎng)絡(luò)的產(chǎn)生而形成的平面設(shè)計(jì)新課題，是網(wǎng)頁(yè)設(shè)計(jì)者以所處時(shí)代所能獲取的技術(shù)和藝術(shù)經(jīng)驗(yàn)為基礎(chǔ)，依照設(shè)計(jì)目的和要求自覺(jué)地對(duì)網(wǎng)頁(yè)的構(gòu)成元素進(jìn)行藝術(shù)規(guī)劃的創(chuàng)造性思維活動(dòng)，必然要成為設(shè)計(jì)藝術(shù)的重要組成部分，并隨著網(wǎng)絡(luò)技術(shù)的發(fā)展而發(fā)展。表面上看，它不過(guò)是關(guān)于網(wǎng)頁(yè)版式編排的技巧與方法，而實(shí)際上，它不僅是一種技能，更是藝術(shù)與技術(shù)的高度統(tǒng)一。設(shè)計(jì)師如何將網(wǎng)絡(luò)與設(shè)計(jì)、技術(shù)與藝術(shù)完美地結(jié)合，是非常值得我們深思和研討的。

1一騎紅塵妃子笑，誰(shuí)人知是荔枝來(lái)之信息傳播

信息元素可以說(shuō)是網(wǎng)絡(luò)最基本的元素，互聯(lián)網(wǎng)自始至終都起著一個(gè)信息傳播的做用，也是由此而產(chǎn)生的。自從人類(lèi)誕生以來(lái)，人類(lèi)社會(huì)至少已經(jīng)經(jīng)歷了四次意義重大的信息傳播革命，每一次信息傳播革命都把人類(lèi)文明推向一個(gè)新的發(fā)展階段。第一次信息傳播革命是語(yǔ)言傳播的誕生。第二次信息傳播革命是文字傳播的誕生。第三次信息傳播革命是印刷傳播的誕生。第四次信息傳播革命是模擬式電子傳播的誕生。

最新的一次信息傳播革命，即正在我們身邊發(fā)生的第五次信息傳播革命，是數(shù)字式電子——網(wǎng)絡(luò)傳播的誕生。網(wǎng)絡(luò)媒體的出現(xiàn)，使得傳播者與受眾之間的傳統(tǒng)的.相互關(guān)系正面臨巨大的變化。人類(lèi)進(jìn)入了真正的信息時(shí)代。

網(wǎng)頁(yè)設(shè)計(jì)以信息傳達(dá)為目的，而傳達(dá)的最終表現(xiàn)界面則永遠(yuǎn)也脫離不了媒體。媒體與網(wǎng)頁(yè)設(shè)計(jì)之間的關(guān)系是互動(dòng)的，媒體既體現(xiàn)了設(shè)計(jì)，又給設(shè)計(jì)帶來(lái)了局限性；設(shè)計(jì)既受制于媒體，又是新媒體產(chǎn)生的動(dòng)力之一。

我們大家所共知的傳媒方式有報(bào)紙、廣播、雜志、電視等等，這些在現(xiàn)代媒體中仍然占主要位置。如果與互聯(lián)系網(wǎng)絡(luò)比較的話，它們這些傳媒方式就顯的相當(dāng)單一。因此它們的先天缺陷也越來(lái)越明顯，所以像這種單一的傳達(dá)方式也使設(shè)計(jì)師受到了一定程度上的限制。人們接受信息的途徑是多方面的。像視覺(jué)、聽(tīng)覺(jué)、觸覺(jué)、嗅覺(jué)、味覺(jué)等一系列感官的綜合使我們更加全面的去了解其他的事物。為了能使信息傳達(dá)的更全面一些，一直在追求完美的設(shè)計(jì)師也在尋找著一個(gè)嶄新的媒體來(lái)表達(dá)完善的設(shè)計(jì)。因此當(dāng)今互聯(lián)網(wǎng)絡(luò)順利的成為新生的、綜合感官的、充滿(mǎn)活力的新媒體，也為設(shè)計(jì)師創(chuàng)造了前所未有的信息傳達(dá)手段與途徑。而且隨著技術(shù)的不斷發(fā)展，它極有可能成為最完善的媒體。這應(yīng)該引起每一個(gè)平面設(shè)計(jì)師的關(guān)注。網(wǎng)絡(luò)的發(fā)展速度和力量是驚人的。

2橫看成嶺側(cè)成峰之視覺(jué)效果

可以說(shuō)網(wǎng)頁(yè)是通過(guò)視覺(jué)元素來(lái)進(jìn)行信息傳達(dá)的，這里說(shuō)的視覺(jué)元素包括文本、背景、按鈕、圖標(biāo)、圖像、表格、顏色、導(dǎo)航工具、背景音樂(lè)、動(dòng)態(tài)影像等。無(wú)論是文字、圖形、動(dòng)畫(huà)，還是視頻，為了使網(wǎng)頁(yè)獲得最大的視覺(jué)傳達(dá)功能，網(wǎng)頁(yè)設(shè)計(jì)者所要考慮的是如何適應(yīng)人們視覺(jué)流向的心理和生理的特點(diǎn)把它們放進(jìn)頁(yè)面這個(gè)“大展示窗口”里。由此確定各種視覺(jué)構(gòu)成元素之間的關(guān)系和秩序。因此，設(shè)計(jì)時(shí)應(yīng)該研究各種視覺(jué)造型元素之間的距離、位置、面積和視覺(jué)流程的問(wèn)題。

網(wǎng)頁(yè)設(shè)計(jì)教案 篇6

（1）理解框架的概念及用途。

（2）掌握框架網(wǎng)頁(yè)的新建、制作、編輯與保存，了解框架的拆分方法。

（3）初步掌握將框架結(jié)構(gòu)與表格布局結(jié)合使用來(lái)制作網(wǎng)頁(yè)。

2、過(guò)程與方法：

（1）通過(guò)對(duì)表格網(wǎng)頁(yè)的分析，體驗(yàn)新知識(shí)（框架結(jié)構(gòu)網(wǎng)頁(yè)）的優(yōu)點(diǎn)，從而促進(jìn)其學(xué)習(xí)新知識(shí)。

（2）理解框架的概念與組成，學(xué)會(huì)分析網(wǎng)站的結(jié)構(gòu)。

3、情感態(tài)度與價(jià)值觀：

（1）通過(guò)以“人與動(dòng)物”為主題的框架結(jié)構(gòu)網(wǎng)頁(yè)制作活動(dòng)，了解更多有關(guān)人與動(dòng)物和諧相處的知識(shí)，通過(guò)故事趣聞，增強(qiáng)學(xué)生關(guān)注動(dòng)物的興趣和意識(shí)。

（2）能夠?qū)⒈砀衽c框架結(jié)構(gòu)網(wǎng)頁(yè)結(jié)合使用，在創(chuàng)作中體驗(yàn)樂(lè)趣。

教學(xué)重、難點(diǎn)：

1、重點(diǎn)：框架的概念、用途， 創(chuàng)建、編輯與保存框架網(wǎng)頁(yè)的方法。

對(duì)比教學(xué)法、探究學(xué)習(xí)法、模仿學(xué)習(xí)法。

教學(xué)準(zhǔn)備：

整理、歸類(lèi)相關(guān)素材，并按要求擺放。

老師展示一組利用表格制作的網(wǎng)頁(yè)，要求學(xué)生仔細(xì)觀察，找出它們的一個(gè)共同特點(diǎn)（學(xué)生答：網(wǎng)頁(yè)上方和左側(cè)內(nèi)容都是相同的，僅右下部分內(nèi)容不一樣），并提問(wèn)如何快捷地制作這種網(wǎng)頁(yè)？（學(xué)生答：使用復(fù)制粘貼快捷地制作）

盡管復(fù)制、粘貼能為我們節(jié)省時(shí)間，但有沒(méi)有更好的方法呢？相同的區(qū)域我們能否只做一遍呢？今天我們要學(xué)習(xí)的內(nèi)容――框架網(wǎng)頁(yè)制作，就能給我們帶來(lái)更多便捷。（讓學(xué)生明確框架網(wǎng)頁(yè)使用的場(chǎng)合）

由以上例子入手，再展示一個(gè)框架網(wǎng)頁(yè)，教師引導(dǎo)學(xué)生理解框架網(wǎng)頁(yè)的概念

教師要求學(xué)生先閱讀教材中的操作步驟，再?lài)L試進(jìn)行探究操作。

任務(wù)1 創(chuàng)建“橫幅和目錄”結(jié)構(gòu)的框架網(wǎng)頁(yè)，新建top和left頁(yè)面，并學(xué)會(huì)保存。

框架結(jié)構(gòu)中的每個(gè)框都是一個(gè)獨(dú)立的選項(xiàng)文件，即網(wǎng)頁(yè)文件，因此當(dāng)框架確定之后，需要為每個(gè)框分別指定其網(wǎng)頁(yè)文件的來(lái)源，可以通過(guò)每個(gè)框中的“新建網(wǎng)頁(yè)”按鈕和“設(shè)置初始網(wǎng)頁(yè)”按鈕進(jìn)行選擇。在top和left頁(yè)面中，單擊“保存”按鈕，隨即開(kāi)始保存。

此處為教學(xué)難點(diǎn)，可先由框架的概念入手，再針對(duì)保存頁(yè)面中的藍(lán)色部分，教師進(jìn)行講解，教會(huì)學(xué)生注意觀察。

學(xué)生要理解框架網(wǎng)頁(yè)的概念，通過(guò)閱讀教材中的內(nèi)容，自學(xué)新建框架網(wǎng)頁(yè)的操作，初步了解“新建網(wǎng)頁(yè)”和“設(shè)置初始網(wǎng)頁(yè)”兩個(gè)按鈕的不同，并認(rèn)真聆聽(tīng)教師的講解，注意觀察，按要求模仿操作。

學(xué)習(xí)能力，課堂教學(xué)難點(diǎn)在教師的講解后模仿操作，有效突破難點(diǎn)。

框架網(wǎng)頁(yè)中相關(guān)頁(yè)面的制作，需要結(jié)合表格來(lái)布局，插入文字、圖片和交互式按鈕。

任務(wù)2 top和left頁(yè)面的制作。

要求：

○1top頁(yè)面內(nèi)插入1行2列的表格，左邊單元格插入logo圖片，右邊單元格插入banner圖片。

○2 left頁(yè)面內(nèi)插入5行1列的表格，在每個(gè)單元格內(nèi)依次插入交互式按鈕（共4個(gè)），交互式按鈕文字為展示介紹的相關(guān)內(nèi)容概括，在第5個(gè)單元格內(nèi)插入一個(gè)郵箱指示的圖片。

○3調(diào)整表格邊框的粗細(xì)。

學(xué)生制作相關(guān)頁(yè)面，同時(shí)也是對(duì)前面所學(xué)內(nèi)容的復(fù)習(xí)和回顧。老師反饋學(xué)生的操作情況，開(kāi)展比一比、評(píng)一評(píng)活動(dòng)，對(duì)表現(xiàn)好的學(xué)生給予表?yè)P(yáng)。

創(chuàng)建好框架網(wǎng)頁(yè)后，可以根據(jù)實(shí)際需要改變框架的屬性。

任務(wù)3 調(diào)整框架的大小、設(shè)置框架的邊框、設(shè)置框架窗口中的滾動(dòng)條等。

學(xué)生自主探究學(xué)習(xí)，可向老師尋求幫助。完成設(shè)置后請(qǐng)同學(xué)示范操作，并說(shuō)明自己設(shè)置的方法和原因。操作基礎(chǔ)扎實(shí)的同學(xué)完成任務(wù)后可進(jìn)行擴(kuò)展學(xué)習(xí)。

老師可以給出一些常見(jiàn)的框架結(jié)構(gòu)應(yīng)用界面，如Web郵箱頁(yè)面等，引導(dǎo)學(xué)生總結(jié)本課內(nèi)容，梳理課堂知識(shí)，并讓學(xué)生分組，推薦一些優(yōu)秀作品進(jìn)行全班展示。

設(shè)計(jì)意圖：開(kāi)拓學(xué)生的視野，使學(xué)生了解框架的應(yīng)用，教會(huì)學(xué)生要善于總結(jié)，要學(xué)會(huì)學(xué)習(xí)的方法。

網(wǎng)頁(yè)設(shè)計(jì)教案 篇7

論文摘要：通過(guò)對(duì)網(wǎng)頁(yè)設(shè)計(jì)中的形式美法則和網(wǎng)頁(yè)中各種構(gòu)成要素進(jìn)行分析，探討網(wǎng)頁(yè)設(shè)計(jì)教學(xué)中網(wǎng)站版面的編排與設(shè)計(jì)。

論文關(guān)鍵詞：網(wǎng)頁(yè)設(shè)計(jì);形式美法則;構(gòu)成要素

如今，互聯(lián)網(wǎng)已經(jīng)融入我們?nèi)粘W(xué)習(xí)生活的各個(gè)環(huán)節(jié)，并在全球范圍內(nèi)飛速發(fā)展。其打破了國(guó)界、地域、文化的限制，使信息傳達(dá)的范圍、速率都產(chǎn)生了質(zhì)的飛躍?；ヂ?lián)網(wǎng)中數(shù)以萬(wàn)計(jì)的網(wǎng)站中，每個(gè)網(wǎng)站都擁有自己不同的網(wǎng)頁(yè)，一個(gè)個(gè)變換的網(wǎng)頁(yè)構(gòu)成我們互相交流的媒介。因此，網(wǎng)站制作過(guò)程中，特別是網(wǎng)頁(yè)頁(yè)面編排設(shè)計(jì)時(shí)，要展示出自己獨(dú)特的設(shè)計(jì)風(fēng)格。如何設(shè)計(jì)出視覺(jué)效果好，色彩搭配和諧，結(jié)構(gòu)合理的網(wǎng)頁(yè)版面是網(wǎng)頁(yè)設(shè)計(jì)中的一個(gè)重要問(wèn)題。

一、網(wǎng)頁(yè)設(shè)計(jì)中的視覺(jué)流程

網(wǎng)站的宣傳內(nèi)容、整體風(fēng)格、設(shè)計(jì)理念都要通過(guò)視覺(jué)感官被瀏覽者所欣賞、接受和感受。設(shè)計(jì)精美的網(wǎng)頁(yè)版面能夠讓瀏覽者增加瀏覽興趣，擁有美好心情，從而增加網(wǎng)站點(diǎn)擊率。反之，網(wǎng)頁(yè)頁(yè)面凌亂不堪會(huì)嚴(yán)重影響瀏覽者觀看閱讀的情緒，離開(kāi)網(wǎng)頁(yè)。網(wǎng)頁(yè)視覺(jué)元素能否引人注目會(huì)直接影響到網(wǎng)站的信息傳達(dá)，若想想通過(guò)網(wǎng)頁(yè)更好地傳達(dá)信息，網(wǎng)頁(yè)視覺(jué)效果良好是其基本條件，讓網(wǎng)絡(luò)真正意義上成為可讀強(qiáng)性、新穎的媒體，為此網(wǎng)頁(yè)設(shè)計(jì)者設(shè)計(jì)網(wǎng)頁(yè)時(shí)，必須適應(yīng)人們閱讀習(xí)慣和滿(mǎn)足人們的審美需求。對(duì)每個(gè)視覺(jué)造型元素之間的距離、位置、面積以及視覺(jué)流程等都要精心設(shè)計(jì)。

人們閱讀文章時(shí)，視覺(jué)總會(huì)有一種先后順序習(xí)慣，有一定的方向，整個(gè)版面的走勢(shì)有一個(gè)主旋律。網(wǎng)頁(yè)設(shè)計(jì)中的主標(biāo)題、重要廣告、更新的重要信息等突出信息通常選擇放于此位置。但視覺(jué)流程與學(xué)習(xí)數(shù)學(xué)公式不同，屬感性范疇，其只要符合人們認(rèn)識(shí)過(guò)程的心理順序和邏輯順序，就可以根據(jù)感受靈活運(yùn)用。網(wǎng)頁(yè)設(shè)計(jì)時(shí)，合理的運(yùn)用網(wǎng)頁(yè)的視覺(jué)流程，能夠引導(dǎo)瀏覽者按照一定的順序閱讀網(wǎng)頁(yè)，組織好整個(gè)網(wǎng)頁(yè)版面的視覺(jué)導(dǎo)向，從而影響到整個(gè)網(wǎng)站的信息傳達(dá)和功能實(shí)現(xiàn)。因此網(wǎng)頁(yè)的編輯設(shè)計(jì)，視覺(jué)導(dǎo)向是一個(gè)重要問(wèn)題，信息傳達(dá)是網(wǎng)頁(yè)設(shè)計(jì)的一種功能性的體現(xiàn)，這種傳達(dá)要符合人們普遍的思維習(xí)慣，做到視覺(jué)流程合理、順暢、自如。好的視覺(jué)流程布置，能使網(wǎng)頁(yè)上的各種信息要素在一定空間內(nèi)合理分布，能使頁(yè)面上各信息要素的位置、間隙、大小保持一定的節(jié)奏感和美感。一個(gè)網(wǎng)站主要說(shuō)明的東西必須通過(guò)網(wǎng)站首頁(yè)醒目位置加以體現(xiàn)和展示，以方便瀏覽者閱讀和理解。

二、網(wǎng)頁(yè)設(shè)計(jì)的審美需求

網(wǎng)頁(yè)設(shè)計(jì)是近些年才發(fā)展起來(lái)的`一門(mén)設(shè)計(jì)類(lèi)學(xué)科，這些年隨著網(wǎng)絡(luò)的發(fā)展，人們?cè)絹?lái)越重視網(wǎng)頁(yè)版面的設(shè)計(jì)和網(wǎng)站風(fēng)格的整體設(shè)計(jì)。網(wǎng)頁(yè)不僅是將各種想要傳達(dá)的要素簡(jiǎn)單的羅列在頁(yè)面上，而是要考慮如何使瀏覽者能更感興趣的和更有效率的接收網(wǎng)頁(yè)上的信息內(nèi)容。這就要求我們從審美的方面入手，設(shè)計(jì)制作出美觀、完整、新穎、合理的頁(yè)面。使瀏覽者觀看閱讀起來(lái)心情愉悅，更好的接受網(wǎng)頁(yè)所傳達(dá)給我們的信息。我們可以把傳統(tǒng)平面設(shè)計(jì)中的形式?jīng)]的法則和現(xiàn)代的網(wǎng)頁(yè)設(shè)計(jì)的具體問(wèn)題相結(jié)合起來(lái)，運(yùn)用一些平面設(shè)計(jì)中美的基本形式到網(wǎng)頁(yè)版面的設(shè)計(jì)中去，增加網(wǎng)頁(yè)設(shè)計(jì)的美感和瀏覽者的視覺(jué)審美需求。

(一)版面的規(guī)范化

頁(yè)面編輯的規(guī)范化要求是網(wǎng)頁(yè)設(shè)計(jì)的重要方面。比如使用Dreamweaver設(shè)計(jì)網(wǎng)頁(yè)時(shí)，是選擇左右型結(jié)構(gòu)、左中右型結(jié)構(gòu)、左右型結(jié)構(gòu)框架，還是用表格系統(tǒng)來(lái)定位網(wǎng)頁(yè)中版面的規(guī)劃。要遵循一定的規(guī)范。在網(wǎng)頁(yè)編排中應(yīng)正確使用文字、標(biāo)點(diǎn)符號(hào)、計(jì)量單位、規(guī)范使用術(shù)語(yǔ)、圖片和Flash動(dòng)畫(huà)等。對(duì)網(wǎng)頁(yè)版面中的文字、圖形、色彩的設(shè)計(jì)，都要遵循形式美的視覺(jué)規(guī)律。網(wǎng)頁(yè)的內(nèi)容與形式的表現(xiàn)必須統(tǒng)一和具有秩序，形式表現(xiàn)必須服從內(nèi)容要求，網(wǎng)頁(yè)上的各種對(duì)象之間要分清主次，突出重點(diǎn)，有一定的整體感。

(二)版面的均衡性

網(wǎng)頁(yè)的版面雖然有限，但在瀏覽者的眼里和平面設(shè)計(jì)要求一樣同樣要有視覺(jué)的均衡性。版面構(gòu)圖的基本元素是點(diǎn)、線、面，其中單個(gè)的字符是點(diǎn)，由字符組成的行是線，由行組成的段落是面。線和面的運(yùn)動(dòng)方向可以歸納為水平、垂直和傾斜三種形式。水平和垂直給人以安靜和固定的感覺(jué)，傾斜則具有運(yùn)動(dòng)感。水平、垂直和傾斜組合起來(lái)使用會(huì)給版面帶來(lái)豐富和生動(dòng)的效果，從而使版面在整體上保持平衡的前提下具有動(dòng)感和變化。

(三)版面的裝飾性

“圖”與“地”的對(duì)比中版面的裝飾性中和重點(diǎn)?？梢允褂每瞻走M(jìn)行裝飾，力求在平面中達(dá)到不平的效果。要注意立體的裝飾效果，比如在文字大小、顏色的處理上要有對(duì)比，圖片的擺放也要有大小、顏色的對(duì)比，包括和背景顏色的對(duì)比，從而使版面在整體上體現(xiàn)出層次感。給瀏覽者以賞心悅目之感。

(四)版面的統(tǒng)一性

網(wǎng)頁(yè)版面設(shè)計(jì)中的統(tǒng)一，就是指在版面的整體感上要達(dá)到一致，風(fēng)格上一致，色彩上統(tǒng)一協(xié)調(diào)，比如文字字體要統(tǒng)一，不能有的嚴(yán)肅，有的活躍，有的時(shí)尚，有的古板，同時(shí)色彩感受上也要達(dá)到風(fēng)格統(tǒng)一。

三、學(xué)會(huì)分析網(wǎng)頁(yè)中各構(gòu)成要素

網(wǎng)頁(yè)設(shè)計(jì)就是通過(guò)各種要素向?yàn)g覽者傳達(dá)信息，以實(shí)現(xiàn)宣傳的目的。其構(gòu)成要素包括文字、圖形、圖像、標(biāo)志、色彩等造型要素及標(biāo)題、信息菜單、信息正文、標(biāo)語(yǔ)、單位名稱(chēng)等內(nèi)容要素，如何在網(wǎng)頁(yè)版面中合理的設(shè)計(jì)安排這些要素是我們要細(xì)心研究的問(wèn)題。

(一)文字的編排與設(shè)計(jì)

文字作為信息傳達(dá)的主要手段是網(wǎng)頁(yè)設(shè)計(jì)的主體，是所有宣傳物中不可缺少的元素，也是網(wǎng)頁(yè)中必不可少的元素，因此網(wǎng)頁(yè)中文字將占據(jù)相當(dāng)大的面積，文字表現(xiàn)的好與壞會(huì)影響到整個(gè)網(wǎng)頁(yè)的質(zhì)量。必須考慮文字編輯的整體效果，給人以清晰的視覺(jué)印象，切記不要使頁(yè)面中的文字看起來(lái)凌亂、繁雜，過(guò)多的裝飾會(huì)讓人不容易辨認(rèn)和理解。不可只為美觀而創(chuàng)意文字，忽略了文字本身的傳達(dá)信息功能。版面設(shè)計(jì)時(shí)要注意文字的大小變化，色彩變化，明暗變化，用這些變化使字體版面活躍，達(dá)到視覺(jué)上的美感，注意變化中的統(tǒng)一，以獲得良好的心理反應(yīng)，達(dá)到完美的文字編排效果。

(二)圖片的編排與設(shè)計(jì)

圖片是網(wǎng)頁(yè)版面中文字以外的又一主要元素，是傳達(dá)信息的有力途徑，圖片的參與可以加大網(wǎng)頁(yè)提供的信息量，而且圖片的引入也大大美化了網(wǎng)絡(luò)頁(yè)面。可以說(shuō)，要使網(wǎng)頁(yè)在純文本基礎(chǔ)上變得更有趣味，最為簡(jiǎn)捷省力的辦法就是使用圖片。對(duì)于一條信息來(lái)說(shuō)，圖片對(duì)瀏覽者的吸引力遠(yuǎn)超單純的文字。圖片的位置、面積、數(shù)量、形式、方向等直接關(guān)系到網(wǎng)頁(yè)的視覺(jué)傳達(dá)。在頁(yè)面圖片的合理選用時(shí)，一要注意統(tǒng)一，二要注意悅目，三要注意突出重點(diǎn)。

(三)色彩的設(shè)計(jì)

色彩是美麗而豐富的，不同的色彩會(huì)給我們帶來(lái)不同的心靈感受，現(xiàn)在一些大的企業(yè)已經(jīng)將色彩融入到公司的整體企業(yè)識(shí)別中，因?yàn)樯誓苁谷水a(chǎn)生聯(lián)想和感情，例如紅色是火的顏色，熱情、奔放，也是血的顏色，代表危險(xiǎn)，綠色是自然、生命的顏色，象征安寧與和平，紫色高貴、神秘，白色代表純潔等等。一個(gè)網(wǎng)站格調(diào)的設(shè)定，往往取決于網(wǎng)站顏色的選擇。色彩是人們?yōu)g覽網(wǎng)頁(yè)的第一印象，它帶給我們不同的感受，它的好壞直接影響瀏覽者的觀賞興趣。因此，色彩設(shè)計(jì)在網(wǎng)頁(yè)設(shè)計(jì)中居于十分重要的地位。網(wǎng)頁(yè)的色彩設(shè)計(jì)具體應(yīng)把握以下兩個(gè)方面：一是是整個(gè)頁(yè)面的色彩選擇，確定一個(gè)有利于體現(xiàn)網(wǎng)站主題的主色調(diào)。網(wǎng)頁(yè)的設(shè)計(jì)一般以淺顏色為背景的居多，如淺灰色、淺黃色、淺藍(lán)色、淺綠色。大型的商業(yè)網(wǎng)站，你會(huì)發(fā)現(xiàn)他們更多運(yùn)用的是白色、藍(lán)色、黃色等，使得網(wǎng)頁(yè)顯得典雅，大方和溫馨。更重要的是，這樣可以大大加快瀏覽者打開(kāi)網(wǎng)頁(yè)的速度。二是在背景的色調(diào)搭配上一定要注意不能有強(qiáng)烈的對(duì)比，大面積顏色適宜采用低比度，因?yàn)檫^(guò)于豐富的背景色彩會(huì)影響前景圖片和文字的取色，嚴(yán)重時(shí)會(huì)使文字溶于背景中，不易辨識(shí)。所以，背景一般應(yīng)以單純?yōu)橐?。如果需要一定的變化以增加背景的厚度，也?yīng)是在盡量統(tǒng)一的前提下的一種變化。

網(wǎng)頁(yè)作為作為一種新生事物，以它特有的方式飛速發(fā)展，它涵蓋了平面設(shè)計(jì)、廣告設(shè)計(jì)、版式設(shè)計(jì)、色彩設(shè)計(jì)等等知識(shí)。網(wǎng)頁(yè)設(shè)計(jì)是一種綜合性的設(shè)計(jì)，它所涉及的范圍非常廣泛。形式美的法則是任何事物所必需具備的基本因素，網(wǎng)頁(yè)信息不僅是為了滿(mǎn)足使用者的需求，更重要的是創(chuàng)造一種視覺(jué)上的愉悅，符合形式美的法則，使瀏覽者在閱讀瀏覽的時(shí)候產(chǎn)生共鳴。未來(lái)的互聯(lián)網(wǎng)究竟會(huì)發(fā)展到什么程度我們不得而知，就讓我們?cè)谶@個(gè)互聯(lián)網(wǎng)的大世界里去不段的探索和追尋吧。

感謝您閱讀“幼兒教師教育網(wǎng)”的《網(wǎng)頁(yè)設(shè)計(jì)教案范例》一文，希望能解決您找不到幼兒園教案時(shí)遇到的問(wèn)題和疑惑，同時(shí)，yjs21.com編輯還為您精選準(zhǔn)備了網(wǎng)頁(yè)設(shè)計(jì)教案專(zhuān)題，希望您能喜歡！