個人網站的前端設計論文

論文
關注：1.93W次

摘要：個人網站是指因特網上一塊固定的面向全世界發佈消息的地方，個人網站由域名、程序和網站空間構成，通常包括主頁和其他具有超鏈接文件的頁面。人們可以通過網站來發布自己想要公開的資訊，或者利用網站來提供相關的網絡服務。網站設計的好壞直接影響着網站的性能，本文針對個人博客網站設計談了自己的體會。

【關鍵詞】個人網站HTML5CSS3Javascript

隨着互聯網的發展，網絡上的網站數量越來越多。個人網站的數量也與日俱增。一個好的網站不僅要保證有着良好的`性能，同時頁面的前端設計也得非常的優秀。一個良好的前端設計往往包含了合理的配色，清晰的頁面結構，流暢的動畫。隨着個人網站的發展，也催生出來很多優秀的博客程序，比如：《WordPress》、《Typecho》等等。那麼應如何設計個人網站的前端呢？

1設計語言

1.1HTML5

HTML5是HTML最新的修訂版本，2014年10月由萬維網聯盟完成標準制定。目標是替換1999年所制定的HTML4.01和XHTML1.0標準，以及能在互聯網應用迅速發展的時候，使網絡標準達到匹配當代的網絡需求。廣義論及HTML5時，實際指的是包括HTML、CSS和JavaScript在內的一套技術組合。它希望能夠減少網頁瀏覽器對於需要插件的豐富性網絡應用服務，例如：AdobeFlash、MicrosoftSilverlight與OracleJavaFX的需求，並且提供更多能有效加強網絡應用的標準集。

1.2CSS3

層疊樣式表（CSS），又稱串樣式列表、級聯樣式表、串接樣式表、層疊樣式表、階層式樣式表，一種用來為結構化文檔添加樣式的計算機語言，由W3C定義和維護。CSS3現在已被大部分現代瀏覽器支持。

CSS3分成了不同類別，稱為“modules”。而每一個“modules”都有於CSS2中額外增加的功能，以及向後兼容。CSS3早於1999年已開始制訂。直到2011年6月7日，CSS3ColorModule終於發佈為W3CRecommendation。CSS3裏增加了不少功能，如：“border-radius”、“text-shadow”等。

1.3JavaScript

一種高級程式語言，通過解釋執行，是一門動態類型，面向對象的直譯語言。它已經由ECMA通過ECMAScript實現語言的標準化。它被世界上的絕大多數網站所使用，也被世界主流瀏覽器支持。JavaScript是一門基於原型、函數先行的語言，是一門多範式的語言，它支持面向對象編程，命令式編程，以及函數式編程。它提供語法來操控文本，數組，日期以及正則表達式等，不支持I/O，比如網絡，存儲和圖形等，但這些都可以由它的宿主環境提供支持。隨着最新的HTML5和CSS3語言標準的推行它還可用於遊戲、桌面和移動應用程序的開發和在服務器端網絡環境運行。

2開發工具

SublimeText是一套跨平台的文本編輯器，支持基於Python的插件。SublimeText是專有軟件，可通過包擴充本身的功能。大多數的包使用自由軟件授權發佈，並由社區建置維護。SublimeText支持眾多程式語言，並支持語法上色。

MozillaFirefox，中文俗稱火狐，是一個自由及開源的網頁瀏覽器，由Mozilla基金會及其子公司Mozilla公司開發。Firefox支持Windows、OSX及Linux，其移動版支持Android及FirefoxOS，這些版本的Firefox使用Gecko來排版網頁，Gecko是一個運行當前與預期之網頁標準的排版引擎，而在2015年發佈的FirefoxforiOS則非使用Gecko。

3網站前端設計

3.1站點架構

首先確認了整體頁面是由左右兩個DIV組成，並提供一個按鈕，可以按下後隱藏左邊的DIV以達到只顯示右邊的DIV的正文的目的。為left和right兩標籤加上內容，並美化其頁面。

3.2頁面設計

作品頁面主要用於存放一些作品的demo，所以設計成了幾個div以格子的形式排列，並在上面能夠顯示作品的預覽。整體的頁面框架依舊沿用首頁，以達到站點整體風格的統一和css的最佳化利用，並減少開發過程。

3.3加入動畫，添加特效

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

給容器設置box-shadow屬性，值為2px2px20px#909090；再給這個容器設置hover版本的css，設置為box-shadow：2px2px70px#707070；給容器設置transition屬性，值為2s；

使用html默認支持hover屬性來切換兩套寫好的css3陰影代碼來實現陰影效果的切換，再使用transition屬性設置動畫的播放時間以達到更美觀的效果。

3.4其他效果

例如使用了，用於給生成的代碼塊添加高亮和排版效果。

4總結