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