個(gè)人網(wǎng)站的前端設(shè)計(jì)

殷禮琨

摘 要 個(gè)人網(wǎng)站是指因特網(wǎng)上一塊固定的面向全世界發(fā)布消息的地方，個(gè)人網(wǎng)站由域名、程序和網(wǎng)站空間構(gòu)成，通常包括主頁(yè)和其他具有超鏈接文件的頁(yè)面。人們可以通過(guò)網(wǎng)站來(lái)發(fā)布自己想要公開(kāi)的資訊，或者利用網(wǎng)站來(lái)提供相關(guān)的網(wǎng)絡(luò)服務(wù)。網(wǎng)站設(shè)計(jì)的好壞直接影響著網(wǎng)站的性能，本文針對(duì)個(gè)人博客網(wǎng)站設(shè)計(jì)談了自己的體會(huì)。

【關(guān)鍵詞】個(gè)人網(wǎng)站 HTML5 CSS3 Javascript

隨著互聯(lián)網(wǎng)的發(fā)展，網(wǎng)絡(luò)上的網(wǎng)站數(shù)量越來(lái)越多。個(gè)人網(wǎng)站的數(shù)量也與日俱增。一個(gè)好的網(wǎng)站不僅要保證有著良好的性能，同時(shí)頁(yè)面的前端設(shè)計(jì)也得非常的優(yōu)秀。一個(gè)良好的前端設(shè)計(jì)往往包含了合理的配色，清晰的頁(yè)面結(jié)構(gòu)，流暢的動(dòng)畫(huà)。隨著個(gè)人網(wǎng)站的發(fā)展，也催生出來(lái)很多優(yōu)秀的博客程序，比如：《WordPress》、《Typecho》等等。那么應(yīng)如何設(shè)計(jì)個(gè)人網(wǎng)站的前端呢？

1 設(shè)計(jì)語(yǔ)言

1.1 HTML5

HTML5是HTML最新的修訂版本，2014年10月由萬(wàn)維網(wǎng)聯(lián)盟完成標(biāo)準(zhǔn)制定。目標(biāo)是替換1999年所制定的HTML 4.01和XHTML 1.0標(biāo)準(zhǔn)，以及能在互聯(lián)網(wǎng)應(yīng)用迅速發(fā)展的時(shí)候，使網(wǎng)絡(luò)標(biāo)準(zhǔn)達(dá)到匹配當(dāng)代的網(wǎng)絡(luò)需求。廣義論及HTML5時(shí)，實(shí)際指的是包括HTML、CSS和JavaScript在內(nèi)的一套技術(shù)組合。它希望能夠減少網(wǎng)頁(yè)瀏覽器對(duì)于需要插件的豐富性網(wǎng)絡(luò)應(yīng)用服務(wù)，例如：AdobeFlash、Microsoft Silverlight與Oracle JavaFX的需求，并且提供更多能有效加強(qiáng)網(wǎng)絡(luò)應(yīng)用的標(biāo)準(zhǔn)集。

1.2 CSS3

層疊樣式表（CSS），又稱(chēng)串樣式列表、級(jí)聯(lián)樣式表、串接樣式表、層疊樣式表、階層式樣式表，一種用來(lái)為結(jié)構(gòu)化文檔添加樣式的計(jì)算機(jī)語(yǔ)言，由W3C定義和維護(hù)。CSS3現(xiàn)在已被大部分現(xiàn)代瀏覽器支持。

CSS3分成了不同類(lèi)別，稱(chēng)為“modules”。而每一個(gè)“modules”都有于CSS2中額外增加的功能，以及向后兼容。CSS3早于1999年已開(kāi)始制訂。直到2011年6月7日，CSS 3 Color Module終于發(fā)布為W3C Recommendation。CSS3里增加了不少功能，如：“border-radius”、“text-shadow”等。

1.3 JavaScript

一種高級(jí)編程語(yǔ)言，通過(guò)解釋執(zhí)行，是一門(mén)動(dòng)態(tài)類(lèi)型，面向?qū)ο蟮闹弊g語(yǔ)言。它已經(jīng)由ECMA通過(guò)ECMAScript實(shí)現(xiàn)語(yǔ)言的標(biāo)準(zhǔn)化。它被世界上的絕大多數(shù)網(wǎng)站所使用，也被世界主流瀏覽器支持。JavaScript是一門(mén)基于原型、函數(shù)先行的語(yǔ)言，是一門(mén)多范式的語(yǔ)言，它支持面向?qū)ο缶幊?，命令式編程，以及函?shù)式編程。它提供語(yǔ)法來(lái)操控文本，數(shù)組，日期以及正則表達(dá)式等，不支持I/O，比如網(wǎng)絡(luò)，存儲(chǔ)和圖形等，但這些都可以由它的宿主環(huán)境提供支持。隨著最新的HTML5和CSS3語(yǔ)言標(biāo)準(zhǔn)的推行它還可用于游戲、桌面和移動(dòng)應(yīng)用程序的開(kāi)發(fā)和在服務(wù)器端網(wǎng)絡(luò)環(huán)境運(yùn)行。

2 開(kāi)發(fā)工具

Sublime Text是一套跨平臺(tái)的文本編輯器，支持基于Python的插件。Sublime Text是專(zhuān)有軟件，可通過(guò)包擴(kuò)充本身的功能。大多數(shù)的包使用自由軟件授權(quán)發(fā)布，并由社區(qū)建置維護(hù)。Sublime Text支持眾多編程語(yǔ)言，并支持語(yǔ)法上色。

Mozilla Firefox，中文俗稱(chēng)火狐，是一個(gè)自由及開(kāi)源的網(wǎng)頁(yè)瀏覽器，由Mozilla基金會(huì)及其子公司Mozilla公司開(kāi)發(fā)。Firefox支持Windows、OS X及Linux，其移動(dòng)版支持Android及Firefox OS，這些版本的Firefox使用Gecko來(lái)排版網(wǎng)頁(yè)，Gecko是一個(gè)運(yùn)行當(dāng)前與預(yù)期之網(wǎng)頁(yè)標(biāo)準(zhǔn)的排版引擎，而在2015年發(fā)布的Firefox for iOS則非使用Gecko。

3 網(wǎng)站前端設(shè)計(jì)

3.1 站點(diǎn)架構(gòu)

首先確認(rèn)了整體頁(yè)面是由左右兩個(gè)DIV組成，并提供一個(gè)按鈕，可以按下后隱藏左邊的DIV以達(dá)到只顯示右邊的DIV的正文的目的。為left和right兩標(biāo)簽加上內(nèi)容，并美化其頁(yè)面。

3.2 頁(yè)面設(shè)計(jì)

作品頁(yè)面主要用于存放一些作品的demo，所以設(shè)計(jì)成了幾個(gè)div以格子的形式排列，并在上面能夠顯示作品的預(yù)覽。整體的頁(yè)面框架依舊沿用首頁(yè)，以達(dá)到站點(diǎn)整體風(fēng)格的統(tǒng)一和css的最佳化利用，并減少開(kāi)發(fā)過(guò)程。

3.3 加入動(dòng)畫(huà)，添加特效

例如顯示懸浮到容器上的陰影漸變的效果如下：

給容器設(shè)置box-shadow屬性，值為2px 2px 20px #909090；再給這個(gè)容器設(shè)置hover版本的css，設(shè)置為box-shadow： 2px 2px 70px #707070；給容器設(shè)置transition屬性，值為2s；

使用html默認(rèn)支持hover屬性來(lái)切換兩套寫(xiě)好的css3陰影代碼來(lái)實(shí)現(xiàn)陰影效果的切換，再使用transition屬性設(shè)置動(dòng)畫(huà)的播放時(shí)間以達(dá)到更美觀的效果。

3.4 其他效果

例如使用了highlight.js，用于給

生成的代碼塊添加高亮和排版效果。
4 總結(jié)
總之，要使整個(gè)網(wǎng)站有個(gè)性化的體驗(yàn)，不僅要頁(yè)面內(nèi)容豐富，動(dòng)畫(huà)流暢，還需要有相關(guān)特效，讓整體效果簡(jiǎn)潔大方美觀，讓人有耳目一新的感覺(jué)。
參考文獻(xiàn)
[1]陽(yáng)西術(shù).網(wǎng)頁(yè)制作與網(wǎng)站設(shè)計(jì)（第三版）[M].華中科技大學(xué)出版社，2016.
[2]陸凌牛.HTML5與CSS3權(quán)威指南（第三版）[M].機(jī)械工業(yè)出版社，2013.
[3]Nicholas C.Zakas.JavaScript高級(jí)程序設(shè)計(jì)（第三版）[M].人民郵電出版社，2012.