个人网站的前端设计

　　【第五篇】论文题目:  个人网站的前端设计

　　摘要:个入网站是指因特网上一块固定的面向全世界发布消息的地方,个入网站由域名、程序和网站空间构成,通常包括主页和其他具有超链接文件的页面入们可以通过网站来发布自己想要公开的资讯,或者利用网站来提供相关的网络服务网站设计的好坏直接影响着网站的性能,本文针对个入博客网站设计谈了自己的体会

　　[关键词]个入网站HTMLS CSS3 Javascript

　　随着互联网的发展,网络上的网站数量越来越多.个人网站的数量也与日俱增.一个好的网站小仅要保证有着良好的性能,同时页面的前端设计也得非常的优秀.一个良好的前端设计往往包含了合理的配色,清晰的页面结构,流畅的动u.随着个人网站的发展,也催生出来很多优秀的博客程序,比如:(( WordPress ))、((Typecho))等等.那么应如何设计个人网站的前端ule ?

　　1.设计语言

　　HTMLSHTMLS是HTML最新的修订版本,2014年10月山万维网联盟完成标准制定.目标是替换1999年所制定的HTML 4.01和XHTML1.0标准,以及能在4_联网应用迅速发展的时候,使网络标准达到匹配当代的网络需求.广义沦及HTMLS时,实际指的是包括HTML,CSS和JavaScript在内的一套技术组合.它希望能够减少网页浏览器对于需要插件的丰富性网络应用服务,例如:AdobeFlash, MicrosoftSilverlight与Oracle JavaFX的需求,并且提供史多能有效加强网络应用的标准集.

　　1.2:SS3

　　层叠样式表(CSS),又称中样式列表、级联样式表、中接样式表、层叠样式表、阶层式样式表,一种用来为结构化文档添加样式的训算机语言,山W3C定义和维护.CSS3现在已被大部分现代浏览器支持.

　　CSS3分成了小同类别,称为"modules".而仃一个"modules"都有于CSS2中额外增加的功能,以及向后兼容o CSS3早于1999年已开始制订.直到2011年6月7日,CSS 3 Color Module终于发布为W3CRecommendation o CS S3里增加了小少功能,女fk"border-radius "、"text-shadow"等

　　1.3 JavaScript

　　一种高级编程语言,通过解释执行,是一门动态类型,面向对象的直译语言.它已经山ECMA通过ECMAScript实现语言的标准化.

　　它被世界上的绝大多数网站所使用,也被世界卞流浏览器支持.JavaScript是一门基于原型、函数先行的语言,是一门多范式的语言,它支持面向对象编程,命令式编程,以及函数式编程.它提供语法来操控文本,数组,日期以及正则表达式等,小支持I/O,比如网络,存储和图形等,但这此都叫一以山它的宿卞环境提供支持.随着最新的HTMLS和CSS3语言标准的推行它还可用于游戏、桌面和移动应用程序的开发和在服务器端网络环境运行.

　　2开发工具

　　Sublime Text是一套跨平台的文本编辑器,支持基于Python的插件.Sublime Text是专有软件,叫一通过包扩充本身的功能.大多数的包使用自山软件授权发布,并山社Ix:建置维护.

　　Sublime Text支持众多编程语言,并支持语法上色.

　　Mozilla Firefox,中文俗称火狐,是一个自山及开源的网页浏览器,山Mozilla基金会及其子公司Mozilla公司开发.Firefox支持Windows,  OS X及Linux,其移动版支持Android及Firefox OS,这此版本的Firefox使用Gecko来排版网页,Gecko是一个运行当前与预期之网页标准的排版引擎,而在2015年发布的Firefox for iOS则非使用Geckoo

　　3网站前端设计

　　3.1站点架构

　　首先确认了整体页面是山左右两个DIV组成,并提供一个按钮,叫一以按下后隐藏左边的DIV以达到只显示右边的DIV的正文的目的.为left和right两标签加上内容,并美化其页而.

　　3.2页面设计

　　作品页面卞要用于存放一此作品的demo,所以设计成了几个div以格子的形式排列,并在上而能够显示作品的预览.整体的页面框架依旧沿用首页,以达到站点整体风格的统一和CSS的最佳化利用,并减少开发过程.

　　3. 3加入动画,添加特效

　　例如显示悬浮到容器上的阴影渐变的效果如下:给容器设置box-shadow性,值为2px2px 20px #909090;再给这个容器设置hover版本的css,设置为box-shadow: 2px 2px 70px#707070;给容器设置transition属性,值为2s;使用html默认支持hover属性来切换两套写好的css3阴影代码来实现阴影效果的切换,再使用transition属性设置动U的播放时间以达到史美观的效果.

　　3. 4其他效果

　　例如使用了highlight.js,用于给<pre><code>生成的代码块添加高亮和排版效果.

　　clink rel--"stylesheet" hre}"　　st/highlightjs/8.0/styles/solariae走darkmin.css">

　　<script src　　<script>hlj s. initHighlightingOnLoad();</script>

　　4总结

　　总之,要使整个网站有个性化的体验,小仅要页面内容丰富,动u流畅,还需要有相关特效,让整体效果简洁大方美观,让人有耳目一新的感觉.

　　参考文献

　　[1」阳西术.网页制作与网站设计(第三版)[M].华中科技大学出版社,2016.
　　[21陆凌牛.HTMLS与CSS3权威指南(第三版)[M].机械工业出版社,2013.
　　[3]Nicholas  C. Zakas. JavaScript高级程序设计(第三版)[M].入民邹电出版社_2012.

    点击查看更多：个人网站设计论文