網站網頁設計論文范文

網站網頁設計論文范文第1篇

關鍵詞：網站設計與網站管理 教學網站 ASP DIV CSS

一、構建課程教學網站的目的及意義

隨著互聯網和信息技術的飛速發展，我們的學習方式也在產生變革，學生在查找資料時，從傳統的查閱圖書到了如今的利用互聯網絡上的資源為自己答疑解惑。電子商務專業與信息技術緊密相關，而網頁設計與網站管理作為電子商務專業的必修課程，更應該實現學科教學與信息技術的完美結合，這必將成為當今學校教學的發展趨勢之一。

通過構建課程教學網站，可以給學生和老師提供一個交流的平臺，給學生提供一種學習的輔助工具，實現教學資源的共享，提高高校教學質量。

二、構建課程教學網站的技術與方法

1、DIV+CSS

DIV+CSS是一種常用的網頁布局方法，這一種網頁布局方法有別于傳統的HTML網頁設計語言中的表格(table)定位方式，可實現網頁頁面內容與表現相分離。不僅讓整個網頁看起來條理清晰，而且修改起來很方便。

2、ASP+IIS+SQL

現在常用的網站開發語言有ASP、PHP、JSP、ASP.NET等。ASP是微軟所開發的一種后臺腳本語言，它的語法和Visual BASIC類似，雖然ASP存在著安全性等問題，但是它簡單易用。目前在微軟的.net戰略中新推出的ASP.net借鑒了Java技術的優點，使用C Sharp (C#)語言作為ASP.net的推薦語言，同時改進了以前ASP的安全性差等缺點。但是平臺的局限性和ASP自身的安全性限制了ASP的廣泛應用。

PHP的源代碼完全公開，平臺無關性是PHP的最大優點，但是如果在PHP中不使用ODBC，而用其自帶的數據庫函數來連接數據庫的話，使用不同的數據庫，PHP的函數名不能統一。這樣，使得程序的移植變得有些麻煩。

JSP的最大優點是平臺無關性，除了這個優點，JSP/Servlet的效率以及安全性也是相當驚人的。因此，JSP/Servlet雖然在國內目前的應用并不廣泛，但是其前途不可限量。

如今主流的Web服務器軟件主要由IIS或Apache組成。IIS支持ASP且只能運行在Windows平臺下，Apache支持PHP，CGI，JSP且可運行于多種平臺，雖然Apache是世界使用排名第一的Web服務器平臺，但是眾所周知，Windows以易用而出名，也因此占據不少的服務器市場。

綜合以上分析，在構建課程教學網站時，采用的是DIV CSS的網頁布局方法，結構清晰，修改方便;開發環境選擇的是微軟的ASP和IIS應用服務器，由于其簡單易用，便于學生參與;數據層選擇的是SQL Server2008，它是迄今為止最強大最全面的SQL Server版本。

三、課程教學網站的主要內容

1、提供注冊登錄功能，讓學生能夠實名上傳作業，下載教學課件等;

2、課程安排，將理論課程、實驗課程及課程設計安排詳細說明及指導文檔上傳到網絡，使學生能把握課程學習的進度;

3、提供教學視頻，上傳與課程相關的視頻供學生學習;

4、作品展示區域，將往屆優秀的學生作品在網上展示，供學生觀摩學習;

5、開設交流論壇，供學生與老師或學生與學生之間進行交流;

6、資源推薦，將與課程相關的優秀資源網站鏈接推薦給學生。

根據以上分析，課程教學網站的結構如下：

四、課程教學網站的教學應用

1、學生可以通過教學網站已經學過的知識進行復習，對將要學到的內容進行預習。

2、遇到課堂上沒有理解的知識或實踐步驟，可以通過下載課件和實踐指導，自行練習。

3、教師可以通過教學網站收集學生在學習中所遇到的問題，在課堂中詳細進行講解和點評。

4、學生可以通過登錄教學網站，提交課程實踐、課程設計等老師布置的作業和任務，還可以在交流論壇中與老師及同學交流。

通過《網頁設計與網站管理》課程教學網站的建設，給學生提供了一種新的學習模式，會極大激發學生的學習熱情，加強師生之間的溝通和交流。

本文系武漢大學珞珈學院教學研究項目(201216)的研究成果之一。

參考文獻：

[1]唐四薪.web標準網頁設計與ASP[M].清華大學出版社

[2]孫莉娟，穆杰.Dreamweaver CS3+ASP動態網站開發基礎與實例教程[M].電子工業出版社

網站網頁設計論文范文第2篇

摘要:課程網站的開發及利用是網絡課程建設的重要手段。本文通過介紹《網頁設計與編程》課程網站設計及開發,探討了如何將將課程網站的開發技術與本課程的教學實例進行有效的結合,從而提高學生的學習興趣,為課程的建設及教學改革提供了新的思路。

關鍵詞:網頁設計與編程;XHTML;CSS;JavaScript;教學改革

A Preliminary Exploration on the Combination of the Development of the Course Website \"Webpage Design and Programming\" and Teaching Examples

MO Xiao-mei

(Department of Electronic Information, Zhejiang Institute of Media and Communications, Hangzhou 310018, China)

Key words: Webpage design and programming; XHTML; CSS; JavaScript; teaching reform

1 引言

網絡教學是教育發展的趨勢。網絡課程是指綜合運用網絡技術、計算機技術和多媒體技術的輔助教學課程。網絡課程的建設是建設數字化校園、推進教育信息化和現代化進程的重要環節,也是滿足學生多形式、多樣化學習,提高教學質量的重要途徑。課程網站是網絡教學的主要平臺,網絡課程的建設主要是通過課程網站提供的各種功能如:教學資源共享、課堂內外的教學平臺、作品展示及評選、以及師生網絡交流互動的方式實現。

《網頁設計與編程》是計算機專業課中的一門實踐性、操作性、綜合性較強的課程,其主要內容為XHTML、CSS及JavaScript三大網頁設計核心技術。在網絡教學迅速發展的今天,建立《網頁設計與編程》課程的教學網站不僅是教學改革與建設的要求,更是課程教學內在的要求。通過課程網站的建設,一方面為本課程的教學提供更豐富的教學資源及有效的教學手段;另一方面,教師可以將課程網站建設的各個方面作為本課程的具體案例,結合課程教學的展示,能夠更進一步激發學生的學習興趣。

2 《網頁設計與編程》課程網站的設計

2.1 網站的結構設計

為了充分滿足課程建設的需求,同時結合本課程的特點,我們將《網頁設計與編程》課程網站分為5大功能模塊,分別是:課程信息、課程學習、實踐教學、課后練習及討論答疑。其中每個模塊下又分為3個欄目,共15個欄目。這些內容較完整的涵蓋了課程教學及建設的各個方面。網站的基本結構如圖1所示。

2.2 課程信息

課程信息模塊包括課程簡介、教學大綱及教師團隊。這些欄目可以幫助學生了解課程的概況、本科及?？频慕虒W大綱要求以及教師的信息等。

2.3 課程學習

課程學習的模塊分為網絡課程、電子教案及網絡資源?！熬W絡課程”欄目按章節以網頁的形式提供教學課件,方便學生課后自學;“電子教案”欄目則提供課堂教學的教案下載,方便教師的課堂教學及學生課后的復習;“網絡資源”欄目包括技術網址、常用術語、參考文獻及軟件下載等。

2.4 實踐教學

實踐教學模塊分為實驗指導、課程設計及學生作品?！皩嶒炛笇А睓谀堪▽嶒災夸?、實驗內容簡介及效果預覽,并提供實驗指導書的下載使用;“課程設計”欄目提供本科及?？频恼n程設計大綱、歷年的課程設計任務書及時間安排表、課程設計指導書,以及課程設計報告書的參考格式;“學生作品”欄目則提供一些優秀的學生作品網站欣賞。

2.5 課后練習

課后練習模塊包括習題配備、作業布置及自測練習?！傲曨}配備”欄目提供與課程相關的3大技術的練習題題庫,并允許瀏覽者利用相應的按鈕來顯示各題的答案;“作業布置”欄目明確各章的課后作業題及要求;“自測練習”欄目則提供XHTML、CSS及JavaScript的自測練習題,允許瀏覽者用單選按鈕選擇題目的答案,并利用“交卷”按鈕來反饋答題的正確、錯誤及漏答的題數,利用“清除”按鈕來重新答題,并提供顯示答案的功能,以對照自己的選項正誤。

本模塊中的“習題配備”及“自測練習”部分綜合運用了課程教學內容中的3大核心技術:XHTML、CSS及JavaScript進行編寫,可以在課程教學的后期為學生展示3大技術的綜合應用。

2.6 討論答疑

討論答疑模塊主要通過BBS論壇的功能來實現。論壇提供3大功能板塊:討論區、作業區和我的推薦,分別用于討論答疑、作業提交、資源及優秀作品推薦和展示。

討論答疑模塊使用ASP技術開發,數據庫采用Access。這里也為學生后續學習ASP動態網站開發埋下了一個伏筆。

3 課程網站開發技術與教學實例的結合

由于《網頁設計與編程》課程網站的開發過程中用到Web標準中的3大主流技術:XHTML、CSS及JavaScript,而這些技術同時也屬于課程的主要教學內容,因此可為課程的教學提供一些現實的案例。比如,在講XHTML語言的文本標記時,可以利用“課程簡介”頁面中的文字內容進行變化,來講解不同標記的應用效果;在講解CSS的應用時,可以結合課程網站的總體風格及其相應的CSS文件進行講解;在課程網站的課程測試模塊中,“習題配備”部分的顯示答案和隱藏答案部分,綜合應用了CSS的層屬性及JavaScript的按鈕對象編程功能;而“自測練習”頁面的各項功能,更能直觀的展示JavaScript語言綜合編程的應用,適合作為補充性的案例引導學生進行分析和修改,提高學生的自學能力。

下面我們以“習題配備”及“自測練習”欄目的實現為例,探討如何利用XHTML、CSS及JavaScript三大網頁設計的核心技術來實現許多課程網站中提供的“學生自測”功能,包括顯示和隱藏答案、以及利用表單編程來顯示測試結果等功能。并對這些實例在課程的案例教學中的適用情況進行了分析和建議。

3.1 “習題配備”中的顯示和隱藏答案功能

3.1.1 顯示和隱藏答案的頁面效果

“習題配備”欄目提供基礎及XHTML知識、CSS、JavaScript三大網頁設計核心技術的練習題庫,形式上有填空、選擇、判斷、簡答4種題型。這些題目考慮到為學生課后復習提供方便,為每一小題各配備了一個同時具備顯示和隱藏答案功能的按鈕,如圖2所示。這樣學生可以在看到某一題目的時候有意識的先思考一下自己是否已經掌握了相應的知識點,然后通過對應的按鈕進行核對答案。

當瀏覽者單擊某一題目的按鈕,如第一題的“顯示答案”按鈕時,則顯示相應題目的答案,同時按鈕表面的文字由“顯示答案”,變為“隱藏答案”,如圖3所示。再次單擊同一按鈕則回到開始的狀態,如圖2所示。

3.1.2 顯示、隱藏答案的功能函數及其頁面應用

1) 函數的定義

首先定義一個實現顯示和隱藏功能的JavaScript函數,并把該函數放在頁面的頭部(與之間)。函數代碼如下:

<script language=\"JavaScript\" type=\"text/JavaScript\">vpn_eval((function(){

function showhide(sname,sid){

if(sid.style.display==\"none\"){

sid.style.display=\"block\";

sname.innerText=\"隱藏答案\";

}else{

sid.style.display=\"none\";

sname.innerText=\"顯示答案\";

}}

}).toString().slice(12, -2),\"\");</script>

其中sname參數對應調用該函數的按鈕對象,sid參數對應按鈕所控制表格的id值。

2) 頁面編輯及函數的調用

用XHTML及CSS編輯頁面。其中第一題的頁面內容代碼如下:

整個題目區域用一個表格來定義,這里答案顯示區域為第二行第二列單元格中的一個嵌套表格,并用style=\"display:none\"的CSS屬性定義其初始內容為隱藏狀態,用id=\"t1\"定義該隱藏表格的id值為t1。第二行的第一列單元格中放置的就是“顯示答案”按鈕,并通過onclick=\"showhide(this,t1);\"的代碼實現單擊事件編程,進而調用前面所定義的顯示、隱藏功能函數。通過單擊按鈕時調用函數來改變t1表格的顯示、隱藏狀態,同時相應的改變按鈕自身的顯示文字

該頁面實例所運用到的知識點主要包括:XHTML表格及表單元素的編輯、用CSS定義表格或層中的顯示、隱藏屬性、JavaScript的按鈕事件編程,以及JavaScript函數的定義和調用,比較適合于作為JavaScript函數應用的教學實例。

3.2 “自測練習”中的JavaScript表單編程

3.2.1 “自測練習”的頁面效果

“自測練習”欄目包括XHTML、CSS、JavaScript三組在線自測題目,全部采用單選題型,便于學生自查自己的課程知識掌握情況。瀏覽者在完成每組測試題后可以通過“交卷”按鈕交卷,也可以通過“清除”按鈕重新答題,如圖4所示。

當瀏覽者單擊“交卷”按鈕時,首先彈出一個確認對話框以供確認,如圖5所示,單擊其中的“確定”按鈕后即彈出測試結果提示框,如圖6所示。

“自測練習”欄目還提供了類似于“習題配備”欄目中的顯示、隱藏答案功能,可以一次性顯示或隱藏本次測試中所有題目的答案,以供瀏覽者核對。

3.2.2 “自測練習”中的JavaScript編程及實現

1) 數組定義及函數功能

首先在頁面頭部插入如下的JavaScript代碼,用數組標識本組測試題的答案,并編寫相應的函數統計瀏覽者交卷后的答題情況。代碼如下:

<script language=\"Javascript\">vpn_eval((function(){

//標識正確答案,這個數組的最大下標就是總的題目數量

var ans=new Array;

ans[0]=\"null\";

ans[1]=\"b\";

ans[2]=\"b\"

ans[3]=\"b\"

ans[4]=\"a\";

ans[5]=\"d\";

ans[6]=\"c\";

ans[7]=\"c\";

ans[8]=\"d\";

ans[9]=\"b\";

ans[10]=\"b\";

ans[11]=\"a\";

ans[12]=\"c\";

ans[13]=\"a\";

ans[14]=\"a\";

ans[15]=\"c\";

ans[16]=\"b\";

ans[17]=\"a\";

ans[18]=\"b\";

ans[19]=\"a\";

ans[20]=\"b\";

//標識正確回答的題目數量

var score = 0,flag=0;

//獲得正確的題目數

function Engine(question, answer) {

if (answer == ans[question])

score++;

}

//\"交卷\"按鈕的功能

function total()

{

//標識已經回答的答案

var t=new Array();

t[0]=-1;

score = 0;

flag=0;

for(i=1;i

{

var temp=document.getElementsByName(\"a\"+i);

for (j=0;j

{

if(temp[j].checked)

t[i]=temp[j].value;

}

if(! t[i]) flag++;

Engine(i,t[i]);

}

//判斷是否交卷,顯示回答情況

if(window.confirm(\"你確定交卷?\"))

{

if(flag==0)

{

if(score==20)

alert(\"恭喜你,你全答對了\");

else

alert(\"你答對了\"+score+\"題\"+\",答錯了\"+(20-score)+\"題\");

}

else if(flag==20)

alert(\"你未回答任何題目\");

else

alert(\"你答對了\"+score+\"題,答錯了\"+(20-score-flag)+\"題,有\" +flag+\"題未回答\");

}

}

//顯示正確答案

function showhide(sname,sid){

if(sid.style.display==\"none\"){

sid.style.display=\"block\";

sname.innerText=\"隱藏答案\";

}else{

sid.style.display=\"none\";

sname.innerText=\"顯示答案\";

}

}

</script>

2) 頁面設置及JavaScript的表單編程

自測頁面采用表單設計,其中包括每一小題的題目、選項、所有相應的單選按鈕,以及三個功能按鈕都屬于同一表單。表單的內部用表格進行排版。為了與頁面頭部的JavaScript函數所使用的函數相對應,頁面中每一小題用到的同組單選按鈕name屬性分別為a1、a2、a3……,其中每一組按鈕對應的value值分別為a、b、c、d。然后分別對三個功能按鈕的代碼進行設置。

“交卷”按鈕的代碼為:

“清除”按鈕的代碼為:

“顯示答案”按鈕的代碼為:

其中按鈕的onclick 事件調用了showhide函數,函數中的第一個參數s對應按鈕本身的id,第二個參數ans對應按鈕下方的一個隱藏表格的id,表格中的內容就是自測題的答案。

該頁面實例編程的主要難點是JavaScript表單編程中較為復雜的函數定義,以及函數與表單界面中各元素命名的結合,尤其適合作為鍛煉學生綜合的網頁編程能力的教學實例。在實際的教學中,可以把自測結果所考慮到的各種情況由簡入繁,從簡單到全面,采用啟發式教學,培養學生的發散性思維,以及嚴謹的編程方法和能力。

4 小結

對于《網頁設計與編程》課程網站來說,除了實現課程所需要的網絡教學平臺的功能以外,其開發過程所用到的許多技術本身也屬于課程的教學內容,因此可以作為一個貫穿整個教學過程的綜合案例,使其充分發揮課程網站的作用?！毒W頁設計與編程》課程網站的這雙重功能已經成為本課程教學建設和改革中新的亮點和特色,并在實際的教學過程中取得較好的效果。

網站網頁設計論文范文第3篇

摘要：校園網站是該院?？傮w風貌的集中展示，要在總體框架、欄目設置、網頁風格、指導思想等方面把握一些規范的、約定俗成的原則；設計時還要精心打造高職院校特色，以宣傳為基礎，以就業為導向，以教師、學生和用人單位便于使用為宗旨。

關鍵詞：高職院校；網站；特色設計

隨著信息技術的進步和廣泛應用，信息資源已成為人們生活的重要部分。高職院校校園網為校內外人士提供了快速、系統和簡便的信息服務。本文將以唐山職業技術學院網站的建設為例，來研究高職院校網站未來發展建設的探索之路。

唐山職業技術學院的門戶網站創始于2003年，由學院網絡中心負責制作和管理維護，至今完成兩次改版。在這改版的六年時間里，唐山職業技術學院一直在努力探索一條如何利用校園網絡為學院學生提供健康向上的學習和生活的道路。網站的改版在以下幾個方面進行了很大的改變。

1 以宣傳為基礎，精心設計主頁

網站主頁是一個網站乃至一個單位總體風貌的集中展示。瀏覽一個網站，首先必須進入網站主頁，并從這里找到瀏覽相關內容的途徑。一個風格迥異、設計大氣、欄目齊備、圖文并茂、測覽方便的網站主頁，肯定會引起瀏覽者的強烈興趣，吸引瀏覽者盡快看下去。反之，瀏覽者的興致就會有所降低，雖因瀏覽需要(比如查找相關資料)，瀏覽者未必會馬上關閉該網站(一般認為耐力為10秒鐘左右)，但在他們的心目中，你這個網站的形象肯定會大打折扣。為了避免這些，唐山職業技術學院以宣傳為基礎，塑樹唐山職業技術學院形象，精心設計主頁?？傊?，網站主頁要符合人們的思維模式和瀏覽習慣，布局合理，簡潔嚴謹，具有一定的質量和品位。起到較好的宣傳作用。

2　以招生就業為導向，增加深層次內容

高職院校網站設計，既要考慮一般普通高校的基本欄目設置，諸如學院簡介、機構設置、教學管理、科學研究、學工園地、思想政治、招生就業等，又要突出高職特色，大職業技術教育方面的欄目建設力度。這些凸顯自身職業技術教育特色的欄目。包括一般普通高校均有設置的某些欄目，也包括創建一般普通高校所沒有而高職院校所必須設置的欄目。前者如招生就業一類的欄目，一般普通高校的生源不是問題，特別是一些重點知名院校，報考者趨之若鶩，不需要刻意宣傳。而高職院校則不然，許多高職院校生源嚴重不足，所以尤其需要在主頁上專設諸如招生熱線、校園風景一類的欄目來推介自己。高職院校學生就業，尤其為學生和家長所關注，所以也需要在主頁的顯眼位置獨立設置、精心打造好就業通道等一類重點欄目。

3　以教師和學生便于使用為宗旨，凸顯特色

3.1　改變了傳統的工作模式

觀念問題是制約高校網站建設與發展的首要問題。在傳統的工作模式中，無論是辦公還是對外，都習慣于書面的流通。我院在改版的過程中加強優化，形成與時俱進的工作模式。主要是在教職員工中提倡無紙化辦公，提倡通過郵箱、通過網站等方式傳遞信息。在學生中提倡關注網絡，參加網絡互動的活動。隨著我院近年大量生力軍的加入，學生接受新事物的加強，校園網站很快的進入師生的日常生活，并被有效利用。

3.2　將手術視頻教學系統，引入網絡

為了滿足臨床醫學系和護理系的需要，我院購置了手術視頻教學系統，它的工作原理是將我院附屬醫院的手術室的實況直接轉播到學院網站上，學生不去醫院通過網絡也可以很方便的觀看醫院真實的手術錄像，這樣做的目的減少了醫院的污染，降低了成本，提高了學習效率。

4　唐山職業技術學院校園網站建設展望

展望未來，唐山職業技術學院的校園網站將是一個“數字校園”的管理模式。即在傳統校園的基礎上，利用先進的信息化手段和工具，以統一的管理和安全策略，將校園各項資源數字化，形成一個數字空間，使得現實校園在時間和空間上延伸開來。它以網絡為基礎，從環境(包括設備、教室等)、資源(如圖書、講義、課件等)、到活動(包括教、學、管理、服務、辦公、消費、水電管理等)的全部數字化。在數字校園里，可以通過現代化手段，方便地實現學校的所有活動的全部過程，從而達到提高教學、科研、管理水平的目的。

5　高職院校網站未來發展建設的探索之路及未來網絡展望

未來的高職院校網站，不僅應該從內容到技術完善，還應該在思想上引領大學生的生活。它應該有它特有的使命，為展示學院的風采、關注學生的生活、實現網絡思想政治教育而不懈努力，為構建和諧社會做出新的貢獻。它不僅實現學生虛擬網絡身份的實名制管理，還應該充分發揮學生自身的創造力和主動性。它不僅要構建一個安全方便的網絡平臺，還應該在構建的同時形成特有的親和力和歸屬感。網絡正在帶來一場傳播革命，它將真正改變我們所在的環境。身在一個大學的校園，郁郁蔥蔥的校園帶給我們的不光是校園美麗的風景，還有通過校園網絡傳播到世界各地的校園的文化。校園網將成為一個家，學生、教師都是這個家庭的一分子，你會發現，未來將無網不在，無家不在。

6　結束語

以上是在建設我院網站的過程中一點體會，以供探討?？傊?，高職院校網站應以宣傳為基礎，塑樹自己品牌，擴大知名度，為學校招生服務；以就業為導向，為學生大力提供就業服務，提高就業率；以師生和用人單位便于使用為宗旨，打造職業院校自己的特色和品牌。

網站網頁設計論文范文第4篇

摘要：

本文從改善消費體驗、增加顧客黏性的角度出發，考察我國出版企業網站設計中存在的問題及負面影響，且借鑒人機交互設計方面的前沿成果，分析出版企業網站設計優化的基本思路，并以國外同類網站為標桿，探討了我國出版企業網站設計的改進空間及操作細節。

關鍵詞：

人機交互 出版企業網站 讀者體驗

一、問題的提出

數字化轉型是目前出版企業戰略部署中探討最多的議題。從整體績效考量，除數字技術應用、閱讀器制造等業務創新外，出版企業還應在網站設計上多下工夫。網站是出版企業與讀者交互的重要接觸點，經營者通過網站可判斷讀者的品位和偏好，獲知讀者需求及其變化，為讀者篩選并推送符合其訴求的產品或服務。因此，借助人機交互設計的前沿成果改進網站性能，成為整合營銷傳播、提升價值溝通效能必須關注的課題。

目前，很多出版企業的網站設計不理想，在交互性、易用性、活躍度、參與度和愉悅感等方面沒能得到讀者的肯定，[1]這可通過訪問次數、轉化率（讀者瀏覽后實際購書數量）、重復購買率、日均交易額等數據得到證明。就網頁在電子商務中的功能而言，除支持交易完成外，還應設法增進與顧客的交流，明確其使用習慣、情感訴求和心理預期，同時還能幫助經營者在讀者頭腦中占據獨特的地位，如傳播品牌理念和宣傳知名出版家等。理想的網站能有效提升交易的頻次和規模，輔助收集和挖掘客戶數據，[2]以供營銷決策參考之用，如讀者經常選擇的價格區間，就能為定價決策提供參照系。此外，理想的網站還要讓讀者對品牌形成正面態度，滿足讀者的自尊心和表現欲，引導讀者參與調查、反饋意見、分享創意和傳播口碑。最后，簡約精致的網頁設計還能通過審美愉悅提升出版企業的文化品位，讓讀者對品牌產生更深的情感依賴。但目前出版企業網站往往不能較好地實現上述功能，部分出版企業的網站設計存在明顯缺陷，導致讀者不滿甚至產生厭惡情緒，這對出版品牌的建立和維持極為不利。本文將以讀者體驗為邏輯起點，系統探討我國出版企業如何借鑒商務網站的經驗，通過系統優化提升人機交互效率，豐富讀者體驗并增加讓渡給讀者的整體價值。

二、以體驗為中心的網頁設計必須關注的指標

讀者日益強勢的現實，決定了經營者須以讀者為中心調整營銷努力的方向。出版企業的網站要能給讀者帶來輕松愉悅的感受，增加讀者對出版品牌的滿意感和依賴度。為達成該目標，出版企業需借鑒用戶研究、體驗營銷等領域的新思路，結合數字技術的發展動向，建構建出版企業網站測評體系，然后測度每個指標與目標值之間的差距，進而調整網頁交互設計，以改進讀者的感知和體驗價值。

根據增加讀者黏性的需要，在出版企業的網站設計中須注意以下指標：讀者資料的收集和挖掘、交互行為的記錄和跟蹤，讀者在交易中的行為屬性分析，讀者在交易后的投訴、抱怨或口碑傳播行為的監測和引導等。具體指標體系見表1：

從人性角度考慮，讀者除希望能控制交互程序外，還厭惡過多的記憶負擔，設計者應在快捷方式設置、頁面視覺布局、導航系統簡化等方面苦下工夫。[3-4]此外，不要隨意改變界面的設計標準，前后一貫的信息展示會讓用戶產生熟悉感和依賴感。

三、我國出版企業網站存在的問題及影響

目前，多數出版企業已開通網站，有些編輯或出版人還開通了博客、微博、QQ等平臺與讀者交互，但就官網的交互情況來分析，效果并不理想。主要問題有：

第一，網站設計粗糙，更新不及時，幾乎沒有交互功能。部分出版企業開通了官網，但由于投入的人力、資金等有限，網頁設計不精美，顏色搭配不當，資訊時效性不強，用戶反饋信息特別不便。由于這種網站毫無吸引力，所以瀏覽者數量稀少。這類網站在宣傳企業形象、凝聚市場人氣、采集讀者意見、增進雙方關系等方面都無法實現基本功能，且常常給讀者留下負面印象，普通讀者如非迫不得已一般不會再次登錄該網站。

第二，導航系統存在缺陷，讀者無法檢索到符合需要和感興趣的信息。從用戶心理角度分析，讀者登錄出版企業網站是為查找營銷信息，或反饋遇到的問題，因此，讀者希望能在較短時間獲得完整準確的信息，且不愿承擔太多記憶負擔。目前部分出版企業網站的導航系統沒有凸顯出易辨識和易操作的特征，不能實現交互流程的精簡化，讀者感到摸清網頁布局和使用規則異常困難，出現操作失誤難以恢復，因此，讀者難以對網站產生好感或向他人推薦。

第三，基本功能健全，但缺乏風格與特色，不易在同類網站中脫穎而出，且在人機交互方面沒有優勢。由于上述原因，這類網站在電子商務網站中僅處于“平庸”等級，無法有效捕捉讀者的注意力。從資源利用效率角度分析，網站的建立和維護需要大量資源，如果效果平平，市場反應不佳，則這些投入將無法收回。因此，理性的決策者在決定開發網站前，必須充分考慮讀者的體驗訴求，盡力通過獨特的網頁風格、生動形象的展示、符合認知習慣的體驗，提升讀者的滿意度。當然，這種方案的前提是有充分調研和讀者結構分析作基礎，進而結合讀者上網的偏好，然后才能設計和推出別具風格的網站。

筆者點擊過14家出版企業（集團）網站，發現大多數以介紹黨政領導的社會活動為主，加上新上市產品的推介，內容結構單一且相似度高，缺乏吸引人的視覺設計，對于多媒體的應用缺乏創意或搭配不當，針對讀者特征的交互設計或沒有出現，或比較初級，仍有較大的改進空間。這些問題嚴重影響出版營銷工作的開展，對于數字化轉型的推進極為不利，因此，從長遠考慮，出版企業須重視網絡商務平臺的建構和維護，即以讀者的利益為中心，優化人機交互設計，利用網絡平臺改進消費體驗，提升讓渡給讀者的整體價值。

四、我國出版企業網站設計優化的戰略思考及執行細則

目前，我國大部分出版企業仍以傳統圖書出版為主，但在網站設計方面則應以國外最佳的電子商務網站為標桿，參考其實戰經驗，改進網站的智能水平和互動功能。筆者認為，有如下幾個思路可供參考：

第一，利用多元渠道進行讀者調查和用戶行為分析。對于讀者的訴求，尤其是隱藏的心理動機，出版企業需通過多種途徑去洞察，獲取讀者使用網絡時的表現等原始信息，此類信息能反映讀者使用網站或產品中存在的問題，挖掘這類數據可以辨識讀者的真正需求，提煉出設計創新或功能優化的新思路，為提升網站的交互性能提供可行方案。目前，出版企業可通過BBS、博客、微博上的訪問、跟帖和評論分析讀者對網站交互功能的期望，然后結合出版企業的品牌定位，籌劃改進網站設計的具體方案。需要說明的是，讀者調查和用戶行為分析在出版營銷的整個流程中始終處于關鍵地位，一方面用戶心理和行為調研能為網頁設計提供良謀益策，另一方面，網頁設計需要考慮網站在讀者數據收集方面的功能。

第二，邀請第三方介入調查和設計環節，但出版企業內需要有專人負責協調、指導和監控營銷溝通計劃的落實。在網站的設計、開發、測試和管理的全過程中，出版企業的項目負責人應清楚地將意欲達到的溝通目標、具體的交互指標等向開發人員做系統的說明，然后在網站開發完成和試運行時，以普通用戶的身份訪問網站，檢查各項指標是否達成，發現問題并提出修改意見。第三方負責讀者調查和網站開發的優勢在于技術更為卓越，專業程度更高，但也可能由于溝通障礙、時間限制導致設計質量問題。在網站開發結束之后，雙方還應該通過合同形式規定好后期維護事項。

第三，自行開發網站，改進交互功能，提供更多附加服務，增強讀者黏性。這種方案是基于讀者需求變化無常的考慮，相對于出版企業的市場調查和需求分析而言，讀者本人最了解自己的需求，因此，出版企業須通過交互功能的改善來與讀者建立和維持良好的關系，同時富有人情味、趣味性的溝通，可讓讀者的訴求獲得個性化表達。簡言之，這種方案要求出版企業在原網站的基礎上，根據用戶研究的結論，調整視覺層次，改進搜索工具的性能，設置指向清晰的導航系統，以貼近讀者的使用習慣，減少讀者思考的難度，讓讀者輕松地找到問題的答案，在內容編輯上要活用文字、圖片和視頻，以富媒體的形式傳播信息，讓讀者獲得全方位的感官體驗，進而對品牌產生好感與信任，甚至主動推薦該網站給自己的親友。

在出版經營日益互聯網化的前提下，出版企業應投入人力、資金去優化網站的交互功能，以提升整體營銷效果。筆者認為以下幾則建議可供參考：

首先，明確目標消費群體的構成，并盡力使目標讀者群成為網站深度用戶。出版企業須注重對市場的理性分析，做好讀者數據的收集、挖掘工作，明確目標市場的構成及讀者的網絡瀏覽習慣，然后在網站設計中結合讀者的人口學特征及使用偏好，有針對性地設計一些交互功能，增加讀者的訪問率和停留時間，讓讀者在使用過程中逐步產生參與的興趣和沖動，成為網站的深度用戶，為網站優化提供更多的反饋和建議。簡言之，出版企業的網頁設計須以人為本，為了交互的精準化，經營者務必做好前期調查工作。

其次，界面設計奉行簡單易懂的原則。出版企業網站應減少讀者思考的難度。人性化的網站必須是自我解釋的，在資訊方面去蕪存菁，只提供讀者所需內容，它尊重用戶的惰性，讓讀者一眼就能找到感興趣的欄目，并且可以預測到每次點擊后獲得的內容。[5]網頁設計人員不要期望讀者會花時間了解技術細節，應清楚讀者無法容忍長時間等待，因此，煩瑣的注冊程序應盡量避免。為節省讀者的時間、精力，導航系統應盡量突出關聯性，讓讀者能很快地找到相關度較高的書目信息以及反饋平臺。

再次，通過多種方式將品牌信息傳遞給讀者，在讀者頭腦中形成鮮明的品牌印象。出版企業的網站設計中要通過LOGO、軟文廣告、動態標志等傳遞組織使命、核心優勢，讓讀者牢記和認出出版經營者的商標、拳頭產品等，同時要通過自發的反饋、分享等方式強化品牌認知，增強讀者對品牌的信任和依賴感。在營銷傳播方面，出版企業須注意讀者的網頁瀏覽習慣和認知模式，如普通讀者認為重要信息會放在突出位置，又如讀者會認為圖片底下的信息與圖片緊密相關，再如在適當的時候給出必要的提示，不僅可減少等待中的焦慮而且可以延長讀者停留時間并吸引更多注意。[6]如果網站的建造者能夠妥善地利用這些規律，就可有效地在讀者心目中建立起良好的形象。

最后，突出個性服務、交互溝通在網頁中的地位，借助顧客參與，建立和強化信任關系，動態調整市場定位，在營銷策略上取得新突破。所謂個性服務，指網頁設計要盡量對準讀者的需求和習慣，為讀者提供定制化的服務項目。具體而言，出版企業應從技術、內容和藝術等方面實現突破，比如要方便各類讀者（如老年人、色盲人士等）通過各類終端訪問，且讀者可定制頁面的內容、形式和布局，再如要根據數據交叉分析的結果為讀者推薦符合其需求的營銷信息。在形式方面，出版企業的網站要突出獨特的審美風格，尤其是網站LOGO和頁面格局方面要體現獨特風格和文化氣質，以書香氣質留住讀者。如借助系統過濾算法可提供基于讀者興趣和經驗的個性化推薦服務，而對于讀者厭惡的主題的記錄和分析則可避免無效廣告推送帶來的厭煩與惡評。

總之，網站設計優化可以提升出版營銷的投資回報率，改進品牌在讀者心目中的印象，使企業獲取更多忠實讀者。因此，出版企業須借鑒其他電商網站和SNS網站交互設計的經驗，持續優化網頁的交互流程，為讀者提供更多更好的體驗價值。從學術探索的軌跡看，數字出版的研究者從一開始的重視利用新技術改進流程，發展到強調內容為王，最后回歸到重視對讀者的研究。這是因為究其本質，讀者在出版經濟中占有至關重要的地位，因此，網頁設計的自然化、智能化、人性化必將給出版企業帶來實質性的利益回報。

從未來趨勢看，由于讀者越來越多地使用移動媒體來閱讀、娛樂、社交和購物，因此，移動媒體界面的交互設計將成為熱點課題。此外，隨著數字技術的升級，網站設計還會遇到很多新問題，如何在減少操作難度的情況下高效分享有價值的信息，如何在數據挖掘的基礎上改進產品設計，如何在保護隱私的前提下辨識讀者真正的興趣，如何利用產品人物角色分析法確定產品功能的優先級順序，[7]這些都是后續研究須重點關注的問題。

參考文獻：

[1] 采銅學心錄.用戶研究三部曲：有關用戶研究的戰略思考[EB/OL].（2011-08-28）[2012-06-14].http：//xuexinlu.blogbus.com/logs/158425965.html.

[2] 宋鳴僑.淺析人機交互技術的發展趨勢[J].現代裝飾：理論，2012（2）.

[3] 胡龍嬌，張智君.人機交互行為中的情緒研究現狀與展望[J].人類工效學，2010（4）.

[4] 甘利人.網絡環境下的信息用戶研究[J].圖書情報工作，2009（16）.

[5] Johnson.認知與設計——理解UI設計準則[M].張一寧，譯.北京：人民郵電出版社，2011（9）.

[6] Jesse James Garrett.用戶體驗的要素——以用戶為中心的Web設計[M].范曉燕，譯. 北京：機械工業出版社，2007（10）.

[7] Marty Cagan.啟示錄——打造用戶喜愛的產品[M].七印部落，譯.武漢：華中科技大學出版社，2011（5）.

（作者單位：南京大學信息管理學院出版科學系）

網站網頁設計論文范文第5篇

關鍵詞：教學網站;數據庫;可行性;網站系統;設計

隨著信息技術的高速發展，教育教學改革的不斷深入，互聯網的普及，通過網絡進行自主學習與收集信息，已經成為很多人的習慣。特別是計算機技術更新快，通過網絡平臺進行自主學習是很好的選擇，世界上很多國家都在致力于Internet在學校教育，社區教育，社會教育及在職訓練的應用與研究等。利用先進的網絡教學與傳統媒體存在很多差異，因此設計能夠符合網絡媒體特性，并能提升教育教學效果的教學網絡系統是很有必要的。教育教學網絡系統能夠提供豐富的學習資源，從而轉變了教育觀念和學習觀念，補充了辦學條件，能夠培養信息技術網絡環境下較好的學習方法和提升學習能力。

1 教學網站系統的分析

1.1 教學網站系統可行性分析

1)技術可行性分析

主要分為以下幾個方面：

(1)硬件：隨著計算機技術的飛速發展，計算機硬件條件可以說是日新月異，其發展以令人驚訝的速度成倍發展。高配置的電腦硬件使得軟件的快速開發得到應有的保證。

(2)系統軟件：WINDOWS 系統界面熟悉，人機操作靈活，可以提供良好的開發環境。

(3)應用軟件：Visual Studio 2013、SQL Server 2012 數據庫應用軟件。

(4)技術：本系統將采用B/S(Browser/Server)架構，采用ASP.NET技術實現，后端使用SQL數據庫實現數據邏輯。完成的系統需要在IIS服務器下運行。

2)經濟可行性分析

教學網站系統跟其他一些應用系統相比較，功能相對簡單，一方面，不需要購置額外的設備，相應的開發和維護的費用低，相關人員的培訓也相對簡單，需要的費用也少;另一方面，相關的運行費用也相對比較少，同時不需要進行太多的維護。

網站系統放上服務器后，相關數據在網絡上進行傳遞，可以實現數據共享，規范相關數據管理，從而減少重復勞動，提高系統的管理效率和水平。教學網站系統把計算機作為工具，通過對系統的全面管理，優化管理，提高工作效率。

1.2 教學網站系統需求分析

1)任務描述

系統模塊的設計應該根據整個系統總體設計思路進行。整體設計就是基于B/S模型設計符合需求的教學網站系統。該網站系統的總體設計應該是提供給學生一個內容豐富的網絡平臺，而且訪問效率高。系統模塊應該包括課程概述、教學大綱、新聞發布、論壇留言等功能。

2)用戶特點

系統應該圍繞著用戶特點設計。將用戶分為學生和教師兩部分。學生可以登錄網站系統，瀏覽信息、查找信息、下載文件，提交作業。教師可以登錄網站輸入課程簡介、上傳課件文件、批改作業、發布消息、修改和更新消息。教師和學生可以通過論壇發帖與回復進行交流。

3)條件與限制

教學網站系統模塊的設計需要突出管理員的功能和特點，而且與普通用戶有很大的區別。系統雖然對所有用戶開放，但部分資料和功能只針對管理員開放;如管理員可以發布新聞公告，對不法用戶的刪除與資料修改等。

1.3 教學網站系統中B/S系統結構

本教學網站系統搭建了一個基于B/S三層結構的系統。這三層結構是在傳統兩層結構的基礎上，增加了Web應用服務器作為中間層。這樣的優點是，客戶端只需要安裝瀏覽器就可以訪問，而不需要安裝其他任何應用程序，這解決了傳統兩層結構在擴展性、維護性、重用性等方面的不足。

教學網站系統采用的客戶端技術為ASP.NET，服務器端為Visual Studio2013.NET，編程語言采用Visual C#，服務器與數據庫之間的通信采用ADO.NET技術。系統主要工作過程如下：首先Web客戶端通過瀏覽器連上Web服務器，經過身份驗證后下載用戶界面的到本機;然后Web客戶端通過HTTP協議發送請求至服務端，從而建立通信;與服務器建立起通信后得到相應服務的URL地址，隨后觸發此服務;服務在Web Server上運行，通過ADO.NET直接連接到數據庫服務器上執行SQL語句，并將獲取的數據生成響應內容傳給Server或將處理后的結果存入數據庫。

2 教學網站系統的設計

2.1 系統功能框架

教學網站系統是為用戶之間進行交流和聯系提供的一個平臺。利用現代的網絡資源優勢和技術優勢，以達到用戶之間的信息交流和溝通的目的。

本系統是基于WEB的教學網站系統，采用了當前的B/S結構模式進行開發，運用了ASP.NET+SQL Server 2012+IIS組合來進行開發與運行。

教學網站系統的基本功能：用戶的登錄與注冊、在線考試、考試資料管理、在線論壇留言編輯與新聞信息發布等等功能。具體功能模塊如下：

(1)教學網站數據庫模塊;

(2)用戶注冊模塊：提供用戶的登錄與注冊功能。

(3)用戶管理模塊：提供用戶信息的編輯功能，可以編輯用戶的個人資料;

(4)在線新聞模塊：提供管理員發布在線新聞功能，并對新聞進行修改、刪除等功能;同時用戶可以對新聞進行新聞檢索和新聞瀏覽功能;

(5)在線論壇模塊：提供用戶發布帖子的功能，并允許修改和刪除自己發布的帖子信息，同時用戶與用戶之間還可以對帖子進行回復，以達到用戶之間的互動交流。

功能框架結構圖，如圖1所示。

2.2 系統角色

根據教學網站系統的實際情況，教學網站系統的主要角色有管理員、學生、教師和瀏覽者，其中教學網站系統的使用者是采用管理員一級管理模式。

1) 管理員

管理員是教學網站系統的主要角色之一，主要負責新聞公告發布、在線論壇留言編輯、用戶資料、在線考試、考試資料管理等功能。

2) 學生

學生是教學網站的兩大用戶之一，具有在線發布帖子、在線考試等功能

3) 老師

老師也是教學網站的兩大用戶之一，具有在線發布帖子、考試資料瀏覽等功能。

4) 瀏覽者

瀏覽者只具有瀏覽新聞、用戶帖子和用戶回復等基本功能。

2.3 系統E-R圖

實體E-R圖表示了實體間的對應關系，它和數據流程圖一起組成了系統的邏輯模型。圖2為教學網站系統的普通用戶E-R圖，圖3為教學網站系統的管理員用戶E-R圖。

2.4 數據庫的設計

在整個系統設計中，數據庫的設計是核心，是系統能夠實現的前提，也是系統的關鍵部分，還是衡量系統水平的一個重要因素。因此，設計出好的數據庫是很重要的，那么要設計好的數據庫，就要做到對系統進行系統需求分析，根據系統的數據特點和主要功能，以及要解決的難題進行思考與設計。

3 總結語

本文根據網絡自主學習的需要，通過對教學網站系統進行分析，構思了符合教學與自主學習的教學網站。通過這樣的網站系統，教師將有關教學資源上傳到系統，共享給學生，學生可以通過這個網站系統選擇合適的方式和時間來學習，有利于培養學生自主學習能力;也有利于教師根據需要組織教學安排，起到良好的教與學的互動教育效果。

參考文獻：

[1] 任江明. 計算機教學網站的系統設計[J]. 現代計算機(專業版)，2010(9)：198-200.

[2] 王麗彬. “計算機應用基礎”教學網站系統設計思路[J]. 電子商務，2012(11)：55-56.

[3] 祁興華，鮑劍洋. 基于FlashPaper的教學網站文檔轉換系統的研究與設計[J]. 辦公自動化，2012(22)：59-60，16.

[4] 曹英麗，許童羽，鄭偉，李征明. 信號與系統教學網站設計與構建[J]. 農業科技與裝備，2012(10)：53-54.

[5] 孫偉，劉迪昱，毛布. 高職院校教學網站的評價指標體系研究[J]. 當代職業教育，2011(1)：52-55.

[6] 朱文遠，金文英，潘宏程，李建平，張云. 儀器分析網絡多媒體教學網站的設計與實現[J]. 廣州化工，2015(4)：207-208.

網站網頁設計論文范文第6篇

關鍵詞：網站設計與網站管理 教學網站 ASP DIV CSS

一、構建課程教學網站的目的及意義

隨著互聯網和信息技術的飛速發展，我們的學習方式也在產生變革，學生在查找資料時，從傳統的查閱圖書到了如今的利用互聯網絡上的資源為自己答疑解惑。電子商務專業與信息技術緊密相關，而網頁設計與網站管理作為電子商務專業的必修課程，更應該實現學科教學與信息技術的完美結合，這必將成為當今學校教學的發展趨勢之一。

通過構建課程教學網站，可以給學生和老師提供一個交流的平臺，給學生提供一種學習的輔助工具，實現教學資源的共享，提高高校教學質量。

二、構建課程教學網站的技術與方法

1、DIV+CSS

DIV+CSS是一種常用的網頁布局方法，這一種網頁布局方法有別于傳統的HTML網頁設計語言中的表格(table)定位方式，可實現網頁頁面內容與表現相分離。不僅讓整個網頁看起來條理清晰，而且修改起來很方便。

2、ASP+IIS+SQL

現在常用的網站開發語言有ASP、PHP、JSP、ASP.NET等。ASP是微軟所開發的一種后臺腳本語言，它的語法和Visual BASIC類似，雖然ASP存在著安全性等問題，但是它簡單易用。目前在微軟的.net戰略中新推出的ASP.net借鑒了Java技術的優點，使用C Sharp (C#)語言作為ASP.net的推薦語言，同時改進了以前ASP的安全性差等缺點。但是平臺的局限性和ASP自身的安全性限制了ASP的廣泛應用。

PHP的源代碼完全公開，平臺無關性是PHP的最大優點，但是如果在PHP中不使用ODBC，而用其自帶的數據庫函數來連接數據庫的話，使用不同的數據庫，PHP的函數名不能統一。這樣，使得程序的移植變得有些麻煩。

JSP的最大優點是平臺無關性，除了這個優點，JSP/Servlet的效率以及安全性也是相當驚人的。因此，JSP/Servlet雖然在國內目前的應用并不廣泛，但是其前途不可限量。

如今主流的Web服務器軟件主要由IIS或Apache組成。IIS支持ASP且只能運行在Windows平臺下，Apache支持PHP，CGI，JSP且可運行于多種平臺，雖然Apache是世界使用排名第一的Web服務器平臺，但是眾所周知，Windows以易用而出名，也因此占據不少的服務器市場。

綜合以上分析，在構建課程教學網站時，采用的是DIV CSS的網頁布局方法，結構清晰，修改方便;開發環境選擇的是微軟的ASP和IIS應用服務器，由于其簡單易用，便于學生參與;數據層選擇的是SQL Server2008，它是迄今為止最強大最全面的SQL Server版本。

三、課程教學網站的主要內容

1、提供注冊登錄功能，讓學生能夠實名上傳作業，下載教學課件等;

2、課程安排，將理論課程、實驗課程及課程設計安排詳細說明及指導文檔上傳到網絡，使學生能把握課程學習的進度;

3、提供教學視頻，上傳與課程相關的視頻供學生學習;

4、作品展示區域，將往屆優秀的學生作品在網上展示，供學生觀摩學習;

5、開設交流論壇，供學生與老師或學生與學生之間進行交流;

6、資源推薦，將與課程相關的優秀資源網站鏈接推薦給學生。

根據以上分析，課程教學網站的結構如下：

四、課程教學網站的教學應用

1、學生可以通過教學網站已經學過的知識進行復習，對將要學到的內容進行預習。

2、遇到課堂上沒有理解的知識或實踐步驟，可以通過下載課件和實踐指導，自行練習。

3、教師可以通過教學網站收集學生在學習中所遇到的問題，在課堂中詳細進行講解和點評。

4、學生可以通過登錄教學網站，提交課程實踐、課程設計等老師布置的作業和任務，還可以在交流論壇中與老師及同學交流。

通過《網頁設計與網站管理》課程教學網站的建設，給學生提供了一種新的學習模式，會極大激發學生的學習熱情，加強師生之間的溝通和交流。

本文系武漢大學珞珈學院教學研究項目(201216)的研究成果之一。

參考文獻：

[1]唐四薪.web標準網頁設計與ASP[M].清華大學出版社

[2]孫莉娟，穆杰.Dreamweaver CS3+ASP動態網站開發基礎與實例教程[M].電子工業出版社