網頁課程設計報告書
網頁設計的本質是為使用者的體驗服務，網頁設計的具體設計實踐活動主要包括互動和視覺兩個部分，互動的重要程度決定了匹配對應的視覺效果。下面是小編整理的網頁課程設計報告書，希望對你有幫助。
網頁課程設計報告書一
網頁設計作為高校設計學專業的專業課程，在教學課程知識體系的不斷探索和完善中，形成了以藝術和技術分別主導的側重不同而又緊密關聯的兩種課程知識體系。隨著網頁設計理論與方法研究的不斷深入和發展，人們對網頁的產品設計的屬性認知越來越明確，對網頁設計的工作分工更細緻也更專業，這種認知進步也應該體現於當前的高校網頁設計課程的知識構建體系中。
一、網頁設計課程知識體系的構建變遷
1.從程式碼知識到網頁製作工具知識的轉變
早期，高校網頁類課程的知識體系構建得益於院校的科研優勢，網際網路的發展直接促成了計算機專業的開設和網頁設計課程的設立。20世紀90年代末，網頁設計課程陸陸續續被列入部分高校設計類專業課程目錄。面向高校學生的網頁設計課程內容是一種全新的事物，即使面向藝術類專業，也由計算機專業相關教師承擔教學任務。各高校、科研院所對網頁製作方法不斷探索，並將成果釋出於各種學術研究出版物，教學方面則直接引用案例教學，教學內容以HTML知識為主。由於面向物件的設計思想在軟體開發中普及，各種不需要使用者直接面對程式碼的網頁製作工具相繼誕生，於是，這方面的知識成為課堂的新內容，大大減輕了學生的記憶負擔。2.網頁製作向網頁美工的轉變網站製作的快速發展、網頁製作技術的傳播，使網站在技術層面進入了同質化階段，市場需求開始轉向頁面視覺效果方面的提升。在網頁設計課程中，由於對網頁設計分工認知不足，早期的網頁設計課程時常將設計和製作的名稱與授課內容混用，沒有嚴格區分，也沒有明確的網頁前端設計與視覺設計分工。高校網頁設計課程的授課內容以網頁製作技術為主，以美化頁面效果為輔。此時，高校對於網頁設計課程的視覺設計方面的專業教學研究處於摸索階段。之後，隨著時代的發展，網頁設計課程教學核心開始轉變為製作具有更佳視覺效果的網頁。3.網頁視覺設計與網頁前端設計的內容分離側重於設計的網頁設計課程知識體系重構從探索、發展到成熟，經歷了較長的準備階段。隨著介面設計方法和流程理論體系的日益完善，分工協作機制日趨成熟，前端設計分離後，網頁設計課程的重心確定為符合網頁製作技術規範和條件的頁面創意表達、視覺效果設計與最佳化。網頁視覺設計的探索從傳統的平面設計方法尋找切入點，透過對網頁設計中的審美需求和各種視覺構成要素（如文字、圖片、顏色等）進行分析，結合人們在瀏覽資訊時的視覺習慣，探索網頁視覺資訊如何被更有效、更合理地表達。網頁設計教學重心內容在轉移到視覺設計之後，該階段還未意識到網頁互動設計的核心地位。
二、使用者模式的網頁之設計認知構建
網頁設計的本質是使用者的體驗設計。網站作為網際網路非可觸形態的產品，對其認知的構建包含產品屬性認知與服務屬性認知兩個層面的內容。1.網頁設計是一種產品設計設計是一門交叉學科，網頁本身也是一種產品。網頁設計最初被視作平面領域的設計，而連結互動是網頁設計有別於平面設計的基本特徵。網頁設計存在互動性，使其具有互動設計可用性與易用性體驗的內在要求，適用於工業產品的基本設計流程。2.網頁設計是一種服務設計服務設計層面，各種網頁互動體驗、視聽資訊、線上內容服務與線下互動等，是網站向用戶提供服務的設計組成部分。作為一種廣義的產品形態，網頁設計與傳統的實物形態的工業產品設計有一定區別，更傾向於體驗的系統化設計。隨著網際網路向物聯網的可用技術研究與拓展，基於智慧化網路的服務設計將成為跨越線上線下的主流設計形態。3.網頁頁面資訊設計是關係網頁設計品質的深度設計網頁設計作為一種資訊量龐大的網際網路單元，從工效學角度來看，網站資訊本身也擔負著面對使用者、有效傳遞資訊的功能和任務，在具體的設計活動中，表現為對資訊的設計。資訊設計具有多學科交叉性、空間多維性、時間流動性等基本特徵，資訊設計的目的是為了提高資訊的可理解度和可閱讀性。優質的網頁資訊設計可以降低使用者獲取資訊的時間和精力成本，提升頁面資訊獲取體驗。
三、基於使用者模型的網頁設計課程的知識體系構建
網頁設計的本質是對體驗的設計，即以使用者為核心思考設計方案，研究使用者在訪問網站時的需求是網頁課程設計任務的基本出發點。課程內容模組應該以回答網頁設計是什麼、怎麼設計、為什麼這樣設計三個問題為主線，構建網頁設計課程的知識體系。1.課程的基本目標掌握網站專案與網頁製作的基本設計流程，培養設計專案管理和組織能力；掌握使用者需求研究分析的基本方法，對使用者體驗和需求研究有較為敏銳的洞察力；掌握網站互動原型相關的設計方法與工具；掌握網頁視覺設計方法和設計規範；瞭解目前網頁前端設計的相關技術和工具。2.知識體系與模組組成（1）設計方法教學內容模組設計方法教學內容模組主要為了解決面對具體問題時設計師怎樣展開分析研究工作並確定設計執行方案。網頁設計方法主要分為專案流程設計與管理、網站策劃方法與規範、使用者體驗研究、互動原型設計方法等，讓學生透過貫穿整個課堂教學的專案流程設計和每個流程的具體設計方法的實踐，掌握基本的設計理論。（2）軟體工具教學內容模組軟體工具教學內容在形式方面包括課堂內的指導和課堂外的自學兩個部分。鑑於設計軟體的頻繁更新和新的設計軟體不斷湧現，教師必須培養學生自學工具的主動意識以適應社會需求。在工具種類方面，包括圖形處理工具、互動原型工具和程式碼工具三類。第一類是圖形處理工具，其中常見的Photoshop、Illustrator等圖形設計軟體，已經在前置課程中基本完成學習。第二類是互動原型製作工具，常見的工具有墨刀、Axure等。第三類是程式碼編輯工具，選擇較多，作為對網頁前端知識的入門介紹部分，在本課程中以介紹為主。（3）設計經驗教學內容模組設計經驗教學以啟發式案例實踐為主，按照網站專案設計的流程需要，設定不同層次、不同要求的設計實踐任務作為課程結課的考核內容。學生透過案例的練習能從優秀作品中學到設計經驗，從具體的案例模仿中獲得設計的成就感。網頁設計課程案例教學同時也是對網頁設計方法的實踐驗證，有助於學生對網頁設計方法的理解和體會。結語任何一種技術變革，都可能讓網頁設計出現新的藝術形態，前端依然是課程必須瞭解的知識。目前，就設計藝術角度而言，網頁設計課程的內容以互動和視覺設計為基礎，在資訊設計層面也有較大的提升空間，設計途徑也已經拓展到使用者的視覺、行為、聲音和邏輯等方面。網頁設計課程的知識體系構建必須以產品的視角，讓學生更深刻、更完整地理解使用者模式下的網頁設計藝術。
網頁課程設計報告書二
隨著現代化科技的發展，計算機已經成為人們生活中的重要組成部分，網頁瀏覽的形式已經代替以往書籍瀏覽的形式，也正因為如此網頁的設計與佈局尤為重要。科學合理的網頁設計佈局不但能夠帶給人們美感，並且還能使人們在瀏覽的過程中內心放鬆。計算機網頁設計的概念主要包括網頁設計佈局的整體造型以及網頁設計佈局頁面的尺寸。頁面設計的整體造型指的就是網頁設計中的佈局形狀，其中最常見的形狀有三角形、圓形等，也有部分計算機網頁設計採用綜合體的形狀，在頁面的選擇上，大多是根據網站自身的特點來選擇的。計算機網頁設計的尺寸也較為多樣化，在計算機使用過程中，常常由於客觀影響造成螢幕的解析度以及尺寸的影響，但由於是客觀因素無法改變，在瀏覽器自帶的功能上，對於瀏覽過程中網頁的增大與減小都能夠藉助瀏覽器工具欄中的相應功能解決。計算機網頁設計中的佈局與計算機的發展有著直接的聯絡，並且影響網站的瀏覽量，目前最為常見的佈局分為同字型佈局、標題正文型佈局、綜合框架型佈局、封面型佈局以及Flash型佈局等五種形式。這五種佈局形式都能夠最大程度的提高網頁的美感，並且在現代網頁佈局中被廣泛運用，以下便是對五種佈局型別的詳細分析。
1.同字型佈局
同字型佈局主要針對網頁佈局的內容，這種佈局其內的填充範圍較廣、填充的數量也較大。在網頁設計佈局中，大多都是在網頁的標題欄進行網站主體的填充，有的是填充廣告，也有少數網頁設計佈局中填充的形式是小標題。在頁面的兩側分別佈置內容，其中網站的資訊與動態或是服務人員以及相應的廣告等，在以往網頁設計佈局中這部分並沒有受到重視，因此也是相對具有價值的'部分。同字型佈局網頁主要都是從中央位置佈置，根據網頁內容的重點由上到下佈局，或是根據網頁自身的特點以及相應的顏色進行佈局，也有部分網頁是根據其中的細節進行佈局的。在網頁的下端並不會進行內容的佈局，就目前網頁來看下端也只是網頁的資訊以及登入方式等。
2.標題正文型佈局
標題正文型佈局與同字型佈局不同的是標題正文型佈局並沒有兩端的佈局，其它佈局型別相似。在頁面上端的佈局中大多都是網頁的標題，其中也有廣告，頁面的中端是網頁的主要內容以及和重點內容，其中中端內容中包含同字型佈局兩端佈局的內容，例如，在正標題下方是對網站的簡訊，之後便是相應的附加諮詢，最為常見的就是天氣資訊以及網站的註冊資訊等，在下方便是網站的主要內容也就是正文，在正文的佈局上，其結構都是簡單明瞭的。
3.綜合框架型佈局
綜合框架型佈局與其它佈局相比形式較為複雜，主要採用框架的形式來進行網頁的佈局，分別在上端、兩端以及下端，網站的主要內容都是在框架中進行佈局的。這種佈局形式與其他佈局形式相比更具有輪廓性，能夠將其它佈局中的內容型別充分地體現出來。
4.封面型佈局
封面型別佈局便是字面上的意思，按照書本頁面的形式進行佈局，在封面型佈局中大多采用的是圖片，其中圖片篇幅較大。一般在不同種類網站的主頁上大多采用封面型佈局，在佈局的周圍相應的分佈著較小以及較為簡單的資訊，此種資訊所採用的形式都是超連結的形式，例如，最為常見的QQ空間，其主頁便採用封面型佈局的形式，採用此種佈局的主要目的就是能夠凸顯網頁自身的特點，能夠吸引使用者的目光的同時，對其功能更加一目瞭然方便操作。
5.Flash型佈局
Flash型佈局與頁面佈局較為相似，Flash型佈局與頁面型佈局唯一不同的便是在頁面的佈局過程中採用更多的Flash，其中包含聲音以及動畫的形式，因此與封面型佈局相比在聲音上更能給人們帶來聽覺上的享受，除了聽覺上的享受外在視覺上Flash型佈局也能夠給人們帶來相應的震撼效果。例如，在現代最為常見的遊戲頁面上，採用的都是Flash型佈局，尤其是在登入的介面或是在進入遊戲過程中的等待介面，在現代科技的發展中，也有少數網頁在主頁佈局的過程中採用Flash型佈局，以此提高網頁的瀏覽量。總而言之，計算機時代已經到來，網頁設計佈局已經成為重要的發展趨勢，網頁設計佈局並沒有固定的格式，做一種形式設計的過程中主要根據個人的審美，因此想要在網頁的設計佈局中增添其美感，首先就要對美有更深刻的瞭解，合理的運用到網頁的佈局中，使人們在網頁的瀏覽中獲取所需資訊的同時還能夠帶來相應的視覺享受。
【網頁課程設計報告書】相關文章：