基于Web前端開發(fā)的公司網(wǎng)站設(shè)計(jì)研究

高佳憶 魏乃曉 徐文輝 賈燕

摘要：對于網(wǎng)絡(luò)科技有限公司而言，建好、管理好企業(yè)網(wǎng)站，已經(jīng)成為企業(yè)電子商務(wù)應(yīng)用成功與否的關(guān)鍵。文章以企業(yè)網(wǎng)站創(chuàng)建為基礎(chǔ)，通過設(shè)計(jì)流程分析、布局分析和導(dǎo)航分析，做出網(wǎng)站設(shè)計(jì)的基本框架?；赑S， HTML+JavaScript等技術(shù)完成公司網(wǎng)頁的主頁設(shè)計(jì)。

關(guān)鍵詞：前端技術(shù)；HTML； CSS； JavaScript

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

當(dāng)前已有的網(wǎng)站建設(shè)大多基于Web前端開發(fā)，其中涉及的開發(fā)工具如WebStorm，Adobe Dreamweaver，涉及的應(yīng)用包括了層疊樣式表（Cascading Style Sheets，CSS）規(guī)則、JavaScript和Jquery庫。基于以上工具和軟件實(shí)現(xiàn)某企業(yè)網(wǎng)站的設(shè)計(jì)，成為基于Web前端開發(fā)的研究關(guān)鍵。

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

其次，JavaScript是在HTML的基礎(chǔ)上，以實(shí)現(xiàn)開發(fā)交互式的Web頁面。JavaScript的出現(xiàn)使得它可以實(shí)現(xiàn)實(shí)時(shí)、動態(tài)和交互式Web頁面和用戶之間的關(guān)系。這是JavaScript和HTML DOM構(gòu)成網(wǎng)頁的行為。JavaScript程序?qū)嶋H上是一個(gè)文本文件文檔，當(dāng)使用嵌入在HTML文檔的需求。因此，可以使用任何文本編輯器軟件開發(fā)JavaScript程序。JavaScript來提高Web頁面的交互性；JavaScript可以響應(yīng)用戶的操作，提交表單做立即檢查，不需要浪費(fèi)時(shí)間CGI身份驗(yàn)證。

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

1 企業(yè)網(wǎng)站框架分析

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

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

多行三列模式的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規(guī)則建立三行三列的基本設(shè)計(jì)框架。實(shí)現(xiàn)網(wǎng)站的基本框架建設(shè)，加入JavaScript編寫模塊內(nèi)容。

2 企業(yè)網(wǎng)站導(dǎo)航分析

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

逐步設(shè)置樣式，讓菜單越來越美。

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

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

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

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

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

這條規(guī)則定義了 li標(biāo)記、行內(nèi)浮動、行內(nèi)顯示、寬度、高度、字體等樣式。

（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； }

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

（4）定義嵌套列表項(xiàng)和子菜單超鏈接的規(guī)則。

ul li ul li{height：25px； }

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

此處第1條是設(shè)置子菜單的列表項(xiàng)目高度為25px，以區(qū)別菜單為主菜單列表項(xiàng)；第2條規(guī)則是子菜單項(xiàng)中的超鏈接背景改為#666，并將行高調(diào)整為24px。

（5）定義鼠標(biāo)滑過某個(gè)菜項(xiàng)時(shí)的樣式。

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

3 企業(yè)網(wǎng)站總體設(shè)計(jì)

通過主題設(shè)計(jì)和版式設(shè)計(jì)完成總計(jì)架構(gòu)的設(shè)計(jì)：主題突出，清楚簡潔，利用簡單明確的文字和圖片，對于一些LOGO使用徽標(biāo)。借助版式編排布局的合理性，充分利用與平面設(shè)計(jì)效果。企業(yè)網(wǎng)站的總體建設(shè)頁面如圖2—3所示。在總體設(shè)計(jì)方面，通過JavaScript和調(diào)用jQuery庫實(shí)現(xiàn)前端的頁面研發(fā)。

4 結(jié)語

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

[參考文獻(xiàn)]

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

[2]王政.Web前端開發(fā)技術(shù)以及優(yōu)化研究[J].電腦知識與技術(shù)，2013（22）：5037-5038.

[3]電腦培訓(xùn)學(xué)校叢書編委會網(wǎng)頁設(shè)計(jì)與網(wǎng)站建設(shè)培訓(xùn)教程[M].北京：機(jī)械工業(yè)出版社，2003.

[4]王聰.社交網(wǎng)絡(luò)服務(wù)系統(tǒng)Web前端設(shè)計(jì)與實(shí)現(xiàn)[D].成都：電子科技大學(xué)，2012.

[5]儲久良.Web前端開發(fā)技術(shù)[M].北京：清華大學(xué)出版社，2013.