《Web开发技术》

实训报告

实训项目名称 绿色农产品宣传网页

二 级 学 院 信息工程学院

专 业 班 级

姓 名

学 号

指 导 教 师 汪 强

完 成 日 期 2019.9.30

项目名称

绿色农产品宣传网页设计与实现

地点

实验4（204）

报 告 内 容

首页设计（轮播图展示活动、公司介绍、滚动图片浏览）绿色产品展示公司新闻动态消息对公司留言表单

教师评语成绩： 教师签名：

项目组员组成及工作任务分工

组长/组员

姓名

学号

主要工作任务

备注

组员

目 录

第1部分 实训目的11

第2部分 实训内容与要求22

2.1 实训内容22

2.2 基本要求22

第3部分 报告正文33

3.1 设计选题33

3.2 开发环境33

3.3 需求分析33

3.4 总体设计44

3.5 详细设计44

3.6 运行测试99

第4部分 实训总结11

第1部分 实训目的

计算机科学与技术（企业级应用软件开发）专业是一个实践性很强的专业，它不仅要求学生具备扎实的理论基础，更要求具备相当的实践开发能力，能解决实际工作中的需求和问题。《Web开发技术实训》不仅是教学计划中实践性教学环节的重要组成部分，也是学生感性认识与理性知识联系统一，在实践中检验所学理论知识的重要途径。

该实训旨在培养学生Web开发中的前端设计能力，主要为利用Sublime Text开发工具进行网页设计，包括如何在网页上显示文字、图片、表格、表单等；利用CSS技术对网页上内容进行排版，并设置相关格式；利用JavaScript技术对网页内容进行操作，实现一些动态效果。目的是通过实训，培养学生的实际动手能力和计算机的操作能力，能够运用所学的知识进行网页设计与开发。同时掌握并实践软件开发项目设计规范及其开发流程：需求分析、概要设计、详细设计、代码编写、系统测试及软件手册编写，以便提前适应软件企业开发流程、环境和工作要求。

通过实训，培养学生综合运用已学知识进行代码编程开发的能力；培养学生的动手能力、良好编程规范、编程方法，以便能较全面地理解、掌握和综合运用所学的知识，提高编程能力，增强自己的团队协作意识，了解软件开发的思考角度和主要流程。为毕业之后能够更快地进入工作状态并且能够更好的工作，打好一定的基础。

第2部分 实训内容与要求2.1 实训内容

学生在校内在指导教师的指导和要求下完成项目开发实训，具体实训任务如下：

完成Web前端的开发。可自行选择某主题进行Web项目开发，根据项目需求，实现产品的页面交互和数据逻辑展示；利用HTML5、CSS3、Javascript、jQuery开发符合W3C标准的网站前端页面，掌握一种开发框架，如Bootstrap框架等。同时能够完成基本的后台操作。

2.2 基本要求设计要求

（1）主要使用HBuilderX开发工具进行代码编写；

（2）界面使用DIV+CSS布局，界面美观大方，实现自适应响应；

（3）网页站点文件要分门别类存放；

（4）编码中的各种命名要符合命名规范，重要语句也需加注释；

（5）编程过程要进行异常捕获及处理；

（6）网页具有可移植性。成果要求

（1）提交完整的包含源码的文件压缩包；

（2）提交符合格式规范的实训报告。

第3部分 报告正文3.1 设计选题

绿色食品在中国是对具有无污染的安全、优质、营养类食品的总称。是指按特定生产方式生产，并经国家有关的专门机构认定，准许使用绿色食品标志的无污染、无公害、安全、优质、营养型的食品。从行业发展上看，目前国内绿色农产品市场总体上仍处于导入期。发展绿色食品对于保护农业生态环境，提高农产品和食品质量，增强人民身体健康，增加农民收入，促进农业和农村经济可持续发展等具有重要意义。由此可见，为了大力宣传农产品并推广，设计该宣传网站。

3.2 开发环境

1 编程语言

HTML5+CSS3+Javascript

2 硬件环境

PC电脑window10系统

3 软件环境

HBuilderX编译环境

Google Chrome浏览器运行

PhotoShop CC2019辅助工具

3.3 需求分析

本绿色农产品宣传网站以发展绿色食品对于保护农业生态环境为核心，其宗旨是提高农产品和食品质量，增强人民身体健康，增加农民收入，促进农业和农村经济可持续发展。该网站大力宣传农产品并推广，首先需对公司的介绍，取得大家的认可，发布最新消息，推广绿色农产品。主要功能如下：

公司首页介绍、轮播图形式介绍活动及滚动图片浏览最新产品所有绿色农产品的展示页面营销推广农产品的新闻动态介绍与最新相关新闻资讯对公司的建议与最新消息推荐3.4 总体设计

图3.1 各页面之间对应关系图

3.5 详细设计

（1）首页的设计，首先设计了由导航区和轮播图：

图3.2导航区和轮播图

图3.3 布局代码区

（2）首页的设计，对该宣传公司介绍：

图3.4 最新消息和公司介绍图

（3）首页的设计，轮播图浏览产品的效果和页脚设计：

图3.5 滚动图效果和页脚

图3.6 滚动图效果和页脚代码区

（4）产品展示页面的设计，导航区和页脚同于首页面设计，此页加上了产品展示的图片推广：

图3.7 产品展示页

图3.8 产品展示页代码区

（5）新闻动态页面的设计，导航区和页脚同于首页面设计，此页加上了新闻动态和新闻资讯消息：

图3.9 新闻动态页面内容区

图3.10 新闻动态主要布局代码区

（5）我要留言页面的设计，导航区和页脚同于首页面设计，此页加上了留言区和今日推荐区：

图3.11 我要留言页面内容区

图3.12 我要留言主要布局代码区

3.6 运行测试

（1）Index.html页面中通过JS实现轮播图片，如图所示：

图3.13 实现轮播代码

图3.14 实现轮播JS代码

图3.15 首页轮播效果图

（2）index.html页面中实现图片滚动，如图所示：

图3.16 实现图片滚动代码

图3.17 图片滚动效果图

第4部分 实训总结

本学习的实验课也很多，一直都是在机房中学习理论知识加实践中度过的，在这样的环境和动力下，通过自己动手、动脑，通过网络资源和老师的指导下，在不断地发现问题和解决问题的过程中，学到了很多知识，也增强了我的创作力和动手能力。

通过此次大作业的设计到完成，我从无到有设计了一个web前端网页的开发，产生了一些心得体会：做东西先从最简单的开始写，一点一点的去往上添加功能。一口吃不成个胖子，所有复杂的代码都是从最简单的演变而来的；碰到程序报错或者功能没有实现的，一次只研究一个问题，那将会更容易找到问题的关键；必须确保这个问题解决之后，再去转移到另一个问题上；BUG bug总是难免会遇到的，最好能够做成可以快速的排除、修复bug；动手去做，代码一定需要多写多练才能去熟练和掌握。