基于h5的风云网球网站的设计

目录
1绪论 1
1.1 选题背景及意义 1
1.2 国内外研究现状 2
1.3本章小结 2
2 前端开发及相关技术 4
2.1 HTML5前端开发环境 4
2.2 HTML5前端开发工具 4
2.3 HTML5前端开发相关技术 5
2.3.1 javascript简介 5
2.3.2 javascript基本特点 5
2.3.3 css简介 6
2.3.4 jQuery 7
2.4 本章小结 7
3 前端布局分析与设计 8
3.1 前端总体开发流程与设计 8
3.1.1 分层开发 8
3.1.2 代码编写 8
3.1.3 内部测试与后续优化 9
3.2 前端UI设计 9
3.2.1 模块分布 9
3.2.2 颜色配置 10
3.2.3 css元素 10
3.3 交互设计与UI 12
3.4 网站结构布局与设计 12
3.5.1 网站首页结构 12
3.5.2 主题鲜明，富有特色 13
3.5 网站前台页面设计 13
3.5.1 首页 13
3.5.2 其余子页面 14
3.7 本章小结 14
4 主要功能的实现 15
4.1 界面设计 15
4.2 具体设计文档 15
4.3 前台新闻文摘显示 15
4.3.1 网站装饰风格 15
4.3.2 网站的链接结构 16
4.4 可视化设计 16
4.5 具体实现技术 16
4.5.1 css在“基于H5的风云网球网站”中的应用实例 16
4.5.2 应用Javascript设计网页 17
4.6 本章小结 19
5 总结 20
参考文献 21
致谢 22
3 前端布局分析与设计
3.1 前端总体开发流程与设计
Web前端开发与其他平台开发不一样，它是一个先易后难的学习曲线，主要包括三个基本技能要素：HTML，CSS，和Javascript，所以前端工程师不仅要掌握这些基本技能外，还要去学习网站的性能优化，SEO和与后台服务器端交互的基础知识，而且还要善于利用各种测试辅助工具辅助开发，例如IEtext，google的debug，还要具有一定的沟通能力，协调美工设计与后台开发人员，还要掌握如何封装代码组件，增加代码维护性，代码的易用性，浏览器兼容与适配，面向对象的编程思想，等等。
3.1.1 分层开发
在响应式网站的具体概要确定之后，就要着手进行分层开发的划分，根据项目内容的不同，划分出不同的功能模块，分步完成，以便合理地安排开发时间，在有限的时间内，有条理地完成模块和需要功能，减少时间的浪费，降低开发成本，提高开发效率。整个分层开发大致分为总体结构搭建，模块制作，页面设置制作，底层JS脚本搭建，JS交互效果，内部测试，bug修复，代码优化。
3.1.2 代码编写
当总规划和设计图初稿完成后，就可以进入代码编写阶段，进行前期的前端开发，大致流程如下：搭建大致的HTML结构，然后等设计图完成后再对页面进行细节调整布局，并添加页面样式修改完善，最后搭建javascript脚本开发，嵌套脚本文件，实现逐层开发，减少整体消耗的时间，使得有更多的时间对产品进行修改，优化和完善。
确定了流程后，还需要对产品原型进行分析，研究，把复用性高的部分划分出来，重点标记，在以后的代码编写过程中，封装成一个复用组件，方便调用。并且根据二三级页面的设计布局，搭建统一的大致框架。
前端设计风格样式确定以后，进行通用组件模块样式的设计（例如按钮，分页，字体样式等）
在代码编写的过程中，要做到遵守标准的w3c行业标准，在编写代码的时候，尽可能的实现向下兼容，减少耦合性，增加扩展自由度，以便日后功能等各方面的修改。
在整个过程中，先划分好各模块的开发顺序，先编写大概的HTML布局，设计图完成后在进行CSS的开发，大大节省开发时间，提高开发效率，同时也体现了模块化开发的重要性，强调编写规范，这样便于后期维护，减少维护成本。模块化开发时工程师必备的技能，是敏捷开发必须的，易于复用与组件管理。
3.1.3 内部测试与后续优化
前端内部测试，主要是观察页面与设计图的差异，优化页面细节样式，及时发现问题并且进行修改。并且利用IEtext查看页面的兼容性，当所有细节与兼容问题修改完毕后，就要对制作文件进行代码优化，尽可能的压缩文件大小和减少外部http的链接请求数，优化访问速度。
该流程是参照网球开发流程制定出来的，以经过很长时间的磨合跟改进，尽管虽然不是很完美，但是很适合我们现在开发这个项目的需求，优点也是很明显的，能更好的应对高强度，高质量的开发需求，代码更加容易控制和修改优化，充分利用时间，提高了开发侠侣
3.2 前端UI设计
3.2.1 模块分布
UI即User Interface（用户界面）的简称。UI设计则是指对页面的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让页面变得有个性有品味，还要让页面的操作变得舒适、简单、自由，充分体现页面的定位和特点。
所以UI设计师设计中最重要的一点，也可以发挥出更多创意的设计想法；其中体现出层次感设计的就是从属关系，点构成线，线构成面，主次清晰明了。图3-1为基于H5的风云网球网站首页：

<!DOCTYPE html>
<html lang="zxx">
<head>
<title>About</title>
<!-- custom-theme -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- //custom-theme -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" property="" />
<!-- font-awesome-icons -->
<link href="css/font-awesome.css" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,900" rel="stylesheet"></head>
<body>
<!-- banner -->
<div class="header"><div class="w3layouts_header_right"><ul><li><i class="fa fa-phone" aria-hidden="true"></i>(+000) 123 456</li><li><i class="fa fa-envelope" aria-hidden="true"></i><a href="mailto:info@example.com">info@example.com</a></li></ul></div><div class="w3layouts_header_left"><ul><li><a href="#" data-toggle="modal" data-target="#myModal2"><i class="fa fa-user" aria-hidden="true"></i> Log in</a></li><li><a href="#" data-toggle="modal" data-target="#myModal3"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Sign up</a></li></ul></div><div class="clearfix"> </div></div><div class="banner"><nav class="navbar navbar-default"><div class="navbar-header navbar-left"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><h1><a class="navbar-brand" href="index.html">风云网球</a></h1></div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1"><nav class="link-effect-2" id="link-effect-2"><ul class="nav navbar-nav"><li><a href="index.html"><span data-hover="网站首页">网站首页</span></a></li><li class="active"><a href="about.html"><span data-hover="关于我们">关于我们</span></a></li><li><a href="events.html"><span data-hover="Events">Events</span></a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><span data-hover="Short Codes">Short Codes</span> <b class="caret"></b></a><ul class="dropdown-menu agile_short_dropdown"><li><a href="icons.html">Web Icons</a></li><li><a href="typography.html">Typography</a></li></ul></li><li><a href="mail.html"><span data-hover="Mail Us">Mail Us</span></a></li></ul></nav></div><div class="w3_agile_search"><form action="#" method="post"><input type="search" name="Search" placeholder="Search Keywords..." required="" /><input type="submit" value="Search"></form></div></nav></div>
<!-- /banner -->  <div class="banner1"><div class="wthree_banner1_info"><h3><span>关</span>于</h3></div></div>
<!-- //banner -->
<!-- courses --><div class="coaching_section"><div class="container"> <div class="w3_agile_team_grid"><div class="w3_agile_team_grid_left"><h3 class="w3l_header w3_agileits_header">网球 <span>教练</span></h3><p class="sub_para_agile">阿梅德</p></div></div><div class="agile_team_grids_top"><div class="col-md-6 w3ls_banner_bottom_left w3ls_courses_left"><div class="w3ls_courses_left_grids"><div class="w3ls_courses_left_grid"><h3><i class="fa fa-pencil-square-o" aria-hidden="true"></i>pulvinar neque pharetra eget</h3><p>Pellentesque convallis diam consequat magna vulputate malesuada. Cras a ornare elit. Nulla viverra pharetra sem, eget pulvinar neque pharetra ac.</p></div><div class="w3ls_courses_left_grid"><h3><i class="fa fa-pencil-square-o" aria-hidden="true"></i>consequat magna vulputate</h3><p>Pellentesque convallis diam consequat magna vulputate malesuada. Cras a ornare elit. Nulla viverra pharetra sem, eget pulvinar neque pharetra ac.</p></div><div class="w3ls_courses_left_grid"><h3><i class="fa fa-pencil-square-o" aria-hidden="true"></i>convallis diam consequat magna</h3><p>Pellentesque convallis diam consequat magna vulputate malesuada. Cras a ornare elit. Nulla viverra pharetra sem, eget pulvinar neque pharetra ac.</p></div></div></div><div class="col-md-6 agileits_courses_right"><img src="data:images/2.jpg" alt=" " class="img-responsive" /></div><div class="clearfix"> </div></div></div></div>
<!-- //courses -->
<!-- stats --><div class="stats"><div class="col-md-3 w3layouts_stats_left w3_counter_grid"><p class="counter">1,546</p><h3>Instructors</h3></div><div class="col-md-3 w3layouts_stats_left w3_counter_grid1"><p class="counter">14,345</p><h3>Instructors</h3></div><div class="col-md-3 w3layouts_stats_left w3_counter_grid2"><p class="counter">563</p><h3>Coaching Centers</h3></div><div class="col-md-3 w3layouts_stats_left w3_counter_grid3"><p class="counter">2,874</p><h3>Award's won</h3></div><div class="clearfix"> </div></div>
<!-- //stats -->
<!-- stats-bottom --><div class="team"><div class="container"> <div class="w3_agile_team_grid"><div class="w3_agile_team_grid_left"><h3 class="w3l_header w3_agileits_header">我们的 <span>优势</span></h3><p class="sub_para_agile">Ipsum dolor sit amet consectetur adipisicing elit</p></div></div><div class="agile_team_grids_top"><div class="col-md-6 w3l_stats_bottom_grid_right"><div class='bar_group'><div class='bar_group__bar thin elastic' label='Juniors' value='230'><div class='w3ls_bar_group__bar_pos'><p>65%</p></div></div><div class='bar_group__bar thin elastic' label='Individual' value='130'><div class='w3ls_bar_group__bar_pos'><p>35%</p></div></div><div class='bar_group__bar thin elastic' label='Group' value='160'><div class='w3ls_bar_group__bar_pos'><p>45%</p></div></div><div class='bar_group__bar thin elastic' label='Private Lessons' value='340'><div class='w3ls_bar_group__bar_pos'><p>100%</p></div></div></div></div><div class="col-md-6 w3l_stats_bottom_grid_left"><img src="data:images/1.jpg" alt=" " class="img-responsive" /></div><div class="clearfix"> </div></div></div></div>
<!-- //stats-bottom -->
<!-- stats-bottom-banner --><div class="stats-bottom-banner"><div class="container"><h3>We are Open to <span>All Ages</span> and Abilities</h3><p>Nunc in dolor hendrerit, pellentesque mi ac, accumsan nunc. Vestibulum sapien lacus, auctor sed ullamcorper id, aliquam molestie dui. Proin faucibus ullamcorper erat id interdum.</p></div></div>
<!-- //stats-bottom-banner -->
<!-- bootstrap-pop-up --><div class="modal video-modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>                     </div><div class="signin-form profile"><h3 class="agileinfo_sign">风云网球</h3>   <div class="modal-body"><img src="data:images/g1.jpg" alt=" " class="img-responsive" /><p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur.<i>" Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur.</i></p></div></div></div></div></div>
<!-- //bootstrap-pop-up -->
<!-- testimonials --><div class="testimonials"><div class="container"><h3 class="w3l_header w3_agileits_header">我们的 <span>老师</span></h3><p class="sub_para_agile">Ipsum dolor sit amet consectetur adipisicing elit</p><div class="w3ls_testimonials_grids"><section class="center slider"><div class="agileits_testimonial_grid"><div class="w3l_testimonial_grid"><p>In eu auctor felis, id eleifend dolor. Integer bibendum dictum erat, non laoreet dolor.</p><h4>Rosy Crisp</h4><h5>Instructor</h5><div class="w3l_testimonial_grid_pos"><img src="data:images/1.png" alt=" " class="img-responsive" /></div></div></div><div class="agileits_testimonial_grid"><div class="w3l_testimonial_grid"><p>In eu auctor felis, id eleifend dolor. Integer bibendum dictum erat, non laoreet dolor.</p><h4>Laura Paul</h4><h5>Instructor</h5><div class="w3l_testimonial_grid_pos"><img src="data:images/2.png" alt=" " class="img-responsive" /></div></div></div><div class="agileits_testimonial_grid"><div class="w3l_testimonial_grid"><p>In eu auctor felis, id eleifend dolor. Integer bibendum dictum erat, non laoreet dolor.</p><h4>Michael Doe</h4><h5>Instructor</h5><div class="w3l_testimonial_grid_pos"><img src="data:images/3.png" alt=" " class="img-responsive" /></div></div></div></section></div></div></div>
<!-- //testimonials -->
<!-- footer -->
<div class="footer_agile_w3ls"><div class="container"><div class="agileits_w3layouts_footer_grids"><div class="col-md-3 footer-w3-agileits"><h3>Training Grounds</h3><ul><li>Etiam quis placerat</li><li>the printing</li><li>unknown printer</li><li>Lorem Ipsum</li></ul></div><div class="col-md-3 footer-agileits"><h3>Specialized</h3><ul><li>the printing</li><li>Etiam quis placerat</li><li>Lorem Ipsum</li><li>unknown printer</li></ul></div><div class="col-md-3 footer-wthree"><h3>Partners</h3><ul><li>unknown printer</li><li>Lorem Ipsum</li><li>the printing</li><li>Etiam quis placerat</li></ul></div><div class="col-md-3 footer-agileits-w3layouts"><h3>Our Links</h3><ul><li><a href="index.html">网站首页</a></li><li><a href="about.html">About</a></li><li><a href="events.html">Events</a></li><li><a href="mail.html">Mail Us</a></li></ul></div><div class="clearfix"></div></div><div class="agileits_w3layouts_logo logo2"><h2><a href="index.html">风云网球</a></h2><div class="agileits-social"><ul><li><a href="#"><i class="fa fa-facebook"></i></a></li><li><a href="#"><i class="fa fa-twitter"></i></a></li><li><a href="#"><i class="fa fa-rss"></i></a></li><li><a href="#"><i class="fa fa-vk"></i></a></li></ul></div></div></div>
</div>
<div class="wthree_copy_right"><div class="container"><p>Copyright &copy; 2019.风云网球</p></div>
</div>
<!-- //footer --><div class="modal fade" id="myModal2" tabindex="-1" role="dialog"><div class="modal-dialog"><!-- Modal content--><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal">&times;</button><div class="signin-form profile"><h3 class="agileinfo_sign">Sign In</h3>  <div class="login-form"><form action="#" method="post"><input type="email" name="email" placeholder="E-mail" required=""><input type="password" name="password" placeholder="Password" required=""><div class="tp"><input type="submit" value="Sign In"></div></form></div><div class="login-social-grids"><ul><li><a href="#"><i class="fa fa-facebook"></i></a></li><li><a href="#"><i class="fa fa-twitter"></i></a></li><li><a href="#"><i class="fa fa-rss"></i></a></li></ul></div><p><a href="#" data-toggle="modal" data-target="#myModal3" > Don't have an account?</a></p></div></div></div></div></div><!-- //Modal1 -->  <!-- Modal2 --><div class="modal fade" id="myModal3" tabindex="-1" role="dialog"><div class="modal-dialog"><!-- Modal content--><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal">&times;</button><div class="signin-form profile"><h3 class="agileinfo_sign">Sign Up</h3>    <div class="login-form"><form action="#" method="post"><input type="text" name="name" placeholder="Username" required=""><input type="email" name="email" placeholder="Email" required=""><input type="password" name="password" placeholder="Password" required=""><input type="password" name="password" placeholder="Confirm Password" required=""><input type="submit" value="Sign Up"></form></div><p><a href="#"> By clicking register, I agree to your terms</a></p></div></div></div></div></div><!-- //Modal2 -->  <!-- //bootstrap-pop-up -->
<!-- js -->
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<!-- //js -->
<script src="js/bars.js"></script>
<!-- stats --><script src="js/jquery.waypoints.min.js"></script><script src="js/jquery.countup.js"></script><script>$('.counter').countUp();</script>
<!-- //stats -->
<!-- carousal --><script src="js/slick.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(document).on('ready', function() {$(".center").slick({dots: true,infinite: true,centerMode: true,slidesToShow: 2,slidesToScroll: 2,responsive: [{breakpoint: 768,settings: {arrows: true,centerMode: false,slidesToShow: 2}},{breakpoint: 480,settings: {arrows: true,centerMode: false,centerPadding: '40px',slidesToShow: 1}}]});});</script>
<!-- //carousal -->
<!-- start-smooth-scrolling -->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">jQuery(document).ready(function($) {$(".scroll").click(function(event){       event.preventDefault();$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);});});
</script>
<!-- start-smooth-scrolling -->
<!-- for bootstrap working --><script src="js/bootstrap.js"></script>
<!-- //for bootstrap working -->
<!-- here stars scrolling icon --><script type="text/javascript">$(document).ready(function() {/*var defaults = {containerID: 'toTop', // fading element idcontainerHoverID: 'toTopHover', // fading element hover idscrollSpeed: 1200,easingType: 'linear' };*/$().UItoTop({ easingType: 'easeOutQuart' });});</script>
<!-- //here ends scrolling icon -->
</body>
</html>

基于h5的风云网球网站的设计相关推荐

java响应式网页设计_基于HTML5的响应式网站的设计与实现(论文).docx
毕业论文基于HTML5的响应式网站的设计与实现摘要随着网络的发展和普及,各类建站技术的更新与运用,现在搭建一个网站的时间和成本越来越低,使得企业官方网站得到了极大的发展.从早期简单的网页展示, ...
基于Android的期刊投稿网站的设计与开发
摘要在我国,3G/4G移动互联网技术飞速发展,甚至第五代移动通信网络也正在研究中,手机的普及化让诸多行业有了改进的机遇.本课题借助于互联网和智能手机的飞速发展针对现在的期刊投稿情况,希望可以让作者 ...
Java 电商订单管理设计,基于Java的电商网站的设计与实现
基于Java的电商网站的设计与实现 (获取作品请联系在线客服) 温馨提示:已经在本站下定的(原创)毕业设计(毕业论文)将不会再次出售!请你放心购买! 拟定毕业论文(设计)题目基于Java的电商网站的 ...
基于Android的招聘求职网站的设计与实现
毕业设计基于Android的招聘求职网站的设计与实现 1．课题意义及目标在二十一世纪求职方式跟以前是不同的,与在各个用人单位和招聘会上寻找理想的工作,基于安卓的招聘系统能够提供最好的最丰富及时的招 ...
基于SSM框架的旅游网站的设计与实现
1 简介今天向大家介绍一个帮助往届学生完成的毕业设计项目,*基于SSM框架的旅游网站的设计与实现 *. 计算机毕业生设计,课程设计需要帮助的可以找我 2 设计概要 1.1.研究背景随着互联网技术的 ...
ssm基于JAVA的求职招聘网站的设计与实现计算机毕业设计
最新200套计算机专业原创毕业设计参考选题都有源码+数据库是近期作品如果题目不合适,可以去我上传的资源里面找题目,找不到的话,评论留下题目,站内私我或add用户名,有时间看到机会给您发 1 2100 ...
基于php校园网站的毕业设计论文,基于php技术的校园网站的设计与实现_毕设论文.doc...
基于php技术的校园网站的设计与实现_毕设论文基于PHP技术的校园网站的设计与实现 [摘要] 随着我国经济与科技的不断发展,教育信息化.校园网络化作为网络时代的教育方式和环境,已经成为教育发展的方向 ...
asp毕业设计——基于asp+sqlserver的个人网站建设设计与实现（毕业论文+程序源码）——个人网站建设
基于asp+sqlserver的个人网站建设设计与实现(毕业论文+程序源码) 大家好,今天给大家介绍基于asp+sqlserver的个人网站建设设计与实现,文章末尾附有本毕业设计的论文和源码下载地址哦 ...
javweb音乐网站_基于JavaWeb技术的音乐网站的设计与实现.doc
基于JavaWeb技术的音乐网站的设计与实现本科毕业设计目录1 1.1 课题研究背景与意义1 1.2 音乐网站的研究现状2 1.3 本论文的结构和主要工作2 第二章系统环境概述2 2.1 开发 ...

基于h5的风云网球网站的设计

基于h5的风云网球网站的设计相关推荐

最新文章

热门文章