朱雙雙

摘要：隨著Web前端開發(fā)技術(shù)的不斷發(fā)展，實(shí)用性和美觀性兼具的網(wǎng)頁才能吸引大眾的視線。通過研究Web前端開發(fā)技術(shù)的視覺表現(xiàn)形式，將Flash動(dòng)畫和輪播圖技術(shù)應(yīng)用于網(wǎng)頁，增強(qiáng)網(wǎng)頁的視覺效果，同時(shí)通過前端開發(fā)技術(shù)的優(yōu)化措施提升網(wǎng)頁的性能，提升瀏覽者的用戶體驗(yàn)度。

關(guān)鍵詞：Web;前端開發(fā);視覺效果;優(yōu)化;用戶體驗(yàn)

中圖分類號(hào)：TP393.092? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2021）02-0217-03

Abstract： With the continuous development of Web front-end development technology， the webpage with both practicality and aesthetics can attract the public's attention. By studying the visual representation of Web front-end development technology， the webpage applies flash animation and carousel technology to enhance the visual effects. At the same time， improve the performance of the webpage and enhance the user experience of visitors through optimization measures of front-end development technology.

Key words： web; front-end development; visual effects; optimization; user experience

1 背景

隨著互聯(lián)網(wǎng)技術(shù)的飛速發(fā)展，人們開始越來越關(guān)注Web頁面的設(shè)計(jì)、美工。眾所周知，網(wǎng)頁是接觸瀏覽者的第一入口，因此，視覺效果出色的網(wǎng)頁能吸引大量的瀏覽者，而Web前端開發(fā)技術(shù)作為網(wǎng)頁制作中一項(xiàng)不可或缺的技術(shù)，能夠設(shè)計(jì)網(wǎng)頁的排版布局，動(dòng)畫效果，文字樣式等，網(wǎng)站開發(fā)者通過這項(xiàng)技術(shù)呈現(xiàn)視覺效果出色的網(wǎng)頁界面，提升瀏覽者的用戶體驗(yàn)度。

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

Web前端開發(fā)技術(shù)有HTML、CSS和JavaScript三種主要語言，它們?cè)谇岸碎_發(fā)中各司其職，發(fā)揮不同的作用[1]。HTML（英文全稱：Hyper Text Markup Language ）是網(wǎng)頁制作的超文本標(biāo)記語言，通過各類標(biāo)記標(biāo)簽將文字、圖片和動(dòng)畫等內(nèi)容展示出來。HTML5技術(shù)是HTML不斷發(fā)展的成果，不僅包含了HTML的技術(shù)，還擁有強(qiáng)大的繪圖功能，能呈現(xiàn)驚人的視覺效果。CSS（英文全稱：Cascading Style Sheets）是修飾網(wǎng)頁的層疊樣式表，能夠精確控制網(wǎng)頁中各種元素的排版。CSS3是CSS技術(shù)升級(jí)的最新版本，它增添了多種CSS的樣式屬性，豐富了CSS的樣式設(shè)置[2]。JavaScript是一種用于網(wǎng)頁開發(fā)的高級(jí)腳本語言，能夠增加HTML頁面的交互性，為用戶瀏覽網(wǎng)頁提供美觀的視覺效果。

3 WEB前端開發(fā)技術(shù)的視覺表現(xiàn)形式

3.1 網(wǎng)頁布局

網(wǎng)頁布局在網(wǎng)頁設(shè)計(jì)中起到非常重要的作用。只有設(shè)計(jì)了合適的網(wǎng)頁布局才能進(jìn)行后續(xù)的開發(fā)工作。優(yōu)秀的網(wǎng)頁布局能對(duì)用戶進(jìn)行視覺引導(dǎo)，通過合理的頁面布局，引導(dǎo)瀏覽者快速獲取網(wǎng)頁的主要信息，提升瀏覽者的用戶體驗(yàn)度。DIV+CSS是使用最廣泛的網(wǎng)頁布局技術(shù)，DIV負(fù)責(zé)劃分網(wǎng)頁的各個(gè)內(nèi)容區(qū)域，構(gòu)建頁面的框架，CSS負(fù)責(zé)網(wǎng)頁的樣式設(shè)計(jì)，美化網(wǎng)頁[3]。

3.2 色彩運(yùn)用

合理的色彩運(yùn)用是網(wǎng)頁設(shè)計(jì)的重要條件之一。色彩具有強(qiáng)力的視覺影響作用，色彩基調(diào)突出的網(wǎng)頁能快速抓住瀏覽者的眼球，使其留下深刻的印象[4]。色彩也具有視覺區(qū)域劃分的作用，通過多個(gè)色彩標(biāo)記不同的信息內(nèi)容，可以區(qū)分信息之間的主次，突出網(wǎng)頁中的重要內(nèi)容。網(wǎng)頁的色彩可分為主色彩、輔助色和強(qiáng)調(diào)色。主色彩是網(wǎng)頁的主基調(diào)，在網(wǎng)頁中具有主導(dǎo)作用。輔助色和強(qiáng)調(diào)色的運(yùn)用可增加網(wǎng)頁的層次感，增加頁面的視覺效果[5]。

3.3 文字風(fēng)格

文字是網(wǎng)頁中不可替代的重要元素。文字的字體、字號(hào)和顏色的設(shè)置都能影響網(wǎng)頁的視覺效果，所以需要合理設(shè)計(jì)。生動(dòng)地文字風(fēng)格不僅能增強(qiáng)網(wǎng)頁的視覺效果，還能清晰地傳達(dá)網(wǎng)頁信息。文字風(fēng)格設(shè)計(jì)需要遵循三個(gè)原則[6]：1）文字編排需要具有條理性，避免雜亂，影響瀏覽者閱讀;2）文字風(fēng)格需與網(wǎng)頁的整體風(fēng)格相統(tǒng)一，根據(jù)不同主題的網(wǎng)頁設(shè)計(jì)特有的文字風(fēng)格;3）文字的設(shè)計(jì)不能脫離易讀性與可讀性，可讀的和易于識(shí)別的文字才能傳遞網(wǎng)頁信息。

3.4 網(wǎng)頁交互性

網(wǎng)頁具有交互性是網(wǎng)頁與用戶互動(dòng)的最基本要求，用戶通過和網(wǎng)頁交互，能快速找到相關(guān)信息，提升用戶接收網(wǎng)頁信息的主動(dòng)性和積極性。目前，在前端開發(fā)技術(shù)中，JavaScrip是最常用的交互技術(shù)。為了增加網(wǎng)頁的交互性，吸引用戶的視線，主要通過以下三種方式實(shí)現(xiàn)[7]：1）突出網(wǎng)頁中的按鈕和鏈接的設(shè)計(jì)，促使用戶點(diǎn)擊按鈕和鏈接，完成頁面跳轉(zhuǎn);2）設(shè)計(jì)結(jié)構(gòu)清晰的導(dǎo)航，合理清晰的導(dǎo)航幫助用戶快速找到所需信息;3）適當(dāng)加入Flash動(dòng)畫元素，生動(dòng)形象的動(dòng)畫不僅能美化網(wǎng)頁，還能很好的傳遞網(wǎng)頁信息。

4 Web前端開發(fā)技術(shù)的視覺效果應(yīng)用

為了讓網(wǎng)頁增加趣味性和活潑性，下面兩種技術(shù)的應(yīng)用將為網(wǎng)頁的視覺效果增色不少。

4.1 Flash動(dòng)畫

當(dāng)鼠標(biāo)點(diǎn)擊圖1，F(xiàn)lash動(dòng)畫的效果從圖1至圖3漸變，效果圖如下所示。

實(shí)現(xiàn)漸變Flash效果的核心代碼如下：

4.1.1 HTML代碼

4.1.2 CSS代碼

.box {

width： 800px;

height： 500px;

position： relative;

}

.box img {

width： 800px;

height： 500px;

position： absolute;

left： 0;

top： 0;

}

.show1 {

transition： all 3s;

}

.show1：hover {

opacity： 0;

}

4.2 輪播圖

輪播圖的效果圖如圖4所示。

實(shí)現(xiàn)輪播圖效果的核心代碼如下：

4.2.1 HTML代碼