中小型企業類門戶網站分析與設計

劉松

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

關鍵詞：門戶網站； 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 引言

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

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

1 中小型企業類門戶網站的整體布局

1.1 中小型企業門戶類網站的設計分析

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

1.2中小型企業門戶類網站的架構設計

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

根據圖2所示的頁面原型結構圖，研究設計出如圖3所示的頁面總體框架圖。頁面的總體框架布局選用了垂直的上、中、下結構。本文采用DIV+CSS的方法實現該頁面總體框架結構。主要代碼如下：

2 中小型企業類門戶網站的內容設計

2.1 中小型企業類門戶網站的頁面頭部模塊設計

中小型企業類門戶網站的頁面頭部模塊主要包含網頁頭DIV區域和網頁導航菜單DIV區域。其中，Header區域主要用于提供網站的Logo圖片顯示以及網站內容搜索功能的實現。中小型企業類門戶網站的頁面頭部模塊主要結構代碼如下：

2.2 中小型企業類門戶網站的Banner區設計

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

2.3中小型企業類門戶網站的資訊區設計

中小型企業類門戶網站的首頁咨詢區域設計分為3個模塊：活動新聞模塊、創新展示模塊和獲獎產品展示模塊。主要的實現代碼如下：

3 結束語

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

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

參考文獻：

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

[2]鄭婭峰，張永強. 網頁設計與開放 [ M] .北京：清華大學出版社，2016 .