個人網站設計方案論文-個人網站的前端設計方案

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

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

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

4、comme ndatio n °CSS3 里增加了不少功能，如：border-radius 、text-shadow 等。1.3 JavaScript一種高級編程語言，通過解釋執(zhí)行，是一門動態(tài)類型，面向對象的直譯語 言。它已經由ECMA通過ECMAScript實現語言的標準化。它被世界上的絕大 多數網站所使用，也被世界主流瀏覽器支持。JavaScript是一門基于原型、函數 先行的語言，是一門多范式的語言，它支持面向對象編程，命令式編程，以及函 數式編程。它提供語法來操控文本，數組，日期以及正則表達式等，不支持I/O， 比如網絡，存儲和圖形等，但這些都可以由它的宿主環(huán)境提供支持。隨著

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

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

7、ss的最佳化利用，并減少開發(fā)過程。3.3加入動畫，添加特效例如顯示懸浮到容器上的陰影漸變的效果如下：給容器設置box-shadow 屬性，值為2px 2px 20px #909090;再給這個容器設置 hover 版本的 css，設置為 box-shadow : 2px 2px 70px #707070；給容器設置transition屬性，值為2s ；使用html默認支持hover屬性來切換兩套寫好的css3陰影代碼來實現陰 影效果的切換，再使用tran sitio n屬性設置動畫的播放時間以達到更美觀的效3.4其他效果例如使用了 highlight.js ，用于給生成的代碼塊添加高亮和排版效果。個人網站設計論文4總結總之，要使整個網站有個性化的體驗，不僅要頁面內容豐富，動畫流暢,還需要有相關特效，讓整體效果簡潔大方美觀，讓人有耳目一新的感覺。參考文獻1 陽西術.網頁制作與網站設計（第三