朱育林

摘 要：當(dāng)前各種現(xiàn)代高新科技的發(fā)展，將人們帶入了互聯(lián)網(wǎng)時(shí)代，在很大程度上改變了人們的生活方式。企業(yè)宣傳、產(chǎn)品銷(xiāo)售以及服務(wù)供給等方面都能通過(guò)網(wǎng)站來(lái)實(shí)現(xiàn)，不僅提高了企業(yè)運(yùn)營(yíng)效率，而且在很大程度上優(yōu)化了用戶(hù)體驗(yàn)，為人們的生產(chǎn)及生活活動(dòng)帶來(lái)極大便利。因此，公司網(wǎng)站設(shè)計(jì)已經(jīng)成為各大企業(yè)研究的重點(diǎn)課題之一，唯有提高網(wǎng)站整體設(shè)計(jì)效果，才能為公司整體運(yùn)營(yíng)活動(dòng)提供良好助力，促進(jìn)公司發(fā)展。本文主要分析了基于Web前端開(kāi)發(fā)的公司網(wǎng)站設(shè)計(jì)。

關(guān)鍵詞：公司網(wǎng)站設(shè)計(jì);前端技術(shù);HTML;JavaScript

中圖分類(lèi)號(hào)：TP393.092 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1003-5168（2019）28-0036-03

Design of Corporate Website

Based on Web Front End Development

ZHU Yulin

（Zhangzhou Institute of Science and Engineering，Zhangzhou Fujian 363005）

Abstract： At present， the development of all kinds of modern high-tech has brought people into the Internet era and changed people's life style to a great extent.Corporate publicity， product sales， and service supply can be achieved through websites， not only improving the efficiency of business operations， but also optimizing the user experience to a large extent， bringing great convenience to people's production and life activities.Therefore， the design of the company's website has become one of the key topics in the research of major enterprises. Only by improving the overall design effect of the website can it provide a good impetus for the overall operation of the company and promote the development of the company.This paper mainly analyzed the design of the company's website based on Web front-end development.

Keywords： company website design;front end technology;HTML;JavaScript

公司網(wǎng)站設(shè)計(jì)效果直接影響客戶(hù)體驗(yàn)，關(guān)乎公司未來(lái)發(fā)展。因此，網(wǎng)站設(shè)計(jì)人員在設(shè)計(jì)工作開(kāi)始之前要充分了解公司生產(chǎn)經(jīng)營(yíng)中的各個(gè)細(xì)節(jié)，在網(wǎng)站中充分突出企業(yè)特色，通過(guò)優(yōu)質(zhì)的網(wǎng)站設(shè)計(jì)效果實(shí)現(xiàn)對(duì)公司情況及所生產(chǎn)產(chǎn)品（或服務(wù)）的高效宣傳，拓寬企業(yè)宣傳與銷(xiāo)售渠道。在設(shè)計(jì)實(shí)踐中，如何有效利用Web前端技術(shù)，以促進(jìn)整體設(shè)計(jì)效果的提高值得設(shè)計(jì)者深思。

1 目前公司網(wǎng)站的主要缺陷及對(duì)策

目前，計(jì)算機(jī)技術(shù)、通信技術(shù)及網(wǎng)絡(luò)技術(shù)等現(xiàn)代高新科技的發(fā)展，為Web前端開(kāi)發(fā)等相關(guān)應(yīng)用技術(shù)的研發(fā)與使用提供了良好的外部環(huán)境。但是，經(jīng)調(diào)查分析發(fā)現(xiàn)，目前我國(guó)已有公司網(wǎng)站的整體開(kāi)發(fā)與設(shè)計(jì)還存在較為明顯的缺陷，主要體現(xiàn)在：①相當(dāng)一部分Web網(wǎng)站中貼合實(shí)際的內(nèi)容較少，并不具有良好的實(shí)用性，而且網(wǎng)站更新相對(duì)滯后，不利于優(yōu)質(zhì)服務(wù)的供給;②網(wǎng)站整體結(jié)構(gòu)層次比較混亂，難以有效突出所要表達(dá)的重點(diǎn)內(nèi)容，導(dǎo)致用戶(hù)在實(shí)際應(yīng)用過(guò)程中體驗(yàn)效果不佳;③部分網(wǎng)頁(yè)的實(shí)際制作效果略顯粗糙，太過(guò)花哨，擾亂用戶(hù)視線，無(wú)法起到良好的宣傳效果[1-3]。

為解決上述問(wèn)題，使公司網(wǎng)站呈現(xiàn)出良好的莊重感與設(shè)計(jì)感，需要從以下幾個(gè)方面進(jìn)行深入的設(shè)計(jì)與優(yōu)化：①網(wǎng)站文字排版方面，需要盡量采用簡(jiǎn)潔性與大眾性的字體和樣式;②而在圖像切換效應(yīng)上，把圖像形式作為基礎(chǔ)，以?xún)?yōu)化網(wǎng)站任務(wù)建設(shè)為基準(zhǔn);③網(wǎng)站主頁(yè)部分應(yīng)該簡(jiǎn)約而不簡(jiǎn)單，在給用戶(hù)帶來(lái)清晰視野的同時(shí)，獲得更多的信息，快速而高效地完成網(wǎng)站服務(wù)供給，便于用戶(hù)找到所需服務(wù)和功能，以達(dá)成企業(yè)營(yíng)銷(xiāo)目標(biāo)。

2 Web前端開(kāi)發(fā)設(shè)計(jì)技術(shù)

目前，國(guó)內(nèi)各公司既有網(wǎng)站的建設(shè)大部分都是基于Web前端開(kāi)發(fā)，所應(yīng)用到的主要開(kāi)發(fā)工具包括Adobe Dreamweaver、WebStorm等，相關(guān)應(yīng)用主要有層疊樣式表（Cascading Style Sheets，CSS）規(guī)則、JavaScript以及jQuery庫(kù)。利用以上幾種工具和軟件對(duì)公司網(wǎng)站進(jìn)行籌劃設(shè)計(jì)，已經(jīng)成為當(dāng)前對(duì)Web網(wǎng)站進(jìn)行前端開(kāi)發(fā)最為主流的方式，實(shí)際應(yīng)用效果較好。①利用CSS規(guī)則完成對(duì)網(wǎng)頁(yè)頁(yè)面格式的設(shè)計(jì)，使頁(yè)面整體內(nèi)容和表現(xiàn)形式之間實(shí)現(xiàn)相互分離。將頁(yè)面內(nèi)容保存在HTML文檔，并將CSS規(guī)則（用作定義表現(xiàn)形式）存放于另一文件當(dāng)中，抑或是成為HTML文檔中的一部分。通過(guò)此種設(shè)計(jì)方式，使內(nèi)容和表現(xiàn)形式間實(shí)現(xiàn)有效分離，不但有利于站點(diǎn)外觀維護(hù)等相關(guān)工作的開(kāi)展，還能使HTML文件代碼的整體呈現(xiàn)效果具有更強(qiáng)的簡(jiǎn)潔性，在最大程度上縮減瀏覽器實(shí)際加載所需的時(shí)間[4-6]。②JavaScript主要是將HTML作為基礎(chǔ)，完成對(duì)交互式Web頁(yè)面的開(kāi)發(fā)。通過(guò)應(yīng)用JavaScript，能使Web頁(yè)面與用戶(hù)間的關(guān)系更加實(shí)時(shí)化、動(dòng)態(tài)化，并且呈現(xiàn)出更強(qiáng)的交互效果。從本質(zhì)上講，JavaScript程序?qū)儆谖谋疚臋n，可以通過(guò)應(yīng)用任意一種文本編輯工具實(shí)現(xiàn)對(duì)JavaScript程序的有效開(kāi)發(fā)。通過(guò)利用JavaScript，可以大幅提高Web頁(yè)面的實(shí)際交互作用與效果。同時(shí)，JavaScript還能實(shí)現(xiàn)對(duì)用戶(hù)具體操作過(guò)程的有效響應(yīng)，且不需要浪費(fèi)太多時(shí)間用作對(duì)CGI身份的驗(yàn)證。③jQuery是一個(gè)優(yōu)秀的JavaScrip庫(kù)，其以寫(xiě)更少的代碼、做更多的事情為宗旨。jQuery是一個(gè)快速、簡(jiǎn)潔的JavaScript庫(kù)，使用戶(hù)能夠方便地遍歷HTML Documents、操作DOM、處理事件、實(shí)現(xiàn)動(dòng)畫(huà)效果和提供Ajax交互。除此之外，jQuery還兼容CSS3.0及各種瀏覽器。

3 公司網(wǎng)站框架設(shè)計(jì)

本次研究所設(shè)計(jì)的Web網(wǎng)站主要包括主網(wǎng)頁(yè)（1個(gè)）和副網(wǎng)頁(yè)（6個(gè)）。其中，網(wǎng)站的主網(wǎng)頁(yè)能為用戶(hù)簡(jiǎn)單介紹公司概況以及經(jīng)營(yíng)業(yè)務(wù)范圍，通過(guò)圖片等形式展現(xiàn)公司形象。而副網(wǎng)頁(yè)則主要以導(dǎo)航欄為主，包括“關(guān)于企業(yè)”“網(wǎng)站建設(shè)”“企業(yè)營(yíng)銷(xiāo)”“設(shè)計(jì)服務(wù)”“人員招聘”以及“聯(lián)系我們”，從多方面、多層次對(duì)公司相關(guān)業(yè)務(wù)和產(chǎn)品等內(nèi)容進(jìn)行細(xì)致介紹。就我國(guó)各個(gè)大型企業(yè)應(yīng)用實(shí)際來(lái)看，大型商業(yè)網(wǎng)站通常采取多行多列的模式布局方式，如淘寶網(wǎng)、騰訊網(wǎng)、中關(guān)村在線、新浪、網(wǎng)易及人民網(wǎng)等所應(yīng)用的都是多行三列模式，而國(guó)家財(cái)政部、趕集網(wǎng)等所采用的均為多行四列模式。

在此，筆者主要研究通過(guò)三行模式（抑或是三列模式）對(duì)Web網(wǎng)站進(jìn)行設(shè)計(jì)，這一模式最主要的特征在于將每個(gè)頁(yè)面從水平方向（抑或是垂直方向）分為三個(gè)相對(duì)獨(dú)立的區(qū)域。其CSS定義為：

/* layout5.css */

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

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

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

#logo{background：#FFDD55;width：100%;height：100px;}

#nav{background：#FFDD99;width：100%;height：50px;}

#main{background：#33DD55;width：100%;height：500px;}

#left{background：#33FBFB;width：33%;height：100%;float：left;}

由于文章篇幅限制，只呈現(xiàn)部分代碼內(nèi)容。

4 公司網(wǎng)站導(dǎo)航設(shè)計(jì)

導(dǎo)航菜單屬于一個(gè)網(wǎng)站中的基礎(chǔ)組成部分，也是每一個(gè)網(wǎng)站的必備要素，其實(shí)際設(shè)計(jì)效果關(guān)乎網(wǎng)站整體的實(shí)用性與用戶(hù)的觀感體驗(yàn)。目前，網(wǎng)站設(shè)計(jì)樣式繁多，如果能設(shè)計(jì)出具有良好吸引力的公司網(wǎng)站導(dǎo)航，便能促進(jìn)公司宣傳效果的提升?？梢哉f(shuō)，頁(yè)面導(dǎo)航是網(wǎng)站設(shè)計(jì)中最為重要的工作內(nèi)容之一，優(yōu)質(zhì)的導(dǎo)航會(huì)使網(wǎng)站整體更具吸引力。對(duì)于網(wǎng)站菜單的表現(xiàn)形式，其整體效果應(yīng)更為豐富化、多樣化;對(duì)于菜單層次，通常要分成一級(jí)菜單、二級(jí)菜單以及多級(jí)菜單;對(duì)于技術(shù)實(shí)現(xiàn)，網(wǎng)站導(dǎo)航菜單可以采取無(wú)序列表、樣式表、表格及超鏈接等元素相結(jié)合的方式實(shí)現(xiàn)，還可以結(jié)合第三方插件技術(shù)（比如CSS3 Menu、jQuery等）完成。在實(shí)際應(yīng)用中，通過(guò)JavaScript對(duì)下拉菜單進(jìn)行設(shè)計(jì)的情況較多，若想獲得優(yōu)質(zhì)的純CSS設(shè)計(jì)網(wǎng)站下拉菜單，需要就其樣式做出詳細(xì)定義。而在這個(gè)過(guò)程中，首先要考量不同瀏覽器間具備的兼容性，以促進(jìn)下拉菜單HTML代碼的完善化。對(duì)菜單樣式進(jìn)行設(shè)計(jì)，使菜單整體呈現(xiàn)出更為優(yōu)質(zhì)的美觀性。

①首先要針對(duì)ul樣式進(jìn)行定義處理，并使邊距與填充均呈現(xiàn)為0px。

ul{margin： 0px;padding： 0px;}/*

由于考慮到瀏覽器之間的兼容性和適用性，需要將列表項(xiàng)前的*/符號(hào)部分刪除。

②對(duì)列表樣式進(jìn)行定義處理，使原本的垂直排列轉(zhuǎn)變?yōu)樗脚帕小?/p>

ul li{height：30px;width：115px;list-style：none;float：left;

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

在這一條規(guī)則中，完成了針對(duì)顯示、高度、寬度及字體等相關(guān)樣式的定義。

③超鏈接樣式的定義處理。

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

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

line-height：29px;border-right：1px solid #ccc;borderbottom：

1px solid #ccc;}

設(shè)計(jì)這一條規(guī)則的作用是在背景與菜單間增加隔離線，更改文字形式。

④嵌套列表項(xiàng)以及子菜單超鏈接規(guī)則的定義處理。

ul li ul li{height：25px;}

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

此過(guò)程的首要任務(wù)是將與子菜單相互對(duì)應(yīng)的列表項(xiàng)目高度設(shè)置成25px，從而實(shí)現(xiàn)對(duì)菜單是主菜單情況下單列表項(xiàng)的區(qū)分。隨后，還要將子菜單項(xiàng)中的超鏈接背景內(nèi)容改變?yōu)?666，行高為24px。

⑤鼠標(biāo)滑過(guò)菜單過(guò)程樣式的定義處理。

ul li a：hover{background：#666;border-bottom：1px dashed #FF0000;}

5 公司網(wǎng)站的總體設(shè)計(jì)規(guī)劃

在公司網(wǎng)站規(guī)劃與設(shè)計(jì)過(guò)程中，要加強(qiáng)對(duì)主題及版式的設(shè)計(jì)，提高網(wǎng)站架構(gòu)的整體性。應(yīng)該切實(shí)凸顯網(wǎng)站主題，并保證網(wǎng)站具有良好的清晰度和整潔度，通過(guò)簡(jiǎn)單而明確的圖片與文字進(jìn)行表現(xiàn)，針對(duì)公司LOGO位置配以相應(yīng)的徽標(biāo)。通過(guò)對(duì)網(wǎng)站版式的合理編排與布局，實(shí)現(xiàn)對(duì)平面設(shè)計(jì)效果的優(yōu)化利用。在網(wǎng)站總體設(shè)計(jì)層面，主要利用JavaScript，同時(shí)調(diào)用jQuery庫(kù)以實(shí)現(xiàn)對(duì)前端頁(yè)面的研發(fā)。

6 結(jié)語(yǔ)

基于Web前端開(kāi)發(fā)的公司網(wǎng)站設(shè)計(jì)能有效提高其整體設(shè)計(jì)效果，為用戶(hù)提供良好的體驗(yàn)效果，值得廣大設(shè)計(jì)人員進(jìn)行更為深入的研究。作為一名網(wǎng)站設(shè)計(jì)工作人員，要在Web前端開(kāi)發(fā)技術(shù)方面投入更多的時(shí)間和精力，以提高自身設(shè)計(jì)水平，促進(jìn)公司網(wǎng)站整體設(shè)計(jì)與應(yīng)用效果的提高，為公司經(jīng)營(yíng)活動(dòng)的開(kāi)展注入新的活力。

參考文獻(xiàn)：

[1]陳捷.基于網(wǎng)站制作的Web前端開(kāi)發(fā)技術(shù)與優(yōu)化[J].現(xiàn)代信息科技，2019（8）：111-112.

[2]宋凌霄.基于網(wǎng)站制作的Web前端開(kāi)發(fā)設(shè)計(jì)[J].計(jì)算機(jī)產(chǎn)品與流通，2019（1）：41.

[3]高佳憶，魏乃曉，徐文輝，等.基于Web前端開(kāi)發(fā)的公司網(wǎng)站設(shè)計(jì)研究[J].無(wú)線互聯(lián)科技，2018（11）：65-67.

[4]李曉薇.網(wǎng)站制作下的Web前端開(kāi)發(fā)設(shè)計(jì)[J].電子技術(shù)與軟件工程，2018（6）：34.

[5]周文君.基于網(wǎng)站制作的Web前端開(kāi)發(fā)技術(shù)與優(yōu)化[J].電子技術(shù)與軟件工程，2017（10）：60.

[6]劉明義，李保林，曹青青.信運(yùn)通信息產(chǎn)業(yè)有限公司網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)[J].科技創(chuàng)業(yè)月刊，2017（11）：131-133.