劉松

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

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

中圖分類號(hào)：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ò)信息時(shí)代的到來，種類繁多的企業(yè)類門戶網(wǎng)站得到了高度關(guān)注與重視普及，越來越多的企業(yè)開始著手建設(shè)具有自身特色的企業(yè)門戶網(wǎng)站，以期借助這些門戶網(wǎng)站能夠擴(kuò)展企業(yè)的日常實(shí)際業(yè)務(wù)量，進(jìn)而大幅增加企業(yè)的經(jīng)濟(jì)效益[1]。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3 結(jié)束語(yǔ)

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

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

參考文獻(xiàn)：

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

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