網(wǎng)頁設(shè)計教案范例

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

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

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

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

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

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

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

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

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

課堂的教學(xué)方法

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

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

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

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

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

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

1、課堂講授

第一章 HTML入門簡介

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

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

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

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

第五章 表格【上】

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

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

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

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

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

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

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

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

第一章 HTML入門簡介 任務(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ī)代碼標(biāo)簽】 任務(wù)九【鍵盤輸入文字標(biāo)簽】 任務(wù)十【計算機(jī)代碼樣式標(biāo)簽】 第三章 超鏈接

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

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

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

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

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

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

任務(wù)四【嵌入flash動畫】 任務(wù)五【嵌入mp3】

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

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

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

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

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

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

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

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

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

四、課程考核

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

五、教材及參考書

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4結(jié)語

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

注釋

①張軍.網(wǎng)頁設(shè)計課程中關(guān)于UI設(shè)計教學(xué)的探索體會[J].湖北美術(shù)學(xué)院學(xué)報,2009(4).

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

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

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

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

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

Web Design B

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

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

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

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

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

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

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

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

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

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

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

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

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

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

編寫年月：2002年3月 修訂年月：2007年7月

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

難點：內(nèi)建對象的使用，JSP的語法，JSP訪問數(shù)據(jù)庫的方法；JAVABEAN的使用。

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

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

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

難點：中間層的實現(xiàn)

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

總評成績：平時作業(yè)占30%，閉卷考試占70%。

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

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

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

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

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

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

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

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

1一騎紅塵妃子笑，誰人知是荔枝來之信息傳播

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

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

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

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

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

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

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

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

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

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

2、過程與方法：

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

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

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

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

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

教學(xué)重、難點：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

要求：

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

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

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

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

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

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

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

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

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

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

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

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

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

一、網(wǎng)頁設(shè)計中的視覺流程

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

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

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

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

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

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

(二)版面的均衡性

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

(三)版面的裝飾性

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

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

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

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

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

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

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

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

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

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

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

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

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