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