《个人网站设计方案论文-个人网站的前端设计方案 .docx》由会员分享，可在线阅读，更多相关《个人网站设计方案论文-个人网站的前端设计方案 .docx（5页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、精品名师归纳总结个人网站设计论文 :个人网站的前端设计- 运算机论文个人网站设计论文 :个人网站的前端设计摘 要 个人网站是指因特网上一块固定的面对全世界发布消息的的方，个人网站由域名、程序和网站空间构成，通常包括主页和其他具有超链接文件的 页面。人们可以通过网站来发布自己想要公开的资讯，或者利用网站来供应相 关的网络服务。网站设计的好坏直接影响着网站的性能，本文针对个人博客网 站设计谈了自己的体会。【关键词】个人网站 HTML5 CSS3 Javascript随着互联网的进展，网络上的网站数量越来越多。个人网站的数量也与日俱增。一个好的网站不仅要保证有着良好的性能，同时页面的前端设计也得特别
2、的优秀。一个良好的前端设计往往包含了合理的配色，清楚的页面结构， 流畅的动画。随着个人网站的进展，也催生出来许多优秀的博客程序，比如：WordPress 、 Typecho 等等。那么应如何设计个人网站的前端了？1 设计语言1.1 HTML5HTML5是 HTML最新的修订版本， 2021年 10 月由万维网联盟完成标准制定。目标是替换 1999 年所制定的 HTML4.01 和 XHTML1.0 标准，以及能在互联网应用快速进展的时候，使网络标准达到匹配当代的网络需求。广义论及 HTML5时，实际指的是包括 HTML 、CSS 和 JavaScript在内的一套技术组合。它期望能够削减网页浏
3、览器对于需要插件的丰富性网络应用服务，例如： AdobeFlash 、Microsoft Silverlight与 Oracle JavaFX的需求，并且供应更多能有效加强网络应用的标准集。可编辑资料 - - - 欢迎下载精品名师归纳总结1.2 CSS3层叠样式表（ CSS），又称串样式列表、级联样式表、串接样式表、层叠样式表、阶层式样式表，一种用来为结构化文档添加样式的运算机语言，由 W3C 定义和保护。 CSS3 现在已被大部分现代浏览器支持。CSS3 分成了不同类别，称为 modules 。而每一个 modules 都有于CSS2 中额外增加的功能，以及向后兼容。 CSS3 早于 199
4、9 年已开头制订。直到 2021 年 6 月 7 日 ， CSS 3 Color Module 终 于 发 布 为 W3C Recommendation 。CSS3 里增加了不少功能，如： border-radius 、 text- shadow 等。1.3 JavaScript一种高级编程语言，通过说明执行，是一门动态类型，面对对象的直译语言。它已经由 ECMA 通过 ECMAScript实现语言的标准化。它被世界上的绝大多数网站所使用，也被世界主流浏览器支持。JavaScript是一门基于原型、函数先行的语言，是一门多范式的语言，它支持面对对象编程，命令式编程，以及函数式编程。它供应语法来
5、操控文本，数组，日期以及正就表达式等，不支持 I/O ，比如网络，储备和图形等，但这些都可以由它的宿主环境供应支持。随着最新的 HTML5和 CSS3 语言标准的推行它仍可用于嬉戏、桌面和移动应用程序的开发和在服务器端网络环境运行。2 开发工具SublimeText 是一套跨平台的文本编辑器，支持基于Python的插件。SublimeText 是专有软件，可通过包扩充本身的功能。大多数的包使用自由軟件授权发布，并由社区建置保护。 SublimeText 支持众多编程语言，并支持语可编辑资料 - - - 欢迎下载精品名师归纳总结法上色。MozillaFirefox ，中文俗称火狐，是一个自由及开
6、源的网页浏览器，由Mozilla基金会及其子公司 Mozilla公司开发。 Firefox 支持 Windows、OS X 及 Linux ，其移动版支持 Android及 FirefoxOS，这些版本的 Firefox使用Gecko 来排版网页， Gecko是一个运行当前与预期之网页标准的排版引擎，而 在 2021 年发布的 Firefox for iOS就非使用 Gecko 。3 网站前端设计3.1 站点架构第一确认了整体页面是由左右两个DIV组成，并供应一个按钮，可以按下后隐匿左边的 DIV 以达到只显示右边的DIV 的正文的目的。为 left和 right 两标签加上内容，并美化其页面
7、。3.2 页面设计作品页面主要用于存放一些作品的demo ，所以设计成了几个div以格子的形式排列，并在上面能够显示作品的预览。整体的页面框架照旧沿用首页，以达到站点整体风格的统一和css 的正确化利用，并削减开发过程。3.3 加入动画，添加特效例如显示悬浮到容器上的阴影渐变的成效如下：给容器设置 box-shadow 属性，值为 2px 2px 20px #909090 。再给这个容器设置 hover 版本的 css ，设置 为 box-shadow ： 2px 2px 70px #707070 。给容器设置 transition 属性，值为 2s 。使用 html默认支持 hover属性来
8、切换两套写好的 css3 阴影代码来实现阴影成效的切换，再使用transition属性设置动画的播放时间以达到更美观的可编辑资料 - - - 欢迎下载精品名师归纳总结成效。3.4 其他成效例如使用了 highlight.js，用于给生成的代码块添加高亮和排版成效。个人网站设计论文4 总结总之，要使整个网站有个性化的体验，不仅要页面内容丰富，动画流 畅，仍需要有相关特效，让整体成效简洁大方美观，让人有耳目一新的感觉。参考文献1 阳西术 .网页制作与网站设计（第三版）M. 华中科技高校出版社，2021.2 陆凌牛 .HTML5与 CSS3 权威指南（第三版） M. 机械工业出版社，2021.可编辑资料 - - - 欢迎下载精品名师归纳总结3NicholasC.Zakas.JavaScript高级程序设计（第三版） M. 人民邮电出版社， 2021.可编辑资料 - - - 欢迎下载