基于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="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="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="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="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="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="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 id
				containerHoverID: 'toTopHover', // fading element hover id
				scrollSpeed: 1200,
				easingType: 'linear' 
				};
			*/
								
			$().UItoTop({ easingType: 'easeOutQuart' });
								
			});
	</script>
<!-- //here ends scrolling icon -->
</body>
</html>