企業(yè)網(wǎng)站設(shè)計(jì)Web前端開(kāi)發(fā)研究

發(fā)布：2019-01-09 17:14:18 瀏覽：5323

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

當(dāng)前已有的網(wǎng)站建設(shè)大多基于Web前端開(kāi)發(fā)，其中涉及的開(kāi)發(fā)工具如Webstorm，AdobeDreamweaver，涉及的應(yīng)用包括了層疊樣式表(CascadingStyleSheets，CSS)規(guī)則Javascript和Jquery庫(kù)?；谝陨瞎ぞ吆蛙浖?shí)現(xiàn)某企業(yè)網(wǎng)站的設(shè)計(jì)，成為基于Web前端開(kāi)發(fā)的研究關(guān)鍵。

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

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

最后，通過(guò)jquery這Javascrip庫(kù)，它以寫(xiě)更少的代碼做更多的事情為宗旨。jquery/是一個(gè)快速、簡(jiǎn)潔的Javascript庫(kù)，使用戶能夠方便地遍歷TMLDocuments、操作文檔對(duì)象模型(DocumentObjectModel，DOM)、處理事件、實(shí)現(xiàn)動(dòng)畫(huà)效果和提供Ajax交互，此外，Jquery兼容CSS3.0及各種瀏覽器。

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

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

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

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)秀的頁(yè)面導(dǎo)航會(huì)給網(wǎng)站增色不少。網(wǎng)站菜單表現(xiàn)形式豐富多樣。從菜單層次看，可以分為一級(jí)、二級(jí)和多級(jí)菜單。從排列方式上看，可分為水平導(dǎo)航、垂直導(dǎo)航菜單。從技術(shù)實(shí)現(xiàn)角度上看，導(dǎo)航菜單通常采用無(wú)序列表、表格、超鏈接和樣式表相結(jié)合的方法來(lái)實(shí)現(xiàn)，也可以使用如CSS3Menu，Jquery等第三方插件技術(shù)來(lái)實(shí)現(xiàn)。借助JavascriptE設(shè)計(jì)網(wǎng)站下拉菜單的案例比較多見(jiàn)，而采用純CSS設(shè)計(jì)網(wǎng)站下拉菜單需要對(duì)樣式進(jìn)行詳細(xì)的定義才能實(shí)現(xiàn)。不過(guò)要考慮到不同瀏覽器之間的兼容性。編寫(xiě)下拉菜單的HTML代碼。

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

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

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