網頁設計論文范文10篇

目錄：

引言…………………………………………………………………..2

1系統設計目標和使用的主要技術……………………………….4

1．1設計目標………………………………………………………4

1．2主要技術………………………………………………………4

1．2．1模板技術………………………………………………….4

總論

本規范既是一個開發規范，也是一個腳本語言參考，本規范并不是一個一成不變的必須嚴格遵守的條文，特殊情況下要靈活運用，做一定的變通。但是，請大家千萬不要隨意更改規范。如果有任何問題，請及時與我聯系，我會及時更改本規范的相關代碼樣例和文檔。

/基本要求

1.在網站根目錄中開設imagescommontemp三個子目錄，根據需要再開設media子目錄，images目錄中放不同欄目的頁面都要用到的公共圖片，例如公司的標志、banner條、菜單、按鈕等等；common子目錄中放css、js,、php、include等公共文件；temp子目錄放客戶提供的各種文字圖片等等原始資料；media子目錄中放flash,avi,quicktime等多媒體文件。

2.在根目錄中原則上應該按照首頁的欄目結構，給每一個欄目開設一個目錄，根據需要在每一個欄目的目錄中開設一個images和media的子目錄用以放置此欄目專有的圖片和多媒體文件，如果這個欄目的內容特別多，又分出很多下級欄目，可以相應的再開設其他目錄。

3.temp目錄中的文件往往會比較多，建議以時間為名稱開設目錄，將客戶陸續提供的資料歸類整理。

摘要:商業網頁設計中具體的字體、圖形、圖象、標志等等，常常表現為點線面、色彩、動靜、主次等視覺因素，這些因素的不同使用都會影響讀者的視覺習慣和心理變化。本文將分析商業網頁設計視覺因素的心理規律，揭示網頁設計如何通過視覺因素更有效、更合理的表現與傳達信息。

關鍵詞:網頁設計視覺心理因素構成要素視覺流程

商業網站是企業向用戶和網民提供產品和服務的一種方式,是企業開展電子商務的基礎設施和信息平臺，其網頁頁面由具體的文字（標題、廣告語、單位名稱、Email地址等）、企業標志、商標、產品圖形、和信息菜單等內容組成，這些內容又常常表現為點線面、色彩、動靜、主次等視覺因素，這些因素的不同使用都會影響讀者的視覺習慣和心理變化。

本文將試析商業網頁設計視覺因素的心理規律，揭示商業網頁設計如何通過視覺心理因素更有效、更合理的表現與傳達信息。展現企業形象、介紹產品和服務、體現企業發展戰略。

一、商業網頁設計中點、線、面視覺心理因素的運用

點、線、面是商業網頁設計基本的視覺元素，是表現視覺形象的基本設計語言。從視覺角度看網頁設計主要是如何經營好三者的關系，因為不管是任何視覺形象或者版式構成，歸結到底，都可以歸納為點、線和面。

基本要求

1.在網站根目錄中開設imagescommontemp三個子目錄，根據需要再開設media子目錄，images目錄中放不同欄目的頁面都要用到的公共圖片，例如公司的標志、banner條、菜單、按鈕等等；common子目錄中放css、js,、php、include等公共文件；temp子目錄放客戶提供的各種文字圖片等等原始資料；media子目錄中放flash,avi,quicktime等多媒體文件。

2.在根目錄中原則上應該按照首頁的欄目結構，給每一個欄目開設一個目錄，根據需要在每一個欄目的目錄中開設一個images和media的子目錄用以放置此欄目專有的圖片和多媒體文件，如果這個欄目的內容特別多，又分出很多下級欄目，可以相應的再開設其他目錄。

3.temp目錄中的文件往往會比較多，建議以時間為名稱開設目錄，將客戶陸續提供的資料歸類整理。

4.除非有特殊情況，目錄、文件的名稱全部用小寫英文字母、數字、下劃線的組合，其中不得包含漢字、空格和特殊字符；目錄的命名請盡量以英文為指導，不到萬不得已不要以拼音作為目錄名稱，經驗證明，用拼音命名的目錄往往連一個月后的自己都看不懂，

腳本編寫

1注意網頁設計方案要素是否有缺漏

一個網頁要能表達一定的內容和具備一定的功能，就必須具有相應的結構成分。這些結構成分可以稱為“網頁要素”，因為它們是一個完整的網頁不可或缺的。從宏觀上來看，根據視覺流程從上而下的順序，一個網頁的總體框架由頁面頭部、中部內容區和頁面尾部組成?？碱}中給出的這個頁面，已經設有導航條所在的頭部和包含了6個欄目的中部內容區，但是沒有出現尾部。不過，尾部區域主要用于著錄表明網站合法性的行政許可（或備案）文件的文號、版權信息、經營單位的基本信息及其相沈菁上海出版印刷高等?？茖W校，200093，上海3把握網頁設計方案的審核要點關鏈接等，一般是整個網站統一設計、制作好模板后供各個網頁使用的。作為網站下的一個專題頻道，其首頁的尾部只要照用網站已有的現成模板即可，無須再專門設計，所以，頁面設計樣張中一般可以不再列出。這樣，可以說該網頁沒有缺漏宏觀層面的要素。從中觀上來看，頁面頭部應該有表示本頻道主題的頻道名稱、表示本頻道框架構成并方便用戶選擇瀏覽相應內容的導航條；中部的內容區域則應列出本頻道中相對較為重要的欄目，以方便用戶登錄該頻道后就能直接觀看到一些重要信息。以這些要求來衡量，題目中的網頁在中觀上也是基本符合要求的。進行宏觀和中觀審核后，才是從微觀上對網頁各部分進行審核，其順序一般也是從上到下。就網頁頭部來說，頻道名稱應該簡潔明了，直接點明主題，周圍可以加簡單的圖片，也可不加。同時，導航條上應該列出構成本頻道的基本板塊。如果空間允許，導航條上還可盡量再列出板塊下的一些子項名稱，以體現各個頁面的層級關系，使整個網站結構清晰明了；如果空間不足，子項也可不列。

題中的網頁設計圖，在這些方面應該說是達到了一般要求。此外，頻道只是整個網站的組成部分之一，一個網站往往可以設有多個頻道，分別表示不同的內容主題，整個網站的內容特色和最為重要的信息功能，則集中在網站首頁上。用戶瀏覽網站時，網頁按樹形結構一層一層展開，瀏覽得越具體，離開作為“樹根”的網站首頁距離就越遠。這樣，作為一個網站下的專題頻道，就應該設有與網站首頁的鏈接，讓用戶可以通過單擊這個超鏈接直接返回網站首頁。分析題目中的網頁設計圖頭部區域，可知其中缺漏了這個要素。所以，應該在導航條上增添與網站首頁鏈接的文字或圖形。但在考試中，絕大部分考生都忽視了這一疏漏。就網頁中部區域來說，一般各個欄目都應該有相應的名稱，再在其下按具體內容的多少，或直接提供以文字、圖片、動畫、音頻、視頻等形式表現的有關內容，或列出相關內容的標題供用戶進一步展開網頁瀏覽。題中所示網頁設計圖的中部區域，基本上做到了這些，唯獨“頭條圖片”這個欄目，既沒有欄目名稱，也沒有對圖片作詮釋說明的相關說明文字，即圖題。當然，圖片欄目有些特殊性，其所在位置可說已經表明是“頭條”，內容表現形式也已體現出是“圖片”，再專門標上欄目名稱便有蛇足之嫌。然而，圖題是必需的，不可缺漏，否則用戶就不易理解該圖是什么意思，或者產生張冠李戴的誤解；況且，圖片有時可能會因種種原因而不能正常顯示，而有了明確的圖題，用戶可借以知道該處是什么。所以，為了保證信息的傳遞更直接有效，更好地提升用戶的閱讀體驗，應當補上圖題這一網頁要素。在圖題的設置上，如果欄目中只有一幅圖片，圖題可以單獨放在欄目下部；如果欄目包含一組圖片，那就宜把每幅圖的圖題與圖片有機結合在一起，置于其下方，而在欄目下部列出與各幅圖片鏈接的標志。需要說明的是，雖然圖片因能夠美化網頁、吸引用戶注意而在網頁設計中有著重要的作用，但一個頁面上不宜安排過多的圖片，否則會降低打開頁面的速度。同時，圖片必須事先經過優化處理，一般采用gif或者jpg壓縮格式，以減小頁面的數據下載量。

2注意項目安排是否邏輯合理

網站的功能是展示信息供用戶瀏覽。為讓用戶順利地找到其所需要的內容信息，網頁上的各個項目安排就必須遵循一般用戶都準確理解的規則。邏輯體現了人類思維的共同規律。如果網頁的設計在邏輯上合理，用戶就能方便地按照一般邏輯規律使用網頁。這樣，審核網頁設計方案中各個項目的安排是否合乎邏輯，就成為網絡編輯的重要任務。網頁項目的安排要達到邏輯合理，就要根據事物分類的一般邏輯要求，將具有相同屬性內容的項目進行歸納后，共置于某個可以概括這些屬性特點的類別中。審視考題中所給網頁的各個項目可以發現，幾個欄目的屬性具有基本平行的關系，將它們并列置于同一層級是正確的，但是，頁面上出現兩個同名欄目則是相互矛盾的，應該修改。根據欄目內容和題干中的交代，可知應該把中間欄目的名稱改成“積分榜”。此外，導航條上所列各個板塊，其屬性也具有平行關系，可以并列，而板塊與其包含的子選項之間則具有類屬關系，所以將子選項分別置于各板塊內，這也是合理的。但是，進一步分析各個子選項的內容，就能發現有些子選項的類屬劃分在邏輯上是不合理的：“全場回看”不應屬于“新聞”板塊，應置于“視頻”下，而“最新動態”倒是應屬于“新聞”板塊，卻被誤置于“視頻”板塊內；“射手”和“排行”主要提供一些統計數據，而不是與用戶討論，所以應屬于“數據”板塊而非“互動”板塊；相反地，“投注”和“微博”應屬于“互動”板塊而非“數據”板塊。因此，考生應該對這些子選項的分布作出合理的調整。

3注意版式的規范與否

內容摘要：瀏覽者用直接的方式把網頁版面各要素知覺為一個網頁版面格式塔，應用格式塔心理學的組織律可以完善網頁版面式樣。利用格式塔心理學原理，復雜完美的網頁版面格式塔可以從“統一”和“變化”兩個方面來建構，能使讀者獲得審美愉悅。

關鍵詞：格式塔網頁版面審美心理

網頁版面設計要給瀏覽者創造一種氣氛，使瀏覽者在未閱讀之前便可以概括領略整個網頁的風格。當瀏覽者剛打開網頁的時候，首先引起他們注意的是由顏色、形狀、大小各不同的要素組成的一個版面式樣。這樣瀏覽者就會從一個抱著獲取信息的功利態度的求知者轉而成為一個審美期望的審美主體。并在對網頁版面式樣瞬間的知覺中，完成一個完全脫離網頁內容、只“觀照”網頁版面式樣的審美意識活動。

格式塔派創始人韋特墨于1923年在一篇論文中提出了“知覺結構原則”，認為一個人“采用直接而統一的方式把事物知覺為統一的整體，而不是知覺為一群個別的感覺”，“在許多刺激條件下，有盡可能把圖形看成‘完好’圖形的趨向。”這一學派提出了“同形論”，按照苛勒的說法，其含義是：“經驗到的空間秩序在結構上總是和作為基礎的大腦過程分布的機能秩序是同一的?！盵1]美國美學家魯道夫·阿恩海姆的《藝術與視知覺》一書中提到，在用外部事物的形式與主體的情感之間存在著“力”的結構的“同形”關系，來解釋形式的情感意味，這就是說，由于外在世界對象物的物理的力與人的內心世界的心理的力在結構圖式上有“同形同構”或“異質同構”關系。因而，當某種外在事物形式的力的結構圖式傳達到人的大腦時，與大腦電化學力場中某種力的結構圖式相互對應，引起大致相同的電脈沖傳遞，使人的內在情感與外在事物形式合拍一致，于是主體產生審美愉悅，客體成為審美對象。例如，音樂是婉轉下降的旋律，與人在悲傷時大腦力場的力的結構相同，都會給人帶來一種凄切的意味。格式塔的同形論，以內外雙方力的式樣的同形或者異質同構來解釋對象形式的表情性質。藝術就要善于通過物質造成這種結構完形，喚起欣賞者身心結構上的類似反應，不要只以題材內容使瀏覽者單單了解其意義。[2]根據這一理論，我們可以這樣解釋：瀏覽者是采用直接而統一的方式把版面的各個要素知覺為一個統一的整體和完好圖形的，而不是把它知覺為一群個別色彩、形狀、大小、位置和要素。完美的網頁版面樣式的物理的力與讀者的內心世界的心理的力在結構圖式上是同形的，因此，當前者這一力的結構圖式傳送到瀏覽者的大腦時，與瀏覽者大腦電化學力場中某種力的結構圖式相互對應、吻合，引起大致相同的電脈沖傳遞，喚起了瀏覽者身心結構上的類似反應，使瀏覽者的內在情感與完美的網頁版面樣式合拍一致。于是瀏覽者產生了審美愉悅，網頁版面樣式成為審美對象。

網頁版面式樣的審美心理是影響網頁可讀性的一個重要因素，一個版面式樣組織得合理的網頁會使瀏覽者產生愉快的視覺感覺而樂意親近，必然增加網頁的吸引力，誘使瀏覽者去閱讀；一個個面目猙獰的網頁在瀏覽者把目光投向頁面的時候就會產生一種緊張、憋悶的感覺，從而產生排斥心理，影響瀏覽者點擊和閱讀的欲望。從審美心理學上說，主體的審美在表面上雖然是無關功利的，但究其實質，事物的審美價值同其功利性的價值并非毫無關聯的，二者的聯系是間接的，但又是強有力和不可忽略的。

格式塔學派把人們由知覺活動組織成的具有整體性的外部事物的“形”，稱為塔式塔（意為完形）。它又稱為完形心理學?？挤蚩ㄕJ為，我們自然而然觀察到的經驗，都帶有格式塔的特點。[4]他把事物的整體性及形狀完全歸結為神經系統的組織作用，認為這種組織作用與經驗知識毫無關系，完全是先天生成的，每個人都是依照他經驗到有意義的知覺場的。他歸納出一套起組織作用的規律，稱作組織律：圖形與背景（區分度越大，圖形越可突出而成為我們知覺的對象）；接近性和連續性（某些距離較短或互相接近部分，容易組成整體）；完整和閉合傾向（某一部分有閉合的趨向，容易組合成整體）；相似性（相似的部分容易組合成整體，而不相似的部分彼此分離）等。人的神經系統依靠這些組織原則，就可以把對外界事物的知覺組成一個整體。

1課程現狀分析

1.1教學現狀分析

后續課程《網絡信息系統開發與利用》要求學生能讀懂HTML代碼并能修改或編寫，也會影響此課程的學習。早期頁面布局方法一般為表格布局，現在這種技術已經落后被淘汰，取而代之的是DIV+CSS技術，此方法使頁面內容和顯示效果完全分開，頁面元素的布局更加靈活，網站在制作過程中風格的統一、后期網站風格的改變及網站的維護更新將會變得更加方便。

1.2確立課程教學目標“網頁設計與制作”實踐培訓課程主要面向網頁設計人員必備的一些基本技能，使學生能夠具備以下四方面的能力，基于以上表格的內容“，網頁設計與制作”這門課程采取了以“教師為主導地位，學生作為主體”的模式進行教學的，這種模式符合我校的教學和管理模式的要求，讓老師根據學生的特點來指導《網頁設計與制作課程》的探索、分析、研究以及改善學生的實踐操作動手能力。采用任務驅動的教學模式方法，在課堂上以案例為主進行實踐教學環節。在教學過程中可使用網頁模型為例，根據教學內容的安排和要求，教師引導學生并為學生創造環境，讓學生快速發現、探索和解決網頁中的問題，來激發學生的好奇心和欲望，帶動學生興趣，促進學生的創新能力。

2課程教學體系的基本思路

在“網頁設計與制作”課上協調好教學課程，努力使學生變被動學習為主動學習，樹立以學生為中心，師生關系和教學崗位、教師與學生之間，通過師生關系和互動創造了良好的教學氛圍，這是教學改革進程的一個重要組成部分。有效的學生交流機制是建立學生互動的良好基礎。

摘要:通過分析高職學生學習的行為特點，研究使用信息化技術，借助藍墨云班課APP開展教學，并將信息化技術運用到網頁設計與制作課堂教學中，具體說明如何進行課程教學過程的設計。結合實際教學情況，選取項目模塊內容，具體闡述教學過程設計，并選取四個教學班開展教學效果調查，驗證新實踐教學模式的實施效果。

關鍵詞:信息化技術；網頁設計與制作；高職學生；藍墨云班課APP

1引言

網頁設計與制作是一門有著廣泛應用、實用性非常強的課程，面對具體的教學內容，少部分學生比較精通技術與理論知識，大部分學生則“百思不得其解”。針對這個問題，傳統的授課方式已經不能滿足要求。筆者充分運用信息化技術對課程教學模式進行改革，從高職學生的學習特點、信息化技術教學過程設計、教學改革效果等幾個方面，談談信息化技術在教學過程中的運用及效果。

2高職學生的學習特點分析

在信息技術快速發展的今天，90后高職學生更喜歡從事實踐活動，追求未知事物，熱愛冒險，敢于創新[1]。他們還有另一個特點，即從小就受網絡信息產品的影響，移動信息技術的發展變革帶給他們更多選擇娛樂方式的機會，各類網絡游戲、富媒體信息很輕松地擊敗了不少學生的自控力，存在大量“手機不離手一族”。網絡游戲、微信、QQ信息通信和網上購物都是90后學生休閑娛樂的平臺，學生的平時生活和學習方式正在被網絡信息技術改變。課堂上學生的手機管理問題一直是教師進行課堂教育研究的熱點，學生課堂玩手機現象隨處可見，雖然教師針對這個問題采用很多措施，但是學生課堂看手機現象一直存在，采取的措施很難剔除這個現象[1]。筆者在所授網頁設計與制作課程教學中，嘗試用移動網絡和智能手機開展信息化技術教學，借助藍墨云班課APP移動教學平臺，構建“處處能學、時時能學”的教學網絡平臺，為學生提供移動手機上的課程基本信息、任務推送、課前課中測試、教學課件、教學輔助微課、教學視頻等，使學生體驗在娛樂的環境中學習理論知識和實踐技術，學生學習更自由、有趣，教師教學更輕松。

學術期刊投稿網站網頁標記語言正確性之探當前，我國大多數的學術期刊都建立了論文投稿網站系統以方便作者投稿和專家審稿，期刊的編輯也可以應用網站系統對投稿作者的文章進行管理和審核，因此論文投稿網站系統的設計與維護非常重要。據NetMarketShare的數據，截止2015年7月，占據全球瀏覽器排行榜首位的仍然是IE瀏覽器，總市場份額為53.47%，Chrome瀏覽器位居第二位，最新市場份額27.66%，Firefox火狐瀏覽器以12%的市場份額位居第三位。由于各個網頁瀏覽器對網頁標記語言的解釋與執行有一些差異，加上網頁設計語言的多樣化，可能會造成論文投稿作者使用的瀏覽器打不開網站的情況，即會出現網頁設計語言與瀏覽器相互不兼容的情況出現。設計的網頁如果能遵守規范，就能確保網頁架構與語法的正確性，也可以滿足用戶廣泛瀏覽的需求。對論文投稿作者而言，遵守規范的網頁能夠減少投稿的困難度，讓網頁適用于更多的載體（移動端屏幕、電腦瀏覽器等），并減少錯誤信息的傳遞；對論文投稿網站的管理者而言，符合規范的網頁較容易維護，因編輯團隊可能隨著時間的推移不斷替換，對于新進人員而言容易了解及修改。另外，符合規范的網頁也能夠增進網頁在網絡上的可見度，提高搜尋引擎排名[2]，使論文投稿作者更容易在網絡上搜索到該投稿網站。查閱中國知網、萬方數據庫等國內文獻檢索系統，發現目前國內并未有學者進行過相關的研究，查閱WebofScience、EBSCO等外文文獻系統，發現國外學者對網頁標記語言正確性檢測方面的研究也較少，主要的研究有Chen等人[3]（2005）利用網頁檢測工具了解網絡上網頁正確性的比例，并期望找出最常出現的錯誤類型。Chen等人的研究結果顯示，有高達95%的網頁不符合網頁標準，并且不論使用何種網頁樣本搜集方式，前十大錯誤種類幾乎完全一致。Breeding[4]（2006）使用W3C的MarkupValidationService檢測美國研究圖書館協會的123個會員圖書館首頁，進行網頁正確性調查。研究結論顯示，除了21所圖書館完全符合W3C的規范，其余均出現了錯誤，甚至有7所圖書館錯誤數達100個以上，錯誤率高達82%。網頁設計語言作為一種在網絡上被廣泛接受的計算機語言，是由國際萬維網聯盟（WorldWideWebConsortium）所制定并規范化。關于網頁設計語言方面的研究，目前眾多學者進行了多角度的研究探討[5-11]。網頁設計語言不是一般的程序設計語言，而是一種網頁標記語言（MarkupLanguage），最為經典的網頁標記語言HTML被稱為超文本標記語言（HyperTextMarkupLanguage），其主要使用標記標簽（markuptag）來描述網頁。論文投稿網站的管理者可通過不同的檢測工具（validator或checker）檢測網頁是否符合規范，如網頁架構與語法的正確性可通過W3C（WorldWideWebConsortium）的網頁標記語言檢測器（markupvalidator）進行相關檢測。論文投稿網站網頁架構與語法正確性與否會直接影響論文投稿服務的可訪問性與正確性。因此，本研究期望通過W3C網頁標記語言檢測工具的應用，檢測我國論文投稿網站網頁標記語言正確性（webmarkuplanguagevalidation）程度及問題，并試圖提出解決方法，以供論文投稿網站經營管理或建設發展作為參考。

1網頁標記語言正確性檢測

1.1研究工具。目前，網頁檢測工具較多，提供的檢測功能也有所不同，能夠進行各種瀏覽器的兼容性測試、負載測試，以及網頁標記語言檢測等。比較知名的網頁檢測工具有Googlewebpagetester、BrowserShots、IETester、Feedvalidator等。網頁正確性檢測是W3CWebQualityTools中的功能，主要包括：（1）標記檢測（MarkUpValidator），可用于檢測網頁上的各種常用的標記語言的規范性和正確性，如HTML、CSS、XHTML、XML、WML等；（2）Web內容的數據交換規范（FeedValidator），用于檢測Atom或RSSfeed語法的規范性和正確性；（3）層疊樣式表檢測（CSSValidator），用于檢測內嵌在HTML、XHTML中的CSS樣式的規范性和正確性；（4）超鏈接檢測（LinkChecker），用于檢測網頁中超鏈接（Link）和錨點（anchor）的規范性和正確性。本研究主要使用W3C提供的網頁標記語言檢測工具（MarkUpValidator），檢測論文投稿網站上網頁的各種常用的標記語言的規范性和正確性。通過該工具可以檢測出受測網頁的錯誤數（W3C網頁標記規范性）、服務器種類、網頁大小、網頁格式、網頁編碼（GB-2312或其他）、文件類型等，并會列出錯誤之處及建議改進的方式。檢測的方式除了可以直接輸入網址外，也可以上傳該網頁的源代碼進行檢測。圖1為網頁標記語言檢測的主界面，本研究主要采用輸入統一資源定位符（URL）的方式進行網頁檢測。檢測結果分成兩部分；一部分是結果摘要，敘述錯誤數、警告數、編碼（Encoding）及網頁格式（Doctype）是什么版本等，如圖2所示。另一部分則為檢測出的錯誤或警告詳細結果，并列出改正建議如圖3所示。1.2研究樣本。由于我國學術期刊的投稿網站較多，難以對所有的論文投稿網站的所有網頁標記語言的正確性進行檢測，因此本研究需要選擇一定數量的樣本進行檢測工作。參考北京大學圖書館公布的2014版《中文核心期刊要目總覽》，本研究選擇其中列出的出版事業類12種期刊，以及圖書館事業、信息事業類的18種期刊進行研究（總計30種期刊），選擇這些期刊作為研究樣本的原因一方面是這些期刊均屬于中文核心期刊，在網絡上得到的關注度比普通的期刊高[12]，一方面是出版類、圖書情報類的期刊屬于專門研究期刊編輯出版等問題的專業期刊，研究這些學術期刊建立的論文投稿網站網頁標記語言的正確性和規范性具有一定的示范作用。由于選取的30種期刊中有部分期刊沒有建立論文投稿網站系統，部分僅有Email投稿方式，因此在研究中需要將這些期刊忽略，最終所選取的期刊如表1所示，有效樣本為21個，取樣日期為2016年4月5日。由于考慮首頁為論文投稿作者首先打開的界面，其網頁標記語法的正確性將首先影響到用戶的操作，因此本研究將檢測目標鎖定在論文投稿系統網站的首頁（MainPage），在網頁標記語言檢測的主界面中輸入首頁的統一資源定位符（URL）進行檢測，并記錄其檢測結果。

2檢測結果的統計分析

本研究主要基于W3C的網頁標記語言檢測工具，從網頁格式定義種類（Doctype）、網頁錯誤數及網頁錯誤類型進行分析，從中了解學術期刊論文投稿網站在網頁標記語言上的問題，以及提出建設參考意見。在對有效選取的21個期刊論文投稿網站首頁進行檢測的過程中，19個期刊的論文投稿網站能夠正常進行檢測，但有兩個期刊論文投稿網站（大學圖書館學報、現代情報）的首頁無法檢測，其中大學圖書館學報的網站對檢測進行了禁止設置（Forbidden），現代情報網站在檢測中無法找到（NotFound）。2.1網頁格式定義種類及網頁錯誤數。網頁格式如果沒有定義，除了在內容呈現上可能出現錯誤，在數據交換及傳輸時可能也會出現問題，除了會造成數據的流失，有時還會導致錯誤信息的傳遞。對于論文投稿網站的網頁格式定義類型，除了兩個無法檢測的期刊網站之外，其余19個期刊的論文投稿網站均對網頁的格式進行了定義，包括兩種W3C定義標準，HTML4.01Transitional和XHTML1.0Transitional，具體的定義類型可見表2。由表2可以看出，有6個學術期刊的論文投稿網站采用的是XHTML1.0Transitional的格式。相對于HTML4.01Transitional而言，XHTML標記語言，通過結合XML和HTML的功能，使得網頁內容更容易被手持移動設備以及電視媒體等訪問。對于網頁錯誤數，被檢測的19個期刊論文投稿網站首頁的網頁標記語言都出現了錯誤，出現錯誤數最少的是中國科技期刊研究和中國圖書館學報，部分期刊的網頁標記語言錯誤數較多，如出版科學、情報科學、圖書館理論與實踐。2.2網頁錯誤類型。國際萬維網聯盟網頁標記檢測服務（W3CMarkupValidationService）給出定義的錯誤類型總共有447種（詳見validator.w3.org/docs/errors.html#noverbose），本研究檢測的19個期刊論文投稿網站的網頁錯誤類型經過統計有121種錯誤類型，主要的錯誤原因在于標記屬性使用錯誤或者未加定義。期刊論文投稿網站首頁的前幾項錯誤項目分別是Thereisnoattribute“……”（136次）、Documenttypedoesnotallowelement“……”here（104次）、Requiredattribute“……”notspecified（91次）及Element“……”undefined（85次）。屬性定義有誤在信息的顯示上可能不會出現問題，網頁內容能夠正常呈現，但對于數據的交換及傳遞會有一定程度地影響。在統計的121種錯誤類型中，屬于標簽（Html-Tag）的錯誤數最多，說明期刊論文投稿網站的網頁大多數為Html標簽的定義或使用錯誤，因此在撰寫Html語法時應注意標簽的使用正確性。另外，由于網頁制作軟件的可視化和方便性，使得網頁設計人員更容易的設計制作動態化的腳本語言，導致腳本（Script/Script-Tag）出錯的數量也偏高。由于19個期刊論文投稿網站網頁的錯誤類型和數量較多，無法用表格的形式一一列出，圖4為中國圖書館學報的檢測結果，可以看出中國圖書館學報的論文投稿網站的網頁沒有出現標記使用屬性方面的錯誤，僅有兩條格式定義類型的錯誤。

3研究結論及建議

摘要：為了研究用戶的網頁瀏覽習慣及效率。論文借助眼動實驗，并結合問卷調查，將主觀評估和客觀數據相結合，以高校官方網站為例，對用戶瀏覽網頁行為和效率進行研究，獲得用戶眼動數據及對網頁喜好度數據。用戶瀏覽高校網站時第一注視點及最關注的區域在網頁中上方；搜索信息效率越低，用戶喜好度越低；信息放在打開網站的第一屏時，搜索效率最高。從信息內容、用戶服務、網站結構及網頁風格四個方面對高校官方網站設計提出建議。研究結果為高校官方網站網頁設計提供參考依據。

關鍵詞：眼動實驗；網頁設計；高校官網；瀏覽習慣；搜索效率

互聯網的時代，高校官方網站是高校宣傳的重要平臺與載體，網站設計的好壞直接影響用戶使用高校官方網站的積極性，然而對于高校官方網頁設計的研究方法多以問卷調查、專家打分等方式進行，評估具有主觀隨意性。而眼動儀可以實時捕捉用戶的行為習慣，通過被試者的眼動軌跡、熱點圖以及相關數據可對網頁的設計情況進行直觀、準確地分析評價。本文以國內部分知名高校官方網站首頁為研究對象，采用眼動實驗對被試者瀏覽高校官方網頁過程進行研究，并在實驗結束后立即填寫調查問卷，獲取用戶的主觀信息，將主觀評估和客觀數據相結合，對用戶瀏覽高校官方網站的習慣及用戶的視覺搜索因素進行分析探討，使結論更加全面具體，為高校官方網站的網頁設計提供參考依據。

一、眼動實驗與高校官方網站設計

眼睛是人類獲得外界信息的主要途徑，視覺是加工處理信息的重要方式，用戶瀏覽網頁時主要是通過眼睛獲取搜索信息。眼動儀是用來記錄處理眼動數據的設備，是心理學研究的重要儀器，眼動測試是內隱測量方法的一種，其實驗數據可以直接反映用戶行為，近些年被廣泛應用于網站的設計與評估中，用于分析用戶對網站的視覺瀏覽習慣。眼動實驗能夠記錄用戶在瀏覽網頁時眼睛的運動數據，包括總注視時間（TotalFixationTime，TFT）、注視次數（FixationCount，FC）、平均注視時間（AverageFixationTime，AFT）。眼動實驗的主觀性圖表在網頁設計研究中被使用最多的是熱點圖和軌跡圖。近些年，眼動追蹤被廣泛應用于網頁設計研究之中。許鑫等人利用眼動追蹤實驗研究用戶在瀏覽高校圖書館門戶網站主頁時的瀏覽習慣，提出了高校圖書館門戶網站網頁設計時應考慮的重要因素[1]；王詩傲將眼動分析法引入到工業設計服務網站的界面設計評估上，通過眼動指標完善工業設計服務網站評價體系內容[2]；劉瑋琳等人通過眼動實驗探究網頁界面中的分類信息設計對用戶認知效果的影響規律[3]；吳安波等人對某高校教務網站的可用性進行了分析，在一定程度上為教務網站的設計及改進提供參考[4]。由此可見，利用眼動實驗對網頁設計進行研究已經較為成熟，為高校官方網站網頁設計的研究提供了理論基礎。高校官方網站是依托于高等學府，以服務教育、服務科研、服務師生為目的，肩負對內交流、對外宣傳的使命，從事教育資源整合、高校信息、輔助教學管理的綜合性網站[5]。高校官方網站既是學校信息傳播的重要載體，也是校內師生管理系統的重要入口。針對高校官方網站設計研究方面，李嘉瑜以國內“985”高校為研究對象，以美學視角為出發點，對高校官網的版式界面進行了詳細的分析[5]；萬立軍等人通過國內外學者對目前高校網站信息服務質量評價相關研究內容的分析，構建我國高校網站信息服務質量評價指標體系[6]；孔寧通過詢問技術，從用戶的主觀傾向性出發，對高校門戶網站可用性進行了進一步的探索與研究[7]；王傳松應用文獻分析法、用戶訪談和問卷調查法、層次分析法以及模糊綜合評判法等方法，構建了基于用戶體驗的高校網站評價模型[8]。通過對搜索的文獻進行整理發現目前針對高校官方網站網頁設計的研究并不多，眼動實驗在這一研究領域中還有待探索。

二、實驗設計