信息產(chǎn)業(yè)公司網(wǎng)站設計與實(shí)現論文
摘要：為提高中小型信息服務(wù)類(lèi)企業(yè)網(wǎng)站設計的質(zhì)量，提升網(wǎng)站利用率。以武漢信運通信息產(chǎn)業(yè)有限公司為例，從網(wǎng)站的設計分析出發(fā)，采用HTML和JavaScript語(yǔ)言，利用DIV＋CSS進(jìn)行網(wǎng)頁(yè)布局，實(shí)現了網(wǎng)站的重新設計、制作和測試，具體內容包括網(wǎng)站首頁(yè)、產(chǎn)品展示、服務(wù)介紹、加盟合作、新聞動(dòng)態(tài)、關(guān)于我們。結果表明：網(wǎng)站的設計與實(shí)現能滿(mǎn)足公司的需求，達到了預期的效果，為同類(lèi)型企業(yè)網(wǎng)站的設計與實(shí)現提供了參考和借鑒價(jià)值。
關(guān)鍵詞：信息產(chǎn)業(yè)；網(wǎng)站設計；網(wǎng)站實(shí)現；JavaScript
武漢信運通信息產(chǎn)業(yè)有限公司是一家專(zhuān)業(yè)提供物流行業(yè)信息化及其他集成服務(wù)于一體的高新企業(yè)。信運通信息產(chǎn)業(yè)有限公司之前使用的網(wǎng)站存在版式老套、網(wǎng)頁(yè)布局混亂等問(wèn)題。通過(guò)對公司的現有業(yè)務(wù)內容、企業(yè)網(wǎng)站目標用戶(hù)、企業(yè)網(wǎng)站設計策略進(jìn)行分析和總結，綜合應用AdobePhotoshopcs6、PS軟件和AdobeDreamweavercs6軟件，采用HTML和DIV＋CSS搭建網(wǎng)站的基本框架，通過(guò)Javascript語(yǔ)言來(lái)實(shí)現網(wǎng)站的動(dòng)態(tài)效果。最終實(shí)現了網(wǎng)站規劃、界面設計、網(wǎng)站制作及網(wǎng)站測試，達到了預期的效果，提升了用戶(hù)的體驗，進(jìn)而為中小型信息服務(wù)類(lèi)企業(yè)網(wǎng)站設計與實(shí)現提供了參考和借鑒價(jià)值。
1網(wǎng)站設計思路
在分析研究和實(shí)踐基礎上，對整體設計流程進(jìn)行梳理，得出網(wǎng)站的設計思路（見(jiàn)圖1）。
�。�1）對公司現有產(chǎn)品、主要服務(wù)、合作伙伴、企業(yè)相關(guān)介紹等需要通過(guò)網(wǎng)站向目標群體進(jìn)行展示的相關(guān)信息進(jìn)行梳理。
�。�2）通過(guò)對目標群體的受教育程度、瀏覽網(wǎng)站的習慣、對網(wǎng)站不同信息的關(guān)注度以及其對企業(yè)網(wǎng)站設計的影響進(jìn)行分析，從而確定網(wǎng)站的設計框架、展示形式與風(fēng)格。
�。�3）通過(guò)瀏覽大量的企業(yè)網(wǎng)站并進(jìn)行深入細致的分析，從而歸納總結出企業(yè)網(wǎng)站設計的策略，為后期良好的企業(yè)網(wǎng)站設計做好準備。
�。�4）根據前期的調查、分析、總結，進(jìn)行網(wǎng)站架構的初步設計以及網(wǎng)站界面的詳細設計。
�。�5）根據設計出來(lái)的網(wǎng)站界面，進(jìn)行網(wǎng)站界面的代碼實(shí)現。在制作完成后根據需要進(jìn)行網(wǎng)站的測試。
�。�6）對設計制作出來(lái)的網(wǎng)站進(jìn)行總結，發(fā)現網(wǎng)站設計與制作過(guò)程中的不足以便后期加以修整。
2網(wǎng)站設計分析
2．1用戶(hù)分析
在對公司業(yè)務(wù)內容進(jìn)行梳理后，明確了其網(wǎng)站用戶(hù)群。下面將針對用戶(hù)群體進(jìn)行分類(lèi)分析。
�。�1）中小型物流企業(yè)。通過(guò)與相關(guān)人員交流，了解到針對物流信息服務(wù)企業(yè)網(wǎng)站需要展示以下內容：產(chǎn)品與服務(wù)的相關(guān)介紹、物流行業(yè)與公司的新聞動(dòng)態(tài)以及老客戶(hù)使用公司產(chǎn)品與服務(wù)的效果。對于網(wǎng)站的展示效果，他們更傾向于布局相對簡(jiǎn)單、易于瀏覽、便于獲取到關(guān)鍵信息。
�。�2）合作伙伴與投資人。通過(guò)對信運通公司向合作伙伴與投資人展示的PPT內容進(jìn)行分析，可以總結出公司主要想向投資人和合作伙伴傳達以下信息：公司的簡(jiǎn)要介紹、市場(chǎng)機會(huì )、現階段經(jīng)營(yíng)的產(chǎn)品及服務(wù)、自身發(fā)展的優(yōu)勢、企業(yè)未來(lái)發(fā)展規劃以及合作伙伴合作、投資人投資帶來(lái)的互惠互利及其良好的預期。
�。�3）其他用戶(hù)。除了物流服務(wù)企業(yè)、合作伙伴與投資人以外，網(wǎng)站的常見(jiàn)用戶(hù)還有政府機構、應聘者及不定人群。這些用戶(hù)在瀏覽網(wǎng)站時(shí)，主要會(huì )對網(wǎng)站的風(fēng)格、公司的介紹、企業(yè)文化、企業(yè)發(fā)展狀況、公司現階段經(jīng)營(yíng)的產(chǎn)品與服務(wù)以及近期的招聘職位感興趣。
2．2內容分析
在完成前期的調查與梳理以及對網(wǎng)站用戶(hù)群體進(jìn)行研究后，企業(yè)網(wǎng)站的內容暫定為以下7個(gè)模塊，具體內容如下：
�。�1）網(wǎng)站首頁(yè)。網(wǎng)站首頁(yè)主要內容有企業(yè)LOGO、展示企業(yè)理念的輪播圖、網(wǎng)站導航、公司產(chǎn)品及服務(wù)、公司簡(jiǎn)介、新聞動(dòng)態(tài)以及服務(wù)聯(lián)系方式和APP下載區。
�。�2）產(chǎn)品展示。產(chǎn)品展示模塊主要包括公司的現有產(chǎn)品－－物流業(yè)務(wù)管理系統、物流公共服務(wù)平臺、物流聯(lián)盟管理系統、第三方物流管理系統以及手機APP。
�。�3）服務(wù)介紹。主要包括公司現階段對外提供的在線(xiàn)金融、在線(xiàn)投保、市內配送、GPS定位、園區WIFI服務(wù)。
�。�4）成功案例。向意向客戶(hù)或者潛在客戶(hù)展示公司的產(chǎn)品和服務(wù)在推廣過(guò)程中的成功案例。
�。�5）加盟合作。一方面通過(guò)展示公司現階段已經(jīng)與哪些類(lèi)型的機構展開(kāi)合作關(guān)系從側面彰顯公司的實(shí)力。另一方面可以讓潛在的加盟商、投資人知曉公司的加盟合作以及吸納投資的意向。
�。�6）新聞動(dòng)態(tài)。新聞動(dòng)態(tài)模塊主要包括行業(yè)新聞和公司新聞。
�。�7）關(guān)于我們。關(guān)于我們模塊主要包括公司簡(jiǎn)介、發(fā)展歷程、企業(yè)文化、聯(lián)系方式、加入我們。
3網(wǎng)站設計制作
3．1網(wǎng)站結構規劃
經(jīng)過(guò)網(wǎng)站設計分析，得出公司網(wǎng)站界面設計的具體結構（見(jiàn)圖2）。由于這些中小型物流公司使用系統時(shí)間較短，能夠作為成功案例進(jìn)行效果展示的公司并不多，因此在網(wǎng)站制作時(shí)先將此模塊去掉。
3．2網(wǎng)站界面設計
3.2.1網(wǎng)站首頁(yè)設計
網(wǎng)站首頁(yè)能夠讓瀏覽者在第一時(shí)間內領(lǐng)略到企業(yè)特色所在。網(wǎng)站首頁(yè)PS效果如圖3所示：在網(wǎng)站首頁(yè)的頁(yè)眉位置，左側放置了公司的LO-GO。在頁(yè)眉的右側設置了“添加到桌面”快捷方式。在頁(yè)眉的中部，設置了網(wǎng)站的導航。為了提高網(wǎng)頁(yè)字體的辨識度與界面整潔，整個(gè)網(wǎng)站除了特殊需要都采用微軟雅黑字體。導航欄采用了鼠標懸浮的效果。當鼠標移動(dòng)到相應的模塊時(shí)，相應的文字由黑色跳轉為紅色，下方懸浮顯示具體的子目錄。首頁(yè)Banner不僅需要體現企業(yè)的高端、大氣，同時(shí)還要展示物流信息化服務(wù)的愿景，并符合整體的頁(yè)面設計。Banner的下方是產(chǎn)品展示區，展示公司現階段的主要產(chǎn)品—“好運通”物流業(yè)務(wù)管理系統、物流公共服務(wù)平臺、物流聯(lián)盟管理系統、第三方物流公共服務(wù)平臺以及手機APP。整個(gè)產(chǎn)品展示區域只顯示3個(gè)產(chǎn)品，其他產(chǎn)品以輪播圖的形式呈現，當用戶(hù)點(diǎn)擊左、右移動(dòng)按鈕，圖標會(huì )根據用戶(hù)的操作向左或向右移動(dòng)出隱藏的產(chǎn)品圖標。產(chǎn)品展示的下方是兩欄信息欄，分別放置公司簡(jiǎn)介和新聞動(dòng)態(tài)。以便訪(fǎng)客第一時(shí)間對公司有簡(jiǎn)單的了解，同時(shí)獲取相關(guān)的新聞動(dòng)態(tài)信息。接下來(lái)是優(yōu)質(zhì)服務(wù)展示欄，在這一信息欄，針對每一項服務(wù)都設計了相應的圖標以便對服務(wù)進(jìn)行形象的展示�？紤]到公司后期還會(huì )推出其他的服務(wù)，在優(yōu)質(zhì)服務(wù)欄同樣采用了輪播的效果，當訪(fǎng)客想要對服務(wù)進(jìn)行了解時(shí)，只需鼠標單擊圖標或者對應的文字即可進(jìn)入相應的頁(yè)面。在網(wǎng)站首頁(yè)的底部是網(wǎng)站的版權信息、公司名稱(chēng)以及公司的聯(lián)系電話(huà)。為了使整個(gè)網(wǎng)站顯得不沉悶，同圖4其他頁(yè)面PS效果圖時(shí)又能跟整個(gè)網(wǎng)站的風(fēng)格協(xié)調，在底部的設計上選用了姜黃色作底色，字體用白色。在網(wǎng)站首頁(yè)的右側固定了一個(gè)信息框，上面展示有公司的客服電話(huà)、客服QQ以及手機APP二維碼。此模塊將作為公司聯(lián)系方式的展示區，在整個(gè)網(wǎng)站的各個(gè)界面都會(huì )出現。
3.2.2其他界面設計
為了簡(jiǎn)化整個(gè)網(wǎng)站的制作流程，同時(shí)保證網(wǎng)站風(fēng)格的統一以及實(shí)現便于訪(fǎng)客瀏覽的目的`，網(wǎng)站的其他界面（除了網(wǎng)站首頁(yè)以外的所有界面）的頁(yè)眉、Banner（其他界面的Banner沒(méi)有輪播效果，只是選取了網(wǎng)站首頁(yè)Banner輪播圖的一張圖片）以及網(wǎng)頁(yè)底部均與網(wǎng)站首頁(yè)的設計形式保持高度的一致。
3．3網(wǎng)站代碼實(shí)現
選擇AdobeDreamweavercs6作為網(wǎng)站代碼編寫(xiě)軟件，采用HTML、DIV＋CSS和Javascript語(yǔ)言來(lái)實(shí)現網(wǎng)站。下面將選擇幾個(gè)具代表性的功能模塊進(jìn)行說(shuō)明。
3.3.1網(wǎng)站頁(yè)眉
網(wǎng)站的頁(yè)眉包括LOGO、導航和微信二維碼三部分，這三部分的排列主要通過(guò)float屬性來(lái)實(shí)現，各個(gè)模塊的具體位置則需要通過(guò)設置margin值的大小來(lái)實(shí)現，使用width屬性控制頁(yè)眉寬度。公司LOGO的排列需要通過(guò)src屬性將處理好的圖片引入即可。網(wǎng)站的導航部分是頁(yè)眉部分的難點(diǎn)，它主要通過(guò)＜ul＞＜li＞＜／li＞＜／ul＞來(lái)實(shí)現文字的排列，通過(guò)display屬性實(shí)現二級導航的顯示與隱藏，通過(guò)偽類(lèi)hover實(shí)現鼠標懸浮時(shí)的文字變色。微信公眾平臺二維碼部分則是先通過(guò)DIV＋CSS實(shí)現圖標的排列，再通過(guò)引入的JS代碼實(shí)現鼠標的懸浮效果。
3.3.2首頁(yè)
Banner網(wǎng)站首頁(yè)的Banner部分有兩張宣傳企業(yè)文化的圖片交替輪播，為了實(shí)現較好的圖片輪播效果，需要有JS代碼作為支撐。
3.3.3“優(yōu)質(zhì)服務(wù)”
先通過(guò)DIV＋CSS將優(yōu)質(zhì)服務(wù)的五個(gè)服務(wù)內容以及進(jìn)行左右切換的圖標進(jìn)行排版，再借助JS代碼進(jìn)行動(dòng)態(tài)效果的實(shí)現。
3.3.4網(wǎng)頁(yè)右側信息框
網(wǎng)頁(yè)右側的信息框主要有服務(wù)熱線(xiàn)電話(huà)、客服QQ以及手機APP下載三個(gè)模塊。這三個(gè)模塊均是采用DIV＋CSS進(jìn)行布局，具體的每一個(gè)模塊則是通過(guò)float屬性與margin屬性進(jìn)行控制。
3.3.5公司新聞模塊
公司網(wǎng)站的新聞?wù)故灸K主要采用了table表格進(jìn)行布局，在后期新聞條目較多、一個(gè)頁(yè)面的展示效果不好時(shí)，就要考慮到新聞頁(yè)面的翻頁(yè)問(wèn)題，需要通過(guò)JS代碼來(lái)實(shí)現每個(gè)頁(yè)面新聞條數多少以及上下頁(yè)的翻轉。
4網(wǎng)站測試
網(wǎng)站測試作為網(wǎng)站設計與制作的最后一個(gè)環(huán)節，它對網(wǎng)站設計與制作的質(zhì)量有較大影響，在測試時(shí)，主要針對靜態(tài)網(wǎng)站可能存在的問(wèn)題進(jìn)行了測試。
4.1鏈接測試
此次的網(wǎng)站鏈接測試主要針對以下三個(gè)方面：
�、贉y試網(wǎng)站上頁(yè)面的所有鏈接是否依照設計思路鏈接到了正確的頁(yè)面；
�、跍y試鏈接所指向的網(wǎng)站頁(yè)面是否存在；
�、蹨y試整個(gè)網(wǎng)站沒(méi)有孤立的頁(yè)面，即每一個(gè)界面都應當有鏈接指向。
4.2瀏覽器測試
用DIV＋CSS制作網(wǎng)頁(yè)時(shí)，需要測試瀏覽器兼容，在測試時(shí)主要針對以下瀏覽器進(jìn)行了測試：IE瀏覽器、火狐瀏覽器、360極速瀏覽器、360安全瀏覽器、谷歌瀏覽器和搜狗瀏覽器，測試結果通過(guò)。
5結語(yǔ)
本文設計并實(shí)現了信運通信息產(chǎn)業(yè)有限公司的網(wǎng)站，整體設計制作效果較好，滿(mǎn)足了公司的網(wǎng)站建設需要，得到了公司的認可，后期需要在代碼的簡(jiǎn)潔性上進(jìn)行改進(jìn)。
參考文獻
1李兆明．商業(yè)網(wǎng)站設計與制作［D］．成都：電子科技大學(xué)，2013
2高原．服務(wù)器端javascript技術(shù)研究［J］．信息與電腦（理論版），2012（1）
3張少艾．白城科技人才網(wǎng)的設計與實(shí)現［D］．長(cháng)春：吉林大學(xué)，2012
4趙羚云．網(wǎng)站設計及網(wǎng)頁(yè)制作技巧［J］．硅谷，2012（14）
【信息產(chǎn)業(yè)公司網(wǎng)站設計與實(shí)現論文】相關(guān)文章：
網(wǎng)站設計的實(shí)現技術(shù)研究論文10-24
基于PHP的個(gè)人網(wǎng)站設計與實(shí)現論文11-17
基于PHP的個(gè)人網(wǎng)站設計與實(shí)現論文介紹11-17
PHP的開(kāi)發(fā)環(huán)境搭建與網(wǎng)站設計實(shí)現分析論文11-09
淺析數字圖書(shū)館網(wǎng)站設計與實(shí)現的論文11-21
酒店管理的設計與實(shí)現論文01-14
GIS設計與實(shí)現論文范例07-15
展館漫游系統設計與實(shí)現論文11-15