信息產業公司網站設計與實現論文

2021-04-17 論文

　　摘要：為提高中小型信息服務類企業網站設計的質量，提升網站利用率。以武漢信運通信息產業有限公司為例，從網站的設計分析出發，采用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鏈接測試

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