基于Web前端開發的公司網站設計研究

高佳憶 魏乃曉 徐文輝 賈燕

摘要：對于網絡科技有限公司而言，建好、管理好企業網站，已經成為企業電子商務應用成功與否的關鍵。文章以企業網站創建為基礎，通過設計流程分析、布局分析和導航分析，做出網站設計的基本框架。基于PS， HTML+JavaScript等技術完成公司網頁的主頁設計。

關鍵詞：前端技術；HTML； CSS； JavaScript

隨著移動互聯網技術的快速發展，基于Web前端開發的網站技術也日趨完善[1]。然而，當前已有的企業網站主要有以下缺點：Web網站內容單薄，更新滯后；結構層次重點失衡，用戶體驗效果不佳[2]；部分網頁制作粗糙，或過于花哨[3]。為了有效實現企業網站的莊重和設計感，在以下方面深入設計和研究：在排字方面，以簡潔大眾化的字體為主[4]；在圖像切換效應方面，基于圖像形式，通過完整的網站任務，如復雜的交互、網頁動畫、UI設計、后期維護，主頁簡單、快速和有效地完成網站提供或用戶需要的服務、功能和目標[5]。

當前已有的網站建設大多基于Web前端開發，其中涉及的開發工具如WebStorm，Adobe Dreamweaver，涉及的應用包括了層疊樣式表（Cascading Style Sheets，CSS）規則、JavaScript和Jquery庫。基于以上工具和軟件實現某企業網站的設計，成為基于Web前端開發的研究關鍵。

首先，通過使用CSS樣式設置頁面的格式，實現頁面的內容與表現形式分離。頁面內容存放在HTML文檔中，而用于定義表現形式的CSS規則存放在另一個文件中或HTML文檔的某一部分，通常為文件頭部分。將內容與表現形式分離，不僅可使維護站點的外觀更加容易，而且還可以使HTML文檔代碼更加簡練，縮短瀏覽器的加載時間。

其次，JavaScript是在HTML的基礎上，以實現開發交互式的Web頁面。JavaScript的出現使得它可以實現實時、動態和交互式Web頁面和用戶之間的關系。這是JavaScript和HTML DOM構成網頁的行為。JavaScript程序實際上是一個文本文件文檔，當使用嵌入在HTML文檔的需求。因此，可以使用任何文本編輯器軟件開發JavaScript程序。JavaScript來提高Web頁面的交互性；JavaScript可以響應用戶的操作，提交表單做立即檢查，不需要浪費時間CGI身份驗證。

最后，通過jQuery這一JavaScrip庫，它以寫更少的代碼、做更多的事情為宗旨。jQuery是一個快速、簡潔的JavaScript庫，使用戶能夠方便地遍歷HTML Documents、操作文檔對象模型（Document Object Model，DOM）、處理事件、實現動畫效果和提供Ajax交互，此外，jQuery兼容CSS3.0及各種瀏覽器。

1 企業網站框架分析

設計一個主網頁和6個副網頁，總網頁主要是給瀏覽者簡單地介紹公司的業務，美觀形象。副網頁以導航欄關于企業、企業營銷、網站建設、設計服務、人才招募、聯系我們，深入介紹公司的業務。目前，國內大型商業網站基本上是多行多列模式布局。例如中央人民政府、中關村在線、淘寶網、騰訊、網易、新浪、搜狐、人民網等網站采用“多行三列模式”。公安部、財政部、阿里巴巴、網上超市1號店、去哪兒網、趕集網等網站采用“多行四列模式”。

試圖通過“三行模式或三列模式”展開設計，此模式的特點是把整個頁面水平、垂直分成3個區域，其中“三行模式”將頁面頭部、主體及頁腳3部分；“三列模式”將頁面分成左、中、右3個部分。

多行三列模式的CSS定義

/* layout5.css */

*{font-size：16px； margin：0 auto； padding：Opx； }

#container{background：#334455； width：100%；height：700px； }

#header{background：#FF4455 ； width：100%；height：150px； }

#logo{background：#FFDD55 ； width：100%；height：lOOpx； }

#nav{background：#FFDD99；width：100%；height：5 Opx； }

#main{background：#33DD55； width：100%；height：5OOpx； }

#left{background：#33FBFB； width：33%； height：100%；float：left； }（只顯示部分代碼）

如圖1所示，通過CSS規則建立三行三列的基本設計框架。實現網站的基本框架建設，加入JavaScript編寫模塊內容。

2 企業網站導航分析

導航菜單是網站重要的組成部分。導航菜單的設計關系著網站的可用性和用戶體驗，有吸引力的導航能夠吸引用戶去瀏覽更多的網站內容。設計一個優秀的頁面導航會給網站增色不少。網站菜單表現形式豐富多樣。從菜單層次看，可以分為一級、二級和多級菜單。從排列方式上看，可分為水平導航、垂直導航菜單。從技術實現角度上看，導航菜單通常采用無序列表、表格、超鏈接和樣式表相結合的方法來實現，也可以使用如CSS3 Menu，jQuery等第三方插件技術來實現。借助JavaScript設計網站下拉菜單的案例比較多見，而采用純CSS設計網站下拉菜單需要對樣式進行詳細的定義才能實現。不過要考慮到不同瀏覽器之間的兼容性。編寫下拉菜單的HTML代碼。

逐步設置樣式，讓菜單越來越美。

（1）定義ul的樣式，設置邊距和填充均為0px。

ul{margin：Opx； padding：Opx； }/*考慮到不同瀏覽器的兼容性，去除列表項前的符號*/

（2）定義列表樣式，由垂直排列改為水平排列。

ul li{height：30px； width：115px； list-style：none；floatleft；

display：inline； font：0.9em Arial， Heletica， sans-serif； }

這條規則定義了 li標記、行內浮動、行內顯示、寬度、高度、字體等樣式。

（3）定義超鏈接樣式。

ul li a{color：#FFF； width：113px； margin：0px；padding：Opx Opx Opx 8px；

text-decoration：none； display：block；background：#808080；

line-height：29px； border-right：lpx solid #ccc； border-bottom：

lpx solid #ccc； }

這一條規則的作用就是加上背景和菜單間的隔離線，把默認有下劃線藍色的文字變成白色無下劃線。

（4）定義嵌套列表項和子菜單超鏈接的規則。

ul li ul li{height：25px； }

ul li ul li a {background：#666； line-height：24px； }

此處第1條是設置子菜單的列表項目高度為25px，以區別菜單為主菜單列表項；第2條規則是子菜單項中的超鏈接背景改為#666，并將行高調整為24px。

（5）定義鼠標滑過某個菜項時的樣式。

ul li a：hover{background：#666； border-bottom：lpxdashed #FF0000； }

3 企業網站總體設計

通過主題設計和版式設計完成總計架構的設計：主題突出，清楚簡潔，利用簡單明確的文字和圖片，對于一些LOGO使用徽標。借助版式編排布局的合理性，充分利用與平面設計效果。企業網站的總體建設頁面如圖2—3所示。在總體設計方面，通過JavaScript和調用jQuery庫實現前端的頁面研發。

4 結語

介紹了JavaScript，CSS，jQuery以及前端布局的制作做法，詳細說明了企業網站前端的主要設計流程，以及網站中的主要功能。目前不足之處在于部分框架的布局的局限，下一步工作將著重加強前端技術的研究和應用。

[參考文獻]

[1]李幫誠.Web前端開發技術與研究[J].電腦知識與技術，2016（29）：47-49.

[2]王政.Web前端開發技術以及優化研究[J].電腦知識與技術，2013（22）：5037-5038.

[3]電腦培訓學校叢書編委會網頁設計與網站建設培訓教程[M].北京：機械工業出版社，2003.

[4]王聰.社交網絡服務系統Web前端設計與實現[D].成都：電子科技大學，2012.

[5]儲久良.Web前端開發技術[M].北京：清華大學出版社，2013.