HTML5和CSS3.0的優(yōu)勢及其在網(wǎng)頁設(shè)計中的運用,網(wǎng)頁設(shè)計論文

5和CSS3.0的優(yōu)勢及其在網(wǎng)頁設(shè)計中的運用,網(wǎng)頁設(shè)計論文摘要：隨著電子技術(shù)等計算機信息技術(shù)發(fā)展速度的迅猛提高，人們越來越依靠互聯(lián)網(wǎng)，從各大網(wǎng)站中獲取有用信息成為諸多網(wǎng)民的日常。在不同類型顯示設(shè)備的應(yīng)用背景下，超文本標記語言〔〕與樣式層疊表〔CSS〕迎來了創(chuàng)新發(fā)展的新時期，經(jīng)過不斷的探尋求索實踐，逐步成熟的5和CSS3.0使得網(wǎng)頁設(shè)計能夠更好地知足網(wǎng)民提出的網(wǎng)頁無縫銜接的新需求?；诖?，該文扼要闡述了5和CSS3.0在網(wǎng)頁設(shè)計中的優(yōu)勢特性，并結(jié)合實際對兩者在網(wǎng)頁設(shè)計中的應(yīng)用進行了討論，以供相關(guān)專業(yè)人士參考與借鑒。

本文關(guān)鍵詞語：5和CSS3.0;網(wǎng)頁設(shè)計;優(yōu)勢特性;應(yīng)用分析;

在互聯(lián)網(wǎng)發(fā)生翻天覆地的變化的新形勢下，網(wǎng)頁制作技術(shù)日新月異，實現(xiàn)了從靜態(tài)頁面到動態(tài)頁面的轉(zhuǎn)變，由原來的表格布局發(fā)展為如今的DIV+CSS布局，除此之外，還有全屏布局、瀑布流布局以及滾動視差布局等等。為了讓網(wǎng)頁設(shè)計帶給用戶更好的視覺、聽覺感官體驗，設(shè)計人員需要更強大的技術(shù)加以支持，比方5和CSS3.0技術(shù)。華而不實，5是超文本標記語言的第五次重大修改，與以前的版本相比，CSS3.0在圖像背景、布局樣式、視覺元素等方面具有顯著的特點。在網(wǎng)頁設(shè)計中靈敏應(yīng)用5和CSS3.0，將制作出友好和諧的交互界面，以便愈加符合用戶的使用習(xí)慣。

1、5在網(wǎng)頁設(shè)計中的優(yōu)勢特性

1.1、新的語義標簽與屬性

對網(wǎng)頁設(shè)計來講，5標準賦予其愈加現(xiàn)實的意義與構(gòu)造，尤其對語義進行了統(tǒng)一規(guī)范處理，為Web靜態(tài)語言開創(chuàng)建立了新的標簽和屬性，根本目的是使這些編程語言為網(wǎng)頁設(shè)計提供強有力的保障，而不是絆腳石。5新增了headerarticlefigure等新的語義化標簽，并為一些標簽新增了愈加實用的屬性，比方a和area下的media屬性，input、button和textarea下的autofocus屬性，另外input還有autocomplete、min、max、multiple等新屬性。這些標簽不僅使得網(wǎng)頁設(shè)計愈加高效，也提升了搜索引擎抓取網(wǎng)站內(nèi)容的效率與質(zhì)量。由于4中的內(nèi)容標簽具有一樣等級，在網(wǎng)頁設(shè)計時難以對頁面各部分進行明確的區(qū)分。但是，在5標準中，各部分的內(nèi)容標簽相互獨立并且具有不同的等級，便于搜索引擎、統(tǒng)計軟件對其進行快速辨別。當然，關(guān)鍵一點還是5只需要用!DOCTYPE這一簡潔的形式，為程序員使用type來聲明文檔解析標準減輕了工作負擔，并且該標準還有利于緩解新語義辨別不出來的尷尬局面。

1.2、豐富的應(yīng)用程序接口

在4設(shè)置了單一DOM接口的基礎(chǔ)上，5標準新增了網(wǎng)絡(luò)監(jiān)聽接口、全屏接口、拖拽接口、地理接口、應(yīng)用緩存接口、離線存儲接口等等，為一些功能復(fù)雜多變的網(wǎng)頁設(shè)計工作提供了強大、全面的API[1]。比方，5中有window.LocalStorage和window.sessionStorage這兩種本地存儲屬性，華而不實，LocalStorage特性是對cookie存儲空間缺乏的有效解決。兩者的存儲對象都是客戶端臨時信息，但是前者將一直保存在本地，而后者這種會話信息將存儲在web服務(wù)器上。假如關(guān)閉了網(wǎng)站，那么意味著本次會話結(jié)束，相應(yīng)的數(shù)據(jù)也將消失。

1.3、新增加媒體呈現(xiàn)方式

5標準中通過視頻標簽video和音頻標簽audio來替代Flash等制作工具，設(shè)計者在網(wǎng)頁制作時只需要將音頻、視頻等素材提早準備好，利用src屬性聲明音視頻的URL，通過對應(yīng)標簽及其屬性、事件、方式方法即可對這些素材進行修改，該經(jīng)過中不需要借助特定插件來獲得音視頻文件。

1.4、新增canvas畫布元素

5中的canvas元素是一個用于繪制圖形的關(guān)鍵標簽，能夠?qū)⑵浜唵卫斫鉃榫匦螀^(qū)域的畫布。值得格外注意的是canvas元素不具備繪圖能力，需要在JavaScript腳本語言的幫助下來完成不同形狀、圖形圖像以及動畫等繪制工作[2,3]。譬如，document.getElementById〔myCanvas〕表示通過使用id為myCanvas來尋找頁面中的canvas元素。

2、CSS3.0在網(wǎng)頁設(shè)計中的優(yōu)勢特性

2.1、邊框border

設(shè)計者進行網(wǎng)頁制作時，不能僅僅對詳細內(nèi)容進行設(shè)計，更需要注重邊框?qū)傩?，這樣才不至于由于內(nèi)容錯位或者偏移等問題造成頁面混亂。能夠講，CSS3.0標準對邊框及其屬性進行了優(yōu)化定義，有效避免了采用CSS2.0技術(shù)而屢次重復(fù)操作以便完成邊框設(shè)計。通過CSS3.0技術(shù)，設(shè)計者對有關(guān)邊框控件進行加載，然后根據(jù)實際情況設(shè)置參數(shù)，比方border-color代表邊框顏色，通過合理的參數(shù)設(shè)計還能夠?qū)崿F(xiàn)漸變效果，border-image用來設(shè)置邊框圖像，border-radius能夠為元素添加一個圓角邊框?？偟膩碇v，CSS3.0標準下的border控件在大小、顏色、形狀、陰影以及3D效果等方面有所提升。

2.2、背景background

CSS3.0新增了很多背景屬性，譬如支持IE、Firefox、Chrome等閱讀器的background-size屬性和background-origin屬性，華而不實background-size屬性允許設(shè)計者通過像素或百分比的形式來自定義背景圖片的尺寸大小，以便重復(fù)使用該圖片。同時，background-image能夠知足設(shè)計者設(shè)置多重背景圖片的需求。

2.3、尺寸調(diào)整與顏色設(shè)置

就CSS3.0標準中的元素尺寸調(diào)整來講，首先需要對resize屬性進行設(shè)置，該屬性的默認值是none，both表示對元素的高度與寬度進行調(diào)整，horizontal和vertical分別表示元素寬度與高度。在顏色設(shè)置方面，CSS3.0技術(shù)除了支持使用紅綠藍顏色值〔RGB〕來定義不同顏色之外，還能夠利用HSL顏色值對色調(diào)、飽和度以及亮度進行參數(shù)設(shè)置，進而實現(xiàn)多種顏色模塊下不同顏色的精細化設(shè)計。

2.4、漸變功能

在網(wǎng)頁制作經(jīng)過中，利用CSS3.0技術(shù)中的line-gradient、radial-gradient與repeating-linear-gradient能夠完成線性漸變、徑向漸變、重復(fù)漸變等設(shè)計[4,5]。不同情況下，所需要設(shè)置的參數(shù)有所差異，比方，線性漸變中方向取值有角度deg與關(guān)鍵字，在顏色參數(shù)后面還能夠設(shè)置長度單位來定義漸變色的開場位置與結(jié)束位置，如此一來，便能夠設(shè)計出絢麗多變的網(wǎng)頁。

2.5、動畫animation

為了避免遭到Flash控件的影響，CSS3.0標準中開發(fā)出來了一個新的動畫制作技術(shù)，即animation技術(shù)。它不僅繼承了flash中的大部分功能，也就是對動畫名稱、速度曲線、播放次數(shù)、周期時間等內(nèi)容進行規(guī)定，還具有一定的3D動畫處理能力。在animation技術(shù)的支持下，設(shè)計者能夠制作出精度較高的3D動畫，整個畫面也特別逼真。

3、5和CSS3.0在網(wǎng)頁設(shè)計中的應(yīng)用分析

在頁面布局中，5結(jié)合CSS3.0技術(shù)為設(shè)計者帶來了新的啟發(fā)，通過對頁面進行處理，使得整個布局愈加靈敏多變。華而不實header標簽是對頁面中的頁眉部分進行設(shè)計，footer標簽與Word文檔中的頁腳具有類似功能，main標簽負責(zé)頁面主要部分的定義設(shè)置，例如簡介、導(dǎo)航、背景圖片、音視頻等元素。這種布局比DIV+CSS格式更具規(guī)范性、模塊性、邏輯性，頁面構(gòu)造清楚明晰，相對應(yīng)的代碼也比擬簡潔[6,7]。

其次，為了讓移動互聯(lián)網(wǎng)閱讀器提供一個愈加舒適的界面，利用5和CSS3.0能夠構(gòu)成響應(yīng)式頁面局部，讓用戶在不同終端設(shè)備中都能獲得更好的服務(wù)體驗。例如，基于CSS3.0標準而提出的彈性盒模型，這是一種高效率的布局方式，讓設(shè)計者即能夠?qū)θ萜髦械臈l目分配合理化的空間，又能夠?qū)崿F(xiàn)左右對齊、上下對齊等布局。

最后，在采用5和CSS3.0技術(shù)的基礎(chǔ)上通過JavaS-cript腳本語言還能夠?qū)崿F(xiàn)頁面跨閱讀器設(shè)計。通過script標簽將支持主流閱讀器辨別5和CSS3.0中元素，在有關(guān)程序代碼的幫助下實現(xiàn)頁面跨閱讀器工作。這樣的話，設(shè)計者對應(yīng)用代碼進行適當?shù)男薷亩恍枰匦略O(shè)計構(gòu)建網(wǎng)站，也不用大規(guī)模修改詳細內(nèi)容，但是在實際應(yīng)用中，設(shè)計者有必要認識到并不是所有新特性都具有該功能，避免頁面顯示不完好等問題出現(xiàn)。由此看來，利用5和CSS3.0技術(shù)的優(yōu)勢特性，加上jsp、php、asp等腳本語言的有力支撐，將為網(wǎng)頁設(shè)計帶來意想不到的效果。

4、結(jié)束語

綜上所述，5和CSS3.0技術(shù)在網(wǎng)頁設(shè)計中占據(jù)著不可忽視的重要地位，兩者的有機結(jié)合拓寬了網(wǎng)頁視覺處理的發(fā)展空間。在人們對網(wǎng)頁界面提出更多需求的背景下，設(shè)計者應(yīng)當站在用戶的角度來分析考慮，進而制作出布局愈加合理、更具交互性、界面愈加有好的網(wǎng)頁作品。

以下為參考文獻

[1]尉博,李金友.淺談5的應(yīng)用與前景[J].當代交際,2021(21):193.

[2]顏春艷.淺談CSS+DIV在網(wǎng)頁設(shè)計和布局中的作用[J].數(shù)碼世界,2021(6):68-69.

[3]辛紅.基于5+CSS3交互式網(wǎng)頁布局的研究[J].考試周刊,2021(A3):195.

[4]高楊.5和CSS3.0在網(wǎng)頁設(shè)