中小型企業(yè)類門戶網(wǎng)站分析與設(shè)計

劉松

摘要：隨著信息時代的到來，企業(yè)類門戶網(wǎng)站得到了極大地普及，越來越多的企業(yè)開始著手建設(shè)具有自身企業(yè)特色的門戶網(wǎng)站，期待這些門戶網(wǎng)站能夠擴展企業(yè)的業(yè)務(wù)量，從而大幅增加企業(yè)的效益。本文提出了一種采用HTML、CSS及JavaScript技術(shù)實現(xiàn)小型企業(yè)類門戶網(wǎng)站的具體分析和設(shè)計方法，希望能對中小型企業(yè)類門戶網(wǎng)站的快速，有效建立起到一定的促進作用。

關(guān)鍵詞：門戶網(wǎng)站； HTML； CSS； JavaScript

中圖分類號：TP302.1

Abstract：With the advent of the information age， enterprise portal website has been greatly popularized， more and more enterprises begin created their portal website and look forward to the expansion of business volume and increase the enterprise's benefit. This paper presents the specific analysis and design of a kind of method to achieve small enterprise portal website by using HTML， CSS and javaScript technology. It will create the small and medium scale enterprises portal website quickly and effectively.

Key words： portal WebSite； HTML； CSS； JavaScript

0 引言

隨著網(wǎng)絡(luò)信息時代的到來，種類繁多的企業(yè)類門戶網(wǎng)站得到了高度關(guān)注與重視普及，越來越多的企業(yè)開始著手建設(shè)具有自身特色的企業(yè)門戶網(wǎng)站，以期借助這些門戶網(wǎng)站能夠擴展企業(yè)的日常實際業(yè)務(wù)量，進而大幅增加企業(yè)的經(jīng)濟效益[1]。

本文采用HTML、CSS及JavaScript技術(shù)實現(xiàn)中小型企業(yè)類門戶網(wǎng)站的快速建立，該設(shè)計方案能夠利于日后的網(wǎng)站升級和維護操作，具有一定的現(xiàn)實意義和實用價值。

1 中小型企業(yè)類門戶網(wǎng)站的整體布局

1.1 中小型企業(yè)門戶類網(wǎng)站的設(shè)計分析

本文以一個中小型電腦有限公司的網(wǎng)站為例，介紹了中小型企業(yè)類門戶網(wǎng)站的整體布局分析和設(shè)計方式。該網(wǎng)站主要包含的功能有網(wǎng)站首頁、公司介紹、新聞資訊、產(chǎn)品報價、三大件報價、服務(wù)支持、人才招聘、員工風(fēng)采和客戶留言等分組頁面構(gòu)成。網(wǎng)站的功能設(shè)計框圖如圖1所示。

1.2中小型企業(yè)門戶類網(wǎng)站的架構(gòu)設(shè)計

中小型企業(yè)門戶類網(wǎng)站的首頁效果原型圖如圖2所示。頁面頭部模塊包含中小型企業(yè)門戶類網(wǎng)站的LOGO信息和搜索欄。導(dǎo)航條模塊包含整個中小型企業(yè)門戶類網(wǎng)站的子頁面導(dǎo)航菜單。頁面的主體由網(wǎng)站公司的Banner條和3類網(wǎng)站資訊組成，頁腳模塊則包含了公司的聯(lián)系方式以及網(wǎng)站導(dǎo)航等信息[2]。

根據(jù)圖2所示的頁面原型結(jié)構(gòu)圖，研究設(shè)計出如圖3所示的頁面總體框架圖。頁面的總體框架布局選用了垂直的上、中、下結(jié)構(gòu)。本文采用DIV+CSS的方法實現(xiàn)該頁面總體框架結(jié)構(gòu)。主要代碼如下：

2 中小型企業(yè)類門戶網(wǎng)站的內(nèi)容設(shè)計

2.1 中小型企業(yè)類門戶網(wǎng)站的頁面頭部模塊設(shè)計

中小型企業(yè)類門戶網(wǎng)站的頁面頭部模塊主要包含網(wǎng)頁頭DIV區(qū)域和網(wǎng)頁導(dǎo)航菜單DIV區(qū)域。其中，Header區(qū)域主要用于提供網(wǎng)站的Logo圖片顯示以及網(wǎng)站內(nèi)容搜索功能的實現(xiàn)。中小型企業(yè)類門戶網(wǎng)站的頁面頭部模塊主要結(jié)構(gòu)代碼如下：

2.2 中小型企業(yè)類門戶網(wǎng)站的Banner區(qū)設(shè)計

中小型企業(yè)類門戶網(wǎng)站的Banner區(qū)域設(shè)計的目的是用來發(fā)布公司網(wǎng)站的最新活動以及新產(chǎn)品展示等內(nèi)容，旨在吸引用戶，提高網(wǎng)站用戶訪問量。該區(qū)域通過利用HTML代碼顯示圖片的形式來展現(xiàn)公司的風(fēng)采。并用CSS代碼控制圖片的寬度和高度，盡量使得展示圖片在不同類型的瀏覽器中能夠保持效果一致。主要的HTML實現(xiàn)代碼如下：

2.3中小型企業(yè)類門戶網(wǎng)站的資訊區(qū)設(shè)計

中小型企業(yè)類門戶網(wǎng)站的首頁咨詢區(qū)域設(shè)計分為3個模塊：活動新聞模塊、創(chuàng)新展示模塊和獲獎產(chǎn)品展示模塊。主要的實現(xiàn)代碼如下：

3 結(jié)束語

本文給出了一套切實可行的中小型企業(yè)類門戶網(wǎng)站分析與設(shè)計解決方案，該方案通過

HTML、CSS及JavaScript技術(shù)實現(xiàn)了中小型企業(yè)類門戶網(wǎng)站分析和設(shè)計全過程及指定效果展示。實際應(yīng)用效果表明，該方案能夠擴展中小型企業(yè)的日常業(yè)務(wù)量，從而大幅增加企業(yè)的效益。進一步，也將對中小型企業(yè)類門戶網(wǎng)站的快速和有效建立能起到有益、且良好的促進作用。

參考文獻：

[1]劉玉紅. HTML5+CSS3+JavaScript[M]. 北京：清華大學(xué)出版社，2015 .

[2]鄭婭峰，張永強. 網(wǎng)頁設(shè)計與開放 [ M] .北京：清華大學(xué)出版社，2016 .