上海代写论文网专业提供代写毕业论文、代写本科论文服务
联系方式

推荐论文

您现在的位置:首页 > 计算机论文 > 网站设计论文 > 浅谈个人博客网站设计的体会 
浅谈个人博客网站设计的体会 
发布时间:2019-04-15

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

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

网页设计

  1 设计语言
  
  1.1 HTML5

  
  HTML5是HTML最新的修订版本, 2014年10月由万维网联盟完成标准制定。目标是替换1999年所制定的HTML 4.01和XHTML1.0标准, 以及能在互联网应用迅速发展的时候, 使网络标准达到匹配当代的网络需求。广义论及HTML5时, 实际指的是包括HTML、CSS和Java Script在内的一套技术组合。它希望能够减少网页浏览器对于需要插件的丰富性网络应用服务, 例如:Adobe Flash、Microsoft Silverlight与Oracle Java FX的需求, 并且提供更多能有效加强网络应用的标准集。
  
  1.2 CSS3
  
  层叠样式表 (CSS) , 又称串样式列表、级联样式表、串接样式表、层叠样式表、阶层式样式表, 一种用来为结构化文档添加样式的计算机语言, 由W3C定义和维护。CSS3现在已被大部分现代浏览器支持。
  
  CSS3分成了不同类别, 称为“modules”.而每一个“modules”都有于CSS2中额外增加的功能, 以及向后兼容。CSS3早于1999年已开始制订。直到2011年6月7日, CSS 3 Color Module终于发布为W3C Recommendation.CSS3里增加了不少功能, 如:“border-radius”、“text-shadow”等。
  
  1.3 Java Script
  
  一种高级编程语言, 通过解释执行, 是一门动态类型, 面向对象的直译语言。它已经由ECMA通过ECMAScript实现语言的标准化。它被世界上的绝大多数网站所使用, 也被世界主流浏览器支持。Java Script是一门基于原型、函数先行的语言, 是一门多范式的语言, 它支持面向对象编程, 命令式编程, 以及函数式编程。它提供语法来操控文本, 数组, 日期以及正则表达式等, 不支持I/O, 比如网络, 存储和图形等, 但这些都可以由它的宿主环境提供支持。随着最新的HTML5和CSS3语言标准的推行它还可用于游戏、桌面和移动应用程序的开发和在服务器端网络环境运行。
  
  2 开发工具
  
  Sublime Text是一套跨平台的文本编辑器, 支持基于Python的插件。Sublime Text是专有软件, 可通过包扩充本身的功能。大多数的包使用自由软件授权发布, 并由社区建置维护。Sublime Text支持众多编程语言, 并支持语法上色。
  
  Mozilla Firefox, 中文俗称火狐, 是一个自由及开源的网页浏览器, 由Mozilla基金会及其子公司Mozilla公司开发。Firefox支持Windows、OS X及Linux, 其移动版支持Android及Firefox OS, 这些版本的Firefox使用Gecko来排版网页, Gecko是一个运行当前与预期之网页标准的排版引擎, 而在2015年发布的Firefox for i OS则非使用Gecko.
  
  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属性设置动画的播放时间以达到更美观的效果。
  
  3.4 其他效果
  
  例如使用了highlight.js, 用于给<pre><code>生成的代码块添加高亮和排版效果。
  
  <link rel=“stylesheet”href=“http://yandex.st/highlightjs/8.0/styles/solarized_dark.min.css”>
  
  <script src=“http://yandex.st/highlightjs/8.0/highlight.min.js”></script>
  
  <script>hljs.init Highlighting On Load () ;</script>
  
  4 总结
  
  总之, 要使整个网站有个性化的体验, 不仅要页面内容丰富, 动画流畅, 还需要有相关特效, 让整体效果简洁大方美观, 让人有耳目一新的感觉。
  
  参考文献
  [1]阳西术。网页制作与网站设计 (第三版) [M].华中科技大学出版社, 2016.
  [2]陆凌牛。HTML5与CSS3权威指南 (第三版) [M].机械工业出版社, 2013.
  [3]Nicholas C.Zakas.Java Script高级程序设计 (第三版) [M].人民邮电出版社, 2012.

版权所有:上海论文网专业权威的论文代写、论文发表的网站,秉承信誉至上、用户为首的服务理念,服务好每一位客户
本站部分论文收集于网络,如有不慎侵犯您的权益,请您及时致电或写信告知,我们将第一时间处理,邮箱:shlunwen@163.com