朱育林

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

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

中圖分類號：TP393.092 文獻標識碼：A 文章編號：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è)計效果直接影響客戶體驗，關(guān)乎公司未來發(fā)展。因此，網(wǎng)站設(shè)計人員在設(shè)計工作開始之前要充分了解公司生產(chǎn)經(jīng)營中的各個細節(jié)，在網(wǎng)站中充分突出企業(yè)特色，通過優(yōu)質(zhì)的網(wǎng)站設(shè)計效果實現(xiàn)對公司情況及所生產(chǎn)產(chǎn)品（或服務(wù)）的高效宣傳，拓寬企業(yè)宣傳與銷售渠道。在設(shè)計實踐中，如何有效利用Web前端技術(shù)，以促進整體設(shè)計效果的提高值得設(shè)計者深思。

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

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

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

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

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

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

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

在此，筆者主要研究通過三行模式（抑或是三列模式）對Web網(wǎng)站進行設(shè)計，這一模式最主要的特征在于將每個頁面從水平方向（抑或是垂直方向）分為三個相對獨立的區(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è)計

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

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

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

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

②對列表樣式進行定義處理，使原本的垂直排列轉(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ī)則中，完成了針對顯示、高度、寬度及字體等相關(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è)計這一條規(guī)則的作用是在背景與菜單間增加隔離線，更改文字形式。

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

ul li ul li{height：25px;}

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

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

⑤鼠標滑過菜單過程樣式的定義處理。

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

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

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

6 結(jié)語

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

參考文獻：

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

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

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

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

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

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