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

朱育林

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

關鍵詞：公司網站設計;前端技術;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

公司網站設計效果直接影響客戶體驗，關乎公司未來發展。因此，網站設計人員在設計工作開始之前要充分了解公司生產經營中的各個細節，在網站中充分突出企業特色，通過優質的網站設計效果實現對公司情況及所生產產品（或服務）的高效宣傳，拓寬企業宣傳與銷售渠道。在設計實踐中，如何有效利用Web前端技術，以促進整體設計效果的提高值得設計者深思。

1 目前公司網站的主要缺陷及對策

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

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

2 Web前端開發設計技術

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

3 公司網站框架設計

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

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

由于文章篇幅限制，只呈現部分代碼內容。

4 公司網站導航設計

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

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

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

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

②對列表樣式進行定義處理，使原本的垂直排列轉變為水平排列。

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

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

在這一條規則中，完成了針對顯示、高度、寬度及字體等相關樣式的定義。

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

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;}

設計這一條規則的作用是在背景與菜單間增加隔離線，更改文字形式。

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

ul li ul li{height：25px;}

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

此過程的首要任務是將與子菜單相互對應的列表項目高度設置成25px，從而實現對菜單是主菜單情況下單列表項的區分。隨后，還要將子菜單項中的超鏈接背景內容改變為#666，行高為24px。

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

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

5 公司網站的總體設計規劃

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

6 結語

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

參考文獻：

[1]陳捷.基于網站制作的Web前端開發技術與優化[J].現代信息科技，2019（8）：111-112.

[2]宋凌霄.基于網站制作的Web前端開發設計[J].計算機產品與流通，2019（1）：41.

[3]高佳憶，魏乃曉，徐文輝，等.基于Web前端開發的公司網站設計研究[J].無線互聯科技，2018（11）：65-67.

[4]李曉薇.網站制作下的Web前端開發設計[J].電子技術與軟件工程，2018（6）：34.

[5]周文君.基于網站制作的Web前端開發技術與優化[J].電子技術與軟件工程，2017（10）：60.

[6]劉明義，李保林，曹青青.信運通信息產業有限公司網站設計與實現[J].科技創業月刊，2017（11）：131-133.