個人網(wǎng)站設(shè)計方案論文-個人網(wǎng)站的前端設(shè)計方案

1、個人網(wǎng)站設(shè)計論文:個人網(wǎng)站的前端設(shè)計- 計算機論文個人網(wǎng)站設(shè)計論文 :個人網(wǎng)站的前端設(shè)計摘 要 個人網(wǎng)站是指因特網(wǎng)上一塊固定的面向全世界發(fā)布消息的地方，個人網(wǎng)站由域名、程序和網(wǎng)站空間構(gòu)成，通常包括主頁和其他具有超鏈接文件的頁面。人們可以通過網(wǎng)站來發(fā)布自己想要公開的資訊，或者利用網(wǎng)站來提供相關(guān)的網(wǎng)絡(luò)服務。網(wǎng)站設(shè)計的好壞直接影響著網(wǎng)站的性能，本文針對個人博客網(wǎng)站設(shè)計談了自己的體會?！娟P(guān)鍵詞】個人網(wǎng)站HTML5 CSS3 Javascript隨著互聯(lián)網(wǎng)的發(fā)展，網(wǎng)絡(luò)上的網(wǎng)站數(shù)量越來越多。個人網(wǎng)站的數(shù)量也與日俱增。一個好的網(wǎng)站不僅要保證有著良好的性能，同時頁面的前端設(shè)計也得非常的優(yōu)秀。一個良好的前端設(shè)計

2、往往包含了合理的配色，清晰的頁面結(jié)構(gòu)， 流暢的動畫。隨著個人網(wǎng)站的發(fā)展，也催生出來很多優(yōu)秀的博客程序，比如： WordPress 、Typecho 等等。那么應如何設(shè)計個人網(wǎng)站的前端呢？1 設(shè)計語言1.1 HTML5HTML5 是 HTML 最新的修訂版本， 2014 年 10 月由萬維網(wǎng)聯(lián)盟完成標準制定。目標是替換1999 年所制定的 HTML4.01 和 XHTML1.0 標準，以及能在互聯(lián)網(wǎng)應用迅速發(fā)展的時候，使網(wǎng)絡(luò)標準達到匹配當代的網(wǎng)絡(luò)需求。廣義論及HTML5 時，實際指的是包括HTML 、CSS 和 JavaScript 在內(nèi)的一套技術(shù)組合。它希望能夠減少網(wǎng)頁瀏覽器對于需要插件的豐富

3、性網(wǎng)絡(luò)應用服務，例如：AdobeFlash 、Microsoft Silverlight與 Oracle JavaFX的需求，并且提供更多能有效加強網(wǎng)絡(luò)應用的標準集。1.2 CSS3層疊樣式表（ CSS），又稱串樣式列表、級聯(lián)樣式表、串接樣式表、層疊樣式表、階層式樣式表，一種用來為結(jié)構(gòu)化文檔添加樣式的計算機語言，由W3C定義和維護。 CSS3 現(xiàn)在已被大部分現(xiàn)代瀏覽器支持。CSS3 分成了不同類別， 稱為 modules 。而每一個 modules都有于 CSS2中額外增加的功能， 以及向后兼容。 CSS3 早于 1999 年已開始制訂。 直到 2011年 6 月 7 日，CSS 3 Colo

4、r Module終于發(fā)布為 W3C Recommendation。CSS3里增加了不少功能，如：border-radius、 text-shadow等。1.3 JavaScript一種高級編程語言，通過解釋執(zhí)行，是一門動態(tài)類型，面向?qū)ο蟮闹弊g語言。它已經(jīng)由 ECMA 通過 ECMAScript實現(xiàn)語言的標準化。它被世界上的絕大多數(shù)網(wǎng)站所使用， 也被世界主流瀏覽器支持。 JavaScript 是一門基于原型、函數(shù)先行的語言，是一門多范式的語言，它支持面向?qū)ο缶幊?，命令式編程，以及函?shù)式編程。它提供語法來操控文本， 數(shù)組，日期以及正則表達式等， 不支持 I/O ，比如網(wǎng)絡(luò)，存儲和圖形等， 但這些都

5、可以由它的宿主環(huán)境提供支持。隨著最新的HTML5 和 CSS3 語言標準的推行它還可用于游戲、桌面和移動應用程序的開發(fā)和在服務器端網(wǎng)絡(luò)環(huán)境運行。2 開發(fā)工具SublimeText 是一套跨平臺的文本編輯器，支持基于Python的插件。SublimeText 是專有軟件，可通過包擴充本身的功能。大多數(shù)的包使用自由軟件授權(quán)發(fā)布，并由社區(qū)建置維護。SublimeText 支持眾多編程語言，并支持語法上色。MozillaFirefox ，中文俗稱火狐，是一個自由及開源的網(wǎng)頁瀏覽器，由Mozilla基金會及其子公司Mozilla公司開發(fā)。 Firefox 支持 Windows 、OS X及 Linux

6、，其移動版支持 Android 及 Firefox OS ，這些版本的 Firefox 使用 Gecko來排版網(wǎng)頁， Gecko 是一個運行當前與預期之網(wǎng)頁標準的排版引擎，而在2015年發(fā)布的 Firefox for iOS則非使用 Gecko 。3 網(wǎng)站前端設(shè)計3.1 站點架構(gòu)首先確認了整體頁面是由左右兩個DIV 組成，并提供一個按鈕， 可以按下后隱藏左邊的DIV 以達到只顯示右邊的DIV 的正文的目的。為left 和 right兩標簽加上內(nèi)容，并美化其頁面。3.2 頁面設(shè)計作品頁面主要用于存放一些作品的demo ，所以設(shè)計成了幾個div 以格子的形式排列， 并在上面能夠顯示作品的預覽。整體

7、的頁面框架依舊沿用首頁，以達到站點整體風格的統(tǒng)一和css 的最佳化利用，并減少開發(fā)過程。3.3 加入動畫，添加特效例如顯示懸浮到容器上的陰影漸變的效果如下：給容器設(shè)置 box-shadow屬性，值為 2px 2px 20px #909090；再給這個容器設(shè)置 hover 版本的 css，設(shè)置為 box-shadow： 2px 2px 70px #707070；給容器設(shè)置 transition屬性，值為 2s ；使用 html 默認支持 hover 屬性來切換兩套寫好的css3 陰影代碼來實現(xiàn)陰影效果的切換，再使用transition屬性設(shè)置動畫的播放時間以達到更美觀的效果。3.4 其他效果例如使用了 highlight.js，用于給生成的代碼塊添加高亮和排版效果。個人網(wǎng)站設(shè)計論文4 總結(jié)總之，要使整個網(wǎng)站有個性化的體驗，不僅要頁面內(nèi)容豐富，動畫流暢，還需要有相關(guān)特效，讓整體效果簡潔大方美觀，讓人有耳目一新的感覺。參考文