【Web开发及人机交互导论】Bike Sharing网页设计

Alex_Shen
2021-05-23 / 0 评论 / 0 点赞 / 86 阅读 / 18,661 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-04-06,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

代码:Github仓库地址

一、项目要求

Bike Sharing Website Development

Bikesharing.com is a new website and mobile companion app that is designed to promote increased use of cycling to and from work. Its main aim is to educate both employees and employers about the health and financial benefits of enrolling in the national cycle to work programme.

The website will be mostly informational – but will also contain maps of cycle ways and advice on cycles including reviews and maintenance.

As a junior web developer, you are to pitch for the Bikesharing.com website by developing a prototype website and supporting documentation. This includes the mark-up, project plan, visual design, content design, navigation design, and target audience/user scenarios (see individual worksheets for specific deliverables).

The prototype Website should work on HTML5 / CSS3 compliant browsers.

The Employee

Typical Tasks Include: Looking for further information on the financial aspects of the scheme. Viewing the nearest cycle shops that are participating in the scheme. Locating suitable cycle maps to and from their home / place of work.

The Employer

Typical Tasks Include: How to enrol the organisation into the cycle to work scheme. General administration advice. Legislation and insurance information.

Suggested Content Areas. (Website)

  • Home Page
    Employers
    Employee’s
    Cycle Reviews
    How to guides
    Interactive Maps
    Cost calculator
    Social Media Integration

You are free to propose a suitable visual design that reflects the type of website and target audience requirements. There are no set colours or logos for Bikesharing.com – if you want to create these, you are free to do so!

二、项目知识点

  1. Web需求分析能力;
  2. Web页面的WireFrame设计能力;
  3. 使用各种HTML标记实现Web页面的各项内容
  4. 使用CSS技术实现页面的样式管理
  5. 使用javascript实现人机交互功能

三、Planning, Analysis and Design Documentation

1. Project Plan

根据对于项目要求的阅读,了解到本次项目的主要要求时构建一个以鼓动员工参与骑行活动为主题的Bikecycling.com网站建设。初步计划完成主页,导航,共享单车位置查询,登陆注册,以及针对雇员雇主的独立页面设计。

2. Audience Analysis

Primary Audience: 首要用户是公司的雇员。
Secondary Audience: 次要用户是公司的雇主们,再次是外网访问用户。

3. Statement of Purpose and Market Analysis

对于不同用户有着不同的目的。

雇员:主要任务是让他们了解到骑行的益处及便利,让员工们能进一步增强锻炼的意识,积极参加活动。
雇主:主要任务是参与对于雇员的管理任务,从各方位了解到员工们的参与度。同时,进行对于活动的策划与管理。
外网访问用户:主要任务是让他们了解了解到骑行的益处及便利,展示公司文化。

4. A Navigation Chart

Content Analysis:

Bikecycling.com的主要面向对象是雇主,雇员,外网访问用户,同时网站主要目的是推广骑行,所以主要内容是以个人骑行锻炼为主要方向。次要内容是以推广骑行活动,展示文化。

主要任务:

  1. 全体用户:导航+共享单车位置查询
  2. 雇员:骑行锻炼统计+骑行活动报名
  3. 雇主:活动策划

相关次要任务:

  1. 雇员:价格计算器(激励骑行)
  2. 雇主:骑行活动人员统计

可获取资源:

  1. 全体用户:有关自行车的新闻+自行车相关网页+与开发人员交流
  2. 雇员:深圳市自行车维修点信息
  3. 雇主:相关政策信息

5. Visual Style (Storyboard / Moodboard).

Storyboard:
在这里插入图片描述
在这里插入图片描述

四、Website Document Outline

1.Wireframe Design

主页:
在这里插入图片描述
雇主雇员入口:
在这里插入图片描述
登陆注册页面:
在这里插入图片描述

2.Functional Description

1. 主页

  1. 相关新闻及知识普及
    附上文章两篇:
    骑自行车的深层解析:“绿色、环保、健康”!&让你不再误解,骑自行车上班

  2. 自行车相关网页链接
    可以通过链接直接进入中国自行车爱好者,中国自行车协会网,自行车百度百科的网页

  3. 联系方式
    可以直接与网页开发人员直接联系

2. 百度地图导航查询

  1. 导航功能
    根据用户输入的起点与终点,提供最便捷的骑行路线规划,以达到既安全又省时的骑行之旅。

3. 百度地图共享单车位置查询

  1. 共享单车位置查询
    用户打开页面就可以看见深圳大学附近的共享单车位置(通过红点标出)。

4. 雇员入口

  1. 深圳自行车维修点查询
    向用户提供数个自行车维修点的位置信息,并且可以由用户向后台提供新的店名地址信息。(不会及时出现在页面上,需要后台经过审核校对)
  2. 每日骑行统计
    展示用户每天的骑行锻炼记录,也提供提交锻炼记录的接口。(由于是用户自身的锻炼记录,所以会立即出现在页面上进行展示,同时将数据同步到价格计算器)
  3. 价格计算器
    根据用户输入的每日骑行统计,计算出大概的节约费用,(依据假设快车每公里1.6元,共享单车每公里0.2元,即每公里节约1.4元计算),从而激励用户从节约费用的角度参与骑行活动。
  4. 公司骑行活动报名
    展示公司骑行活动的活动介绍及奖励,附上报名链接,激发员工的积极程度。(由于需要审核,不会立即反馈到雇主页面的人员统计表中)

5.雇主入口

  1. 公司骑行活动策划
    由公司雇主完成对于骑行活动的策划工作,雇主可以在此页面完成对于活动介绍及奖励的修改工作。
  2. 公司骑行活动人员统计
    展示公司参与骑行活动人员的姓名、工号、当前骑行总里程数。
  3. 相关政策信息
    展示有关“十三五”提倡的“鼓励自行车”的意见,并通过内嵌网页的形式进行展示。

6. 登录/注册页面

  1. 登陆页面
    用户通过用户名、密码、验证码登录网站,并且提供了自动登录的选项。如果用户未注册,也可以通过注册按钮跳转到注册页面。
  2. 注册页面
    用户通过用户名、密码、验证码注册网站帐号。

五、Website Layout,and Website Presentational, Enhancement

1. CSS design document and functional description

一: CSS design document

网页大框架CSS样式设置

主框架
.wrapper {
	width: 940px;
	margin: 20px auto 20px auto;
	border: 2px solid #000000;
	background-color: #ffffff;}
	网站总框架图,包含了所有的网页内容

在这里插入图片描述
利用position:fixed,z-index使得顶栏永远位于网页最高,且是最高图层

顶栏
.top {position: fixed;top: 0px;
	left: 0px;	padding: 0px;
	margin: 0px;	height: 50px;
	width: 100%;	background-color: gainsboro;
	/*位于最高层 永远位于页面顶端*/
	z-index: 2;}

在这里插入图片描述
导航栏与页脚根据不同网页内容布局,会有微小差别。具体区别在内嵌CSS设置。

导航栏,页脚
nav,
footer {
	clear: both;
	color: #ffffff;
	background-color: #aeaca8;
	height: 30px;
}

在这里插入图片描述在这里插入图片描述

内容框
section.courses {
	float: left;
	width: 680px;
	border-right: 1px solid #eeeeee;
}

在这里插入图片描述

侧栏,内含两个article,具体CSS见大作业.CSS。
aside {	width: 230px;
	/*紧贴section*/
	float: left;
	padding: 0px 0px 0px 20px;
}

在这里插入图片描述
特色部分CSS:

按钮样式:
input {
	font-size: 80%;
	color: #5a5854;
	background-color: #f2f2f2;
	border: 1px solid #bdbdbd;
	/*设置inputbox的边框圆角形状*/
	border-radius: 5px;
	padding: 5px 10px 5px 10px;
	margin-bottom: 10px;
}

在这里插入图片描述 在这里插入图片描述

侧栏超链接动态变化
aside section a {
	display: block;
	padding: 10px;
	border-bottom: 1px solid #eeeeee;
}

aside section a:hover {
	color: #985d6a;
	background-color: #efefef;
}

a {
	color: #de6581;
	text-decoration: none;
}

在这里插入图片描述
在这里插入图片描述

功能键动态变化
.functionButton {
	color: #444444;
	font-size: 16px;
	text-shadow: 0px 1px 1px #ffffff;
	border-bottom: 2px solid #b2b2b2;
	background-color: #b9e4e3;
	/*设置平常渐变颜色*/
	background: -webkit-gradient(linear, left top, left bottom, from(#beeae9), to(#a8cfce));
	background: -moz-linear-gradient(top, #beeae9, #a8cfce);
	background: -o-linear-gradient(top, #beeae9, #a8cfce);
	background: -ms-linear-gradient(top, #beeae9, #a8cfce);
}
.functionButton:hover {
	color: #333333;
	border: 1px solid #a4a4a4;
	border-top: 2px solid #b2b2b2;
	background-color: #a0dbc4;
	/*设置hover时的渐变色*/
	background: -webkit-gradient(linear, left top, left bottom, from(#a8cfce), to(#beeae9));
	background: -moz-linear-gradient(top, #a8cfce, #beeae9);
	background: -o-linear-gradient(top, #a8cfce, #beeae9);
	background: -ms-linear-gradient(top, #a8cfce, #beeae9);
}

在这里插入图片描述
在这里插入图片描述

二:functional description(以下为HTML&JS代码部分解析以及后期开发指南)

1.主页

  • 相关新闻及知识普及
<article>
<figure>
		<img src="image/bicycle1.jpg" alt="bicycle1" width="290px" height="180px" />
		<figcaption>节能环保 绿色出行</figcaption>
	</figure>
	<hgroup>
		<h2>骑自行车的深层解析:</h2>
		<h3>“绿色、环保、健康”!</h3>
	</hgroup>
	<p>在如今的时代,越来越多的人喜欢玩手机,喜欢宅在家里。锻炼身体这件事,也只是停留在嘴上,真正发生变化的,是我们肥胖的身体,以及颓废的心灵。这时,我们更应该多去外面骑骑车,看看大自然的景色,呼吸新鲜的空气,顺便放松一下心情。坚持每周骑行一次,既能锻炼身体,又能放松心情。</p>
</article>

<figure>因为float:left位于左侧,包含了图片+说明文字
<hgroup>为两个标题组,包含正标题与副标题
<p>是正文部分
上下两个部分为相同HTML结构。
后期如果需要添加新的文章,可以以同样的方式添加<article>,同时调整courses的高度,达到包含的目的。

  • 自行车相关网页链接
<section class="related-website">
	<h2>自行车相关网页</h2>
	<a href="http://www.chinabike.net/" target="_blank">中国自行车爱好者</a>
<a href="http://www.china-bicycle.com/" target="_blank">中国自行车协会网</a>
	<a href="https://baike.baidu.com/item/64?fr=aladdin" target="_blank">自行车百度百科</a>
</section>

利用超链接标签,链接到外网。target="_blank"是为了在新的标签页打开网站。
后期添加新的网站可以以相同的格式添加超链接标签。

  • 联系方式
<section class="contact-details">
	<h2>联系方式</h2>
	<p>微博:xxxxxxxx<br />
		微信公众号:xxxxxxxx<br />
		网页开发人员微信:xxxxxxxx
	</p>
	<form>
	<p>期待收到来自您的意见与反馈</p>
		<textarea name="message" cols="25" rows="6" style="resize: none;"></textarea>
		<input type="submit" value="提交" />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	<input type="reset" value="清空" />
</form>
</section>

后期开发可以创立属于公司独有的社交媒体,并通过后端将意见反馈等汇总,做到网站的优化。

  1. 百度地图导航查询
  • 导航功能
<script type="text/javascript">
var name1 = null,
		name2 = null;
	alert("请输入你的起点与终点");
	name1 = prompt("输入你的起点", "深圳大学(粤海校区)");
	name2 = prompt("输入你的终点", "深圳腾讯滨海大厦");
	alert("如有需要,请在地图上选择具体出发点、终点")
	var map = new BMap.Map("container");
	map.centerAndZoom(new BMap.Point(113.94585, 22.537589), 18);
	map.enableScrollWheelZoom();
	var riding = new BMap.RidingRoute(map, {
		renderOptions: {
			map: map,
			autoViewport: true
		}
	});
//显示当行路径
	riding.search(name1, name2);
	var top_left_control = new BMap.ScaleControl({
		anchor: BMAP_ANCHOR_TOP_LEFT
	}); // 左上角,添加比例尺
	var top_left_navigation = new BMap.NavigationControl(); //左上角,添加默认缩放平移控件
	var top_right_navigation = new BMap.NavigationControl({
		anchor: BMAP_ANCHOR_TOP_RIGHT,
		type: BMAP_NAVIGATION_CONTROL_SMALL
	}); //右上角,仅包含平移和缩放按钮
	/*缩放控件type有四种类型:
	BMAP_NAVIGATION_CONTROL_SMALL:仅包含平移和缩放按钮;
BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮;
BMAP_NAVIGATION_CONTROL_ZOOM:仅包含缩放按钮*/
	map.addControl(top_left_control);
	map.addControl(top_left_navigation);
	map.addControl(top_right_navigation);
</script>

这是一个简易的基于百度地图API的导航网页设计。
基本思路是通过Alert框获取用户的起点与终点位置信息,然后通过riding.search查找骑行路径。
其中起点与终点位置可以是具体地址也可以是模糊地址。具体地址会根据起点终点直接给出推荐路径,模糊地址会给用户选项,进行起点终点的具体选择。
后面部分为地图提供了缩放控件,同时添加map.enableScrollWheelZoom();使用户可以通过滑轮缩放地图。
并且网页顶端给出了再次查询的按钮。
后期开发可以基于此网页添加新的地图图层,还可以添加路况判断等辅助工具,进一步优化地图导航系统。

  1. 百度地图共享单车位置查询
  • 共享单车位置查询
<script type="text/javascript">
	// 百度地图API功能
	var map = new BMap.Map("allmap");
	var point = new BMap.Point(113.94585, 22.537589);
	map.enableScrollWheelZoom();
	map.centerAndZoom(point, 20);
	// 编写自定义函数,创建标注
	function addMarker(point) {
		var marker = new BMap.Marker(point);
		map.addOverlay(marker);
	}
	// 随机向地图添加25个标注
	var bounds = map.getBounds();
	var sw = bounds.getSouthWest();
	var ne = bounds.getNorthEast();
	var lngSpan = Math.abs(sw.lng - ne.lng);
	var latSpan = Math.abs(ne.lat - sw.lat);
	for (var i = 0; i < 70; i++) {
		var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 1), ne.lat - latSpan * (Math.random() * 1));
		addMarker(point);
	}
</script>

这是一个基于百度地图API的仿真共享单车位置查询功能。
基本思路是确定地图中心点后,通过随机函数,随机生成70个红点,用来标注(意为共享单车位置)。
后期开发可以植入摩拜单车等共享单车数据库,通过联动查询单车位置。这里因为技术原因,暂时无法完成开发。

  1. 雇员入口
    *新功能添加方法(雇员功能与雇主功能添加方法相同)

设计思路:将功能区置于<div class=’functionX’>中,再将这个div置于<div class=’functionPlace’>中。通过按键触发JS动态效果,使得需要展示的div的display属性设置为block,不需要展示的div的display属性设置为none。
后期开发:添加新功能在功能栏处添加新button,再在内容区添加div。最后通过JS设置相对应的div的display属性,以达到自控功能展示隐藏的效果。

<section class="functionMenu">
	<h2>功能</h2>	
	<input type="button" class="functionButton" id="function1Button" value="深圳自行车维修点查询" />
	<input type="button" class="functionButton" id="function2Button" value="每日骑行统计" /><br />
	<input type="button" class="functionButton" id="function4Button" value="价格计算器" />
	<input type="button" class="functionButton" id="function3Button" value="公司骑行活动报名" />
</section>
document.getElementById("function4Button").onclick = function() {
	document.getElementById("function1").style.display = "none";
	document.getElementById("function2").style.display = "none";
	document.getElementById("function3").style.display = "none";
	document.getElementById("function4").style.display = "block";
}
  • 深圳自行车维修点查询
<div id="function1">
	<table>
		<tbody>
			<tr>
				<th>序号</th>
				<th>店名</th>
				<th>地址</th>
			</tr>
			<tr>
				<th>1.</th>
				<td>粤兴单车维修</td>
				<td>广东省深圳市南山区大板桥巷40-3号</td>
			</tr>
			<tr>
				<th>2.</th>
				<td>专业电动车单车维修</td>
				<td>深圳市龙华区弓村一区20-1</td>
			</tr>
		</tbody>
	</table>
	<form>
	<h4>
		欢迎提供新的自行车维修点:
	</h4>			
<label>店名:</label>
	<input type="text" name="shopname" size="15" maxlength="15" autocomplete="off" />
		<label>地址:</label>
		<input type="text" name="shopaddress" size="30" maxlength="30" autocomplete="off"/>
		<input id="form1" type="button" onclick="clear1()" value="提交" />
</form>
</div>

后期开发可以通过后台验证用户提供信息是否准确,从而确定是否展示地址信息。因为本次大作业只涉及前端,故不作验证工作。

  • 每日骑行统计
<div id="function2">
<form>
		<table class="table22">
			<tbody id="table2">
				<tr>
					<th>序号</th><th>日期</th><th>骑行距离(km)</th>
				</tr>
				<tr>
					<th>1.</th><td>2020-05-01</td><td>2km</td>
					</tr>
				<tr>
			</tbody>
		</table>
		<h4>输入并更新你的骑行日志:(可在价格计算器查询节约总费用)</h4>
		<form>
			<label>日期:</label>
			<input id="submitDate" type="date" name="date" />
			<label>骑行距离:</label>
			<input id="distance" type="text" name="distance" size="5" maxlength="5" autocomplete="off"/>
			<input id="form2" type="button" onclick="clear2()" value="提交" />
		</form>
	</form>
</div>
function clear2() {
	/*根据行数,推断下一次的序列号*/
	var rownum = document.getElementById("table2").rows.length;
	/*获得inputbox的输入属性*/
	var date1 = document.getElementById('submitDate').value;
	var distance1 = document.getElementById('distance').value;
	/*因为div为固定高度,若大于11行,信息会超出div*/
	if (rownum > 11) {
		alert("当前骑行信息太多,请联系管理员删除部分信息。");
		return;
	}
	/*检查是否为空信息*/
	if (date1 == "" || distance1 == "") {
		alert("请正确输入信息!");
		return;
	}
	/*添加新的一行*/
	addtr(rownum, date1, distance1);
	addtr2(rownum, date1, distance1);
	/*清空表单*/
	document.getElementById('form2').form.reset();
}
function addtr(num, date, distance) {
	var j = 1;
	var tableobj = document.getElementById("table2");
	var trobj = document.createElement("tr");
	var tdobj = document.createElement("td");
	var thobj = document.createElement("th");
	/*在dom树下添加新的子节点,第一项为th,后两项为td*/
	for (var i = 0; i < 3; i++) {
		if (i == 0) {
			var thobj = document.createElement("th");
			thobj.innerHTML = num + '.';
			trobj.appendChild(thobj);
			continue;
		}
		if (i == 1) {
			var tdobj = document.createElement("td");
			tdobj.innerHTML = date;
			trobj.appendChild(tdobj);
		}
		if (i == 2) {
			var tdobj = document.createElement("td");
			tdobj.innerHTML = distance + 'km';
			trobj.appendChild(tdobj);
		}
	}
	trobj.appendChild(tdobj);
	tableobj.appendChild(trobj);
}

本页的动态效果是由添加dom树子节点的方式完成的,同时完成了功能之间的联动效果,实现了信息的同步传递。Addtr()实现本页数据更新,addtr2()实现价格计算器页面的数据更新。
JS动态思路解释见代码区注释,for循环看似多余,实则是为了后期开发提供模板。因为本次每一栏之间有需要不同的if代码支撑,但是如果新添加的信息与前几栏信息相似度较高,可以使用for循环的方式简化代码。
Add2()将在价格计算器中展示。

  • 价格计算器
<div id="function4">
	<p>说明:假设快车每公里1.6元,共享单车每公里0.2元,本页面可大致计算每月节约总费用</p>
	<form>
		<table class="table22">
			<tbody id="table4">
			<tr>
				<th>序号</th>
				<th>日期</th>
				<th>骑行距离(km)</th>
				<th>节约总费用(元)</th>
			</tr>
			<tr>
				<th>1.</th>
				<td>2020-05-01</td>
				<td>2km</td>
				<td>2.8</td>
			</tr>
				<th>4.</th>
				<td>2020-06-01</td>
				<td>3.2km</td>
				<td id="last5">21.98</td>
			</tr>
		</tbody>
function addtr2(num, date, distance) {
	var j = 1;
	var tableobj = document.getElementById("table4");
	var trobj = document.createElement("tr");
	var tdobj = document.createElement("td");
	var thobj = document.createElement("th");
	/*在dom树下添加新的子节点,第一项为th,后三项为td*/
	for (var i = 0; i < 4; i++) {
		if (i == 0) {
			var thobj = document.createElement("th");
			thobj.innerHTML = num + '.';
			trobj.appendChild(thobj);
			continue;
		}
		if (i == 1) {
			var tdobj = document.createElement("td");
			tdobj.innerHTML = date;
			trobj.appendChild(tdobj);
		}
		if (i == 2) {
			var tdobj = document.createElement("td");
			tdobj.innerHTML = distance + 'km';
			trobj.appendChild(tdobj);
		}
		if (i == 3) {
			var tdobj = document.createElement("td");
			var id = "last" + num;
			/*为新id做准备*/
			num++;
			/*获取前一次总价*/
			var sum_ = document.getElementById(id).innerHTML;
			/*强制转换为float型*/
			var sum = parseFloat(sum_);
			sum += distance * 1.4;
			/*保留两位小数*/
			sum = Math.round(sum * 100) / 100
			tdobj.innerHTML = sum;
			tdobj.id = "last" + num;
			trobj.appendChild(tdobj);
		}
	}
	trobj.appendChild(tdobj);
	tableobj.appendChild(trobj);
}

思路与更新每日骑行统计相类似,多的是对于原有数据的采集工作,需要获取前一次总价,再加上新里程*1.4,完成数学运算后添加。具体注释见代码区。

  • 公司骑行活动报名
<div id="function3">
	<h2>活动介绍:</h2>
	<p>加强国家的环保观念,我们公司提倡“低碳生活,从骑行开始;关爱地球,文明出行”的理念,营造一个“和谐、环保、健身、文明、沟通”的环境。<br />
		带领自行车爱好者进行活动,为广大员工增加一个互相交流学习的平台,促进同事间关系,增进大家的友谊,促进大家团队合作的意识。<br />
		为在员工提供一次锻炼身体的机会,增强大家的体质,提醒大家要时刻锻炼身体。<br />
	</p>
	<ol>
		<h3>奖励如下:</h3>
		<li>第1名:2000元+带薪休假3天</li>
		<li>第2-5名:1000元+带薪休假2天</li>
		<li>第5-10名:500元</li>
	</ol>
	<p>报名链接↓</p>
	<form>
		<label>工号:</label>
		<input id="workNum" type="text" name="workNum" size="8" maxlength="8" placeholder="00000001" autocomplete="off"/>
		<label>姓名:</label>
		<input id="workerName" type="text" name="workerName" size="5" maxlength="5" placeholder="xxxxx" autocomplete="off"/>
		<input id="form3" type="button" onclick="clear3()" value="提交" />
	</form>
</div>

后期开发可以进一步实现与雇主页面的互动。将从雇员页面获得的报名信息同步到雇主页面的人员统计栏,同时也将雇主页面的活动策划信息更新到雇员页面,做到更好的交互性。
目前通过JS,jQuery无法很好的完成不同页面之间的互动,可能需要后台数据库的支撑,故暂时无法完成此需求。

  1. 雇主入口
  • 公司骑行活动策划
<div id="function1">
	<form>
	<label>活动介绍:</label><br />
		<textarea name="ActivityInform" cols="68" rows="7" style="resize: none;font-size: 18px;">&nbsp&nbsp加强国家的环保观念,我们公司提倡“低碳生活,从骑行开始;关爱地球,文明出行”的理念,营造一个“和谐、环保、健身、文明、沟通”的环境。&#10&nbsp&nbsp带领自行车爱好者进行活动,为广大员工增加一个互相交流学习的平台,促进同事间关系,增进大家的友谊,促进大家团队合作的意识。&#10&nbsp&nbsp为在员工提供一次锻炼身体的机会,增强大家的体质,提醒大家要时刻锻炼身体。
		</textarea>
		<label>奖励:</label><br />
		<textarea name="AwardInform" cols="68" rows="5" style="resize: none;font-size: 18px;">第1名:2000元+带薪休假3天&#10第2-5名:1000元+带薪休假2天&#10第5-10名:500元
		</textarea>
		<input type="button" value="确认修改" />
	</form>
</div>

后期开发可以进一步实现与雇员页面的互动,及时将信息更新到雇员页面的活动报名。

  • 公司骑行活动人员统计
<div id="function2">
	<table class="table22">
		<tbody id="table2">
			<tr>
				<th>序号</th>
				<th>姓名</th>
				<th>工号</th>
				<th>骑行总里程数</th>
			</tr>
			<tr>
				<th>1.</th>
				<td>张三</td>
				<td>00000001</td>
				<td>45.2km</td>
			</tr>
		</tbody>
	</table>

后期开发可以进一步实现与雇员页面以及数据库的互动,及时将报名信息更新到雇主页面,再通过账号系统获取员工的骑行总里程数。

  • 相关政策信息
<div id="function3">
	<iframe src="政府如何实行“十三五”提倡的“鼓励自行车”的意见? - 知乎.html" width="670px" height="450px" scrolling="auto" frameborder="0">
	</iframe>
</div>

运用的是内嵌网页的方法,由于网页较大,使用scrolling="auto"激活滑轮拖动页面。

  1. 登录/注册页面
  • 登陆页面
    在这里插入图片描述
  • 注册页面

在这里插入图片描述
在这里插入图片描述

2. User manual for the functions

用户使用手册:

  1. 登录与注册
    点击网页右上角的登录/注册按钮,进入页面完成登录/注册功能。登陆页面为用户提供了跳转注册页的功能。用户只需要根据页面提示进行操作。
    在这里插入图片描述
    在这里插入图片描述

  2. 相关网页查询
    进入主页,点击侧栏相对应的网页超链接,即可跳转到指定网页。
    在这里插入图片描述在这里插入图片描述

  3. 社交媒体联系方式
    进入主页/雇员雇主入口/登陆注册页面,右下角有网页开发人员的联系方式,同时用户也可以以提交表单的方式,向后台工作人员反馈意见。
    在这里插入图片描述

  4. 百度地图导航查询
    点击导航栏的“百度地图导航查询”进入导航页面。
    根据页面提示框信息,输入相对应的起点与终点位置信息。
    在这里插入图片描述在这里插入图片描述
    在这里插入图片描述在这里插入图片描述
    然后地图上会根据输入的地址计算出推荐路径
    准确位置导航:(直接给出推荐途径)
    在这里插入图片描述
    模糊位置导航:(地图自动根据起点终点给出可能的位置,供用户选择)

在这里插入图片描述在这里插入图片描述在这里插入图片描述

地图使用指南:

  1. 比例尺与缩放控件
    方法一:利用左上角或者右上角的地图插件缩放地图
    在这里插入图片描述
    方法二:利用鼠标滑轮缩放地图
    在这里插入图片描述
  2. 路线指引
    点击地图起点或终点按钮,即可查看更详细的关于导航路线的文字指引。
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    3.多次导航查询
    点击页面右上角的导航查询在这里插入图片描述按钮,重复上述查询操作。
  1. 百度地图共享单车位置查询
    打开页面即可看见位于深圳大学周围的单车位置信息,可通过鼠标滑轮缩放地图大小。
    在这里插入图片描述
  2. 深圳自行车维修点查询
    用户可以点击查看有关深圳市自行车维修点的信息(店名+地址)
    并且通过下方的表单提供新地址。

在这里插入图片描述

  1. 公司骑行活动报名
    点击“公司骑行活动报名”,查看活动介绍与奖励信息,并通过下方表单报名
    在这里插入图片描述
  2. 每日骑行统计+价格计算器
    点击骑行统计/价格计算器可以查看往日自己登记的锻炼日志/金额计算器
    在这里插入图片描述
    在这里插入图片描述

在下方表单选择日期/骑行距离提交
在这里插入图片描述
在这里插入图片描述

然后就可以在骑行统计与价格计算器中查看新增记录了
在这里插入图片描述
在这里插入图片描述

注:当输入有误(日期或骑行距离无输入时会报错)
在这里插入图片描述
当输入条数超过11条时,会报错(超出内容框范围)
在这里插入图片描述

  1. 公司骑行活动策划
    点击“公司骑行活动策划”,在textarea中修改内容,并点击确认修改按钮完成修改。
    在这里插入图片描述
  2. 公司骑行活动人员统计
    点击“公司骑行活动人员统计”,查看公司参与骑行活动人员的姓名、工号、当前骑行总里程数。
    在这里插入图片描述
  3. 相关政策信息
    点击“相关政策信息”,通过滑轮查看内嵌网页有关“十三五”提倡的“鼓励自行车”的意见。
    在这里插入图片描述

项目结果

1. 主页

在这里插入图片描述

2. 百度地图导航查询

在这里插入图片描述

3. 百度地图共享单车位置查询

在这里插入图片描述

4.雇员入口

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

5.雇主入口

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

6. 登录/注册页面

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

0

评论区