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

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

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

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

一、教學目的和任務

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

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

二、教學方法與教學要求

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

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

課堂的教學方法

教學過程是教師與學生之間信息傳遞及反饋的過程?！拔艺J為教學的藝術不在于傳授本領，而在于激勵、喚醒、鼓舞?！币虼耍趯W習過程中，給學生明確的思路，激勵學生積極主動參與思考，運用任務驅動法、模塊教學法，案例教學法和項目教學法等教學手段，引導他們在解決問題的過程中體驗到學習帶來的成功感和愉悅感，使學習興趣長久地保持下去。

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

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

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

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

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

1、課堂講授

第一章 HTML入門簡介

主要掌握文檔標記的使用，頭部標記title，主體標簽body，標題標記等，了解和掌握HTML文檔的結構。第二章HTML常用標簽

通過學習斜體字標簽、下標標簽、上標標簽、插入字標簽、刪除字標簽、計算機代碼標簽、鍵盤輸入文字標簽、計算機代碼樣式標簽等，用于控制文字樣式。第三章 超鏈接

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

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

第五章 表格【上】

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

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

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

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

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

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

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

2、課堂及課后練習

第一章 HTML入門簡介 任務一【文檔標記的使用】 任務二【頭部標記】 任務三【主體標簽BODY】 任務四【標題標記】 任務五【控制文字的格式】 任務六【特定文字標記的應用】 任務七【換行符標記的應用】 第二章 HTML常用標簽 任務一【文字樣式示例】 任務二【斜體字】

任務三【設置文字樣式】 任務四【下標】 任務五【上標】

任務六【插入字標簽】 任務七【刪除字標簽】 任務八【計算機代碼標簽】 任務九【鍵盤輸入文字標簽】 任務十【計算機代碼樣式標簽】 第三章 超鏈接

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

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

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

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

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

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

任務四【嵌入flash動畫】 任務五【嵌入mp3】

任務六【嵌入mpg視頻】 第十章 CSS基礎

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

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

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

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

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

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

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

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

四、課程考核

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

五、教材及參考書

教材： 《網(wǎng)頁設計》 中國水利水電出版社 參考書：《HTML 標準教程》 賈素玲 王強 著 清華大學出版社

六、教學設備及教具要求

由學院統(tǒng)一安排多媒體教室及機房，任課教師準備多媒體課件等教學相關資料。

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

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

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

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

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

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

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

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

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

5技術、設計之兩手都

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

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

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

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

關鍵詞網(wǎng)頁設計；UI界面設計；教學分析

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

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

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

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

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

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

3.1進一步完善課程教學大綱

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

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

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

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

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

4結語

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

注釋

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

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

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

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

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

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

Web Design B

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

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

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

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

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

第一章 HTML（4學時）

了解HTML的定義, 理解HTML的基本結構與主要功能；了解HTML的標記與基本結構；了解HTML文字格式與頁面格式；了解超級鏈結，列表和表格；了解HTML文件中多媒體與框架的設置；解表單標志的設置。

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

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

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

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

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

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

總學分數(shù)：2

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

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

第四章 JSP技術（6學時）

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

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

第五章 XML（3學時）

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

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

第六章 VBSRIPT、JAVASCRIPT（5學時）

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

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

第七章 ACTIVEX技術（2學時）

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

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

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

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

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

三、課程教學的基本要求

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

4.重難點：（1）.HTML 重點：HTML標記的使用，框架的設置；表單的使用 難點：文字格式與頁面格式，列表和表格，表單標記。（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中結合XML 難點：XSL與CSS定義與使用。（5）.ACTIVEX組件

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

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

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

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

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

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

五、建議教材及教學參考書

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

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

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

論文關鍵詞：網(wǎng)頁設計；互聯(lián)網(wǎng)絡；信息傳播；平面設計教學

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

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

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

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

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

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

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

2橫看成嶺側成峰之視覺效果

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

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

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

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

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

2、過程與方法：

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

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

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

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

（2）能夠將表格與框架結構網(wǎng)頁結合使用，在創(chuàng)作中體驗樂趣。

教學重、難點：

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

對比教學法、探究學習法、模仿學習法。

教學準備：

整理、歸類相關素材，并按要求擺放。

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

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

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

教師要求學生先閱讀教材中的操作步驟，再嘗試進行探究操作。

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

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

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

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

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

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

任務2 top和left頁面的制作。

要求：

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

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

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

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

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

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

學生自主探究學習，可向老師尋求幫助。完成設置后請同學示范操作，并說明自己設置的方法和原因。操作基礎扎實的同學完成任務后可進行擴展學習。

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

設計意圖：開拓學生的視野，使學生了解框架的應用，教會學生要善于總結，要學會學習的方法。

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

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

論文關鍵詞：網(wǎng)頁設計;形式美法則;構成要素

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

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

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

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

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

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

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

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

(二)版面的均衡性

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

(三)版面的裝飾性

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

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

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

三、學會分析網(wǎng)頁中各構成要素

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

(一)文字的編排與設計

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

(二)圖片的編排與設計

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

(三)色彩的設計

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

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

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