資訊產業公司網站設計與實現論文

摘要：爲提高中小型資訊服務類企業網站設計的質量，提升網站利用率。以武漢信運通資訊產業有限公司爲例，從網站的設計分析出發，採用HTML和JavaScript語言，利用DIV＋CSS進行網頁佈局，實現了網站的重新設計、製作和測試，具體內容包括網站首頁、產品展示、服務介紹、加盟合作、新聞動態、關於我們。結果表明：網站的設計與實現能滿足公司的需求，達到了預期的效果，爲同類型企業網站的設計與實現提供了參考和借鑑價值。

關鍵詞：資訊產業；網站設計；網站實現；JavaScript

武漢信運通資訊產業有限公司是一家專業提供物流行業資訊化及其他集成服務於一體的高新企業。信運通資訊產業有限公司之前使用的網站存在版式老套、網頁佈局混亂等問題。透過對公司的現有業務內容、企業網站目標用戶、企業網站設計策略進行分析和總結，綜合應用AdobePhotoshopcs6、PS軟件和AdobeDreamweavercs6軟件，採用HTML和DIV＋CSS搭建網站的基本框架，透過Javascript語言來實現網站的動態效果。最終實現了網站規劃、介面設計、網站製作及網站測試，達到了預期的效果，提升了用戶的體驗，進而爲中小型資訊服務類企業網站設計與實現提供了參考和借鑑價值。

1網站設計思路

在分析研究和實踐基礎上，對整體設計流程進行梳理，得出網站的設計思路（見圖1）。

（1）對公司現有產品、主要服務、合作伙伴、企業相關介紹等需要透過網站向目標羣體進行展示的相關資訊進行梳理。

（2）透過對目標羣體的受教育程度、瀏覽網站的習慣、對網站不同資訊的關注度以及其對企業網站設計的影響進行分析，從而確定網站的設計框架、展示形式與風格。

（3）透過瀏覽大量的企業網站並進行深入細緻的分析，從而歸納總結出企業網站設計的策略，爲後期良好的企業網站設計做好準備。

（4）根據前期的調查、分析、總結，進行網站架構的初步設計以及網站介面的詳細設計。

（5）根據設計出來的網站介面，進行網站介面的`代碼實現。在製作完成後根據需要進行網站的測試。

（6）對設計製作出來的網站進行總結，發現網站設計與製作過程中的不足以便後期加以修整。

2網站設計分析

2．1用戶分析

在對公司業務內容進行梳理後，明確了其網站用戶羣。下面將針對用戶羣體進行分類分析。

（1）中小型物流企業。透過與相關人員交流，瞭解到針對物流資訊服務企業網站需要展示以下內容：產品與服務的相關介紹、物流行業與公司的新聞動態以及老客戶使用公司產品與服務的效果。對於網站的展示效果，他們更傾向於佈局相對簡單、易於瀏覽、便於獲取到關鍵資訊。

（2）合作伙伴與投資人。透過對信運通公司向合作伙伴與投資人展示的PPT內容進行分析，可以總結出公司主要想向投資人和合作夥伴傳達以下資訊：公司的簡要介紹、市場機會、現階段經營的產品及服務、自身發展的優勢、企業未來發展規劃以及合作伙伴合作、投資人投資帶來的互惠互利及其良好的預期。

（3）其他用戶。除了物流服務企業、合作伙伴與投資人以外，網站的常見用戶還有政府機構、應聘者及不定人羣。這些用戶在瀏覽網站時，主要會對網站的風格、公司的介紹、企業文化、企業發展狀況、公司現階段經營的產品與服務以及近期的招聘職位感興趣。

2．2內容分析

在完成前期的調查與梳理以及對網站用戶羣體進行研究後，企業網站的內容暫定爲以下7個模組，具體內容如下：

（1）網站首頁。網站首頁主要內容有企業LOGO、展示企業理念的輪播圖、網站導航、公司產品及服務、公司簡介、新聞動態以及服務聯繫方式和APP下載區。

（2）產品展示。產品展示模組主要包括公司的現有產品－－物流業務管理系統、物流公共服務平臺、物流聯盟管理系統、第三方物流管理系統以及手機APP。

（3）服務介紹。主要包括公司現階段對外提供的在線金融、在線投保、市內配送、GPS定位、園區WIFI服務。

（4）成功案例。向意向客戶或者潛在客戶展示公司的產品和服務在推廣過程中的成功案例。

（5）加盟合作。一方面透過展示公司現階段已經與哪些類型的機構展開合作關係從側面彰顯公司的實力。另一方面可以讓潛在的加盟商、投資人知曉公司的加盟合作以及吸納投資的意向。

（6）新聞動態。新聞動態模組主要包括行業新聞和公司新聞。

（7）關於我們。關於我們模組主要包括公司簡介、發展歷程、企業文化、聯繫方式、加入我們。

3網站設計製作

3．1網站結構規劃

經過網站設計分析，得出公司網站介面設計的具體結構（見圖2）。由於這些中小型物流公司使用系統時間較短，能夠作爲成功案例進行效果展示的公司並不多，因此在網站製作時先將此模組去掉。

3．2網站介面設計

3.2.1網站首頁設計

網站首頁能夠讓瀏覽者在第一時間內領略到企業特色所在。網站首頁PS效果如圖3所示：在網站首頁的頁眉位置，左側放置了公司的LO-GO。在頁眉的右側設定了“添加到桌面”捷徑。在頁眉的中部，設定了網站的導航。爲了提高網頁字型的辨識度與介面整潔，整個網站除了特殊需要都採用微軟雅黑字型。導航欄採用了鼠標懸浮的效果。當鼠標移動到相應的模組時，相應的文字由黑色跳轉爲紅色，下方懸浮顯示具體的子目錄。首頁Banner不僅需要體現企業的高端、大氣，同時還要展示物流資訊化服務的願景，並符合整體的頁面設計。Banner的下方是產品展示區，展示公司現階段的主要產品—“好運通”物流業務管理系統、物流公共服務平臺、物流聯盟管理系統、第三方物流公共服務平臺以及手機APP。整個產品展示區域只顯示3個產品，其他產品以輪播圖的形式呈現，當用戶點擊左、右移動按鈕，圖標會根據用戶的操作向左或向右移動出隱藏的產品圖標。產品展示的下方是兩欄資訊欄，分別放置公司簡介和新聞動態。以便訪客第一時間對公司有簡單的瞭解，同時獲取相關的新聞動態資訊。接下來是優質服務展示欄，在這一資訊欄，針對每一項服務都設計了相應的圖標以便對服務進行形象的展示。考慮到公司後期還會推出其他的服務，在優質服務欄同樣採用了輪播的效果，當訪客想要對服務進行了解時，只需鼠標單擊圖標或者對應的文字即可進入相應的頁面。在網站首頁的底部是網站的版權資訊、公司名稱以及公司的聯繫電話。爲了使整個網站顯得不沉悶，同圖4其他頁面PS效果圖時又能跟整個網站的風格協調，在底部的設計上選用了薑黃色作底色，字型用白色。在網站首頁的右側固定了一個資訊框，上面展示有公司的客服電話、客服QQ以及手機APP二維碼。此模組將作爲公司聯繫方式的展示區，在整個網站的各個介面都會出現。

3.2.2其他介面設計

爲了簡化整個網站的製作流程，同時保證網站風格的統一以及實現便於訪客瀏覽的目的，網站的其他介面（除了網站首頁以外的所有介面）的頁眉、Banner（其他介面的Banner沒有輪播效果，只是選取了網站首頁Banner輪播圖的一張圖片）以及網頁底部均與網站首頁的設計形式保持高度的一致。

3．3網站代碼實現

選擇AdobeDreamweavercs6作爲網站代碼編寫軟件，採用HTML、DIV＋CSS和Javascript語言來實現網站。下面將選擇幾個具代表性的功能模組進行說明。

3.3.1網站頁眉

網站的頁眉包括LOGO、導航和微信二維碼三部分，這三部分的排列主要透過float屬性來實現，各個模組的具體位置則需要透過設定margin值的大小來實現，使用width屬性控制頁眉寬度。公司LOGO的排列需要透過src屬性將處理好的圖片引入即可。網站的導航部分是頁眉部分的難點，它主要透過＜ul＞＜li＞＜／li＞＜／ul＞來實現文字的排列，透過display屬性實現二級導航的顯示與隱藏，透過僞類hover實現鼠標懸浮時的文字變色。微信公衆平臺二維碼部分則是先透過DIV＋CSS實現圖標的排列，再透過引入的JS代碼實現鼠標的懸浮效果。

3.3.2首頁

Banner網站首頁的Banner部分有兩張宣傳企業文化的圖片交替輪播，爲了實現較好的圖片輪播效果，需要有JS代碼作爲支撐。

3.3.3“優質服務”

先透過DIV＋CSS將優質服務的五個服務內容以及進行左右切換的圖標進行排版，再借助JS代碼進行動態效果的實現。

3.3.4網頁右側資訊框

網頁右側的資訊框主要有服務熱線電話、客服QQ以及手機APP下載三個模組。這三個模組均是採用DIV＋CSS進行佈局，具體的每一個模組則是透過float屬性與margin屬性進行控制。

3.3.5公司新聞模組

公司網站的新聞展示模組主要採用了table表格進行佈局，在後期新聞條目較多、一個頁面的展示效果不好時，就要考慮到新聞頁面的翻頁問題，需要透過JS代碼來實現每個頁面新聞條數多少以及上下頁的翻轉。

4網站測試

網站測試作爲網站設計與製作的最後一個環節，它對網站設計與製作的質量有較大影響，在測試時，主要針對靜態網站可能存在的問題進行了測試。

4.1連結測試

此次的網站連結測試主要針對以下三個方面：

①測試網站上頁面的所有連結是否依照設計思路連結到了正確的頁面；

②測試連結所指向的網站頁面是否存在；

③測試整個網站沒有孤立的頁面，即每一個介面都應當有連結指向。

4.2瀏覽器測試

用DIV＋CSS製作網頁時，需要測試瀏覽器相容，在測試時主要針對以下瀏覽器進行了測試：IE瀏覽器、火狐瀏覽器、360極速瀏覽器、360安全瀏覽器、谷歌瀏覽器和搜狗瀏覽器，測試結果透過。

5結語

本文設計並實現了信運通資訊產業有限公司的網站，整體設計製作效果較好，滿足了公司的網站建設需要，得到了公司的認可，後期需要在代碼的簡潔性上進行改進。

參考文獻

1李兆明．商業網站設計與製作［D］．成都：電子科技大學，2013

2高原．服務器端javascript技術研究［J］．資訊與電腦（理論版），2012（1）

3張少艾．白城科技人才網的設計與實現［D］．長春：吉林大學，2012

4趙羚雲．網站設計及網頁製作技巧［J］．硅谷，2012（14）