《web基础》设计报告 --智慧农业主题网站

学院： 信息科学与技术学院
专业： 数据科学与大数据技术专业
姓名： 王欣雨

目录 一、网站功能简介 4 1.1、网站主题 4 1.2、网站结构 4 1.3、网站主要内容 5 1.3.1、主页面介绍——index.html 5 1.3.2、登录页面介绍——login.html 7 1.3.3、注册页面介绍——register.html 7 1.3.4、投稿页面介绍——contribute.html 8 1.3.5、子页面——智慧农业发展历程.html 9 1.3.6、子页面——智慧农业相关技术.html 10 1.3.7、子页面——智慧农业相关案例.html 12 二、网站技术应用 13 2.1、 index.html页面相关技术 13 2.2、 login.html页面相关技术 14 2.3、register.html页面相关技术 15 2.4、 contribute.html页面相关技术 15 2.5、智慧农业发展历程.html页面相关技术 15 2.6、智慧农业相关技术.html页面相关技术 16 2.7、智慧农业相关案例.html页面相关技术 17 三、设计小结和体会 18 3.1、小结 18 3.2、体会 19 附件1—网页结构 21 附件二—素材来源 22 附件三—各个站点文件夹说明 23

一、网站功能简介 1.1、网站主题 在推崇大、物、智、云的今天，各行各业都在向更加科技智能的方向靠拢。十九大报告指明了中国现代化建设新的路线图，并提出深化供给侧结构性改革，推动互联网、大数据、人工智能和实体经济深度融合，在多个领域培育新增长点、形成新动能。借助新的历史机遇，农业农村现代化迎来创新引领的新时代。 整合产业发展各环节所需的政府机构、研究机构和相关优秀企业，采用“政产学研用”的合作模式，进一步推进人工智能、物联网、大数据在农业中的产业化、规模化应用，推动智慧农业发展成为新时代下的现代农业发展的新要求。 智慧农业是应运而生，也是大势所趋，这便是本人所做网站的主题。

1.2、网站结构 本网站包括主网页一个，子网页七个，共有八个网页。

1.3、网站主要内容 1.3.1、主页面介绍——index.html 此页面内容从上到下,分别为网页名称“欢迎您访问智慧农业（河北农业大学版）网站！”（含河北农业大学官网链接），搜索（内容可跳转到百度搜索）、登陆（跳转到登录页面）、注册（跳转到注册页面）、投稿按钮（跳转到投稿页面）。 下面一栏为导航栏，根据web大作业的要求，将涉及到的几个部分设置为导航栏内容：首页、智慧农业发展历程、智慧农业相关技术、智慧农业相关案例。（均可跳转到对应的子页面） 中上部分为智慧农业的视频讲述以及近期综合动态（均可跳转到相关内容页面）。中下部分给出了本网站的logo，智慧农业的定义便于人们的理解，还有人们可能对于智慧农业有的一些其他问题，进行整理组成目录。 下方为本网站的相关信息（地址、邮编、电话、E-mail为河北农业大学相关信息），附加本人的微信和QQ二维码，可以通过这两个途径联系本人。

1.3.2、登录页面介绍——login.html 登录界面包括输入两种信息：用户名（规定不超过四个字）和登录密码（不超过六个字符），点击“登陆”按钮后出现“登陆成功”的提示框，然后自动跳转到主页面。如果没有账户，可以点击“注册账户”跳转到注册页面进行注册。

1.3.3、注册页面介绍——register.html 注册页面需要输入信息较多，“创建密码”限制六个字符，“真实姓名”限制四个字符，手机号限制11位，点击“免费获取验证码”后会出现“验证码已发送”的提示框，同时进行“重新发送”的时间倒数。下方有“信息提交”（点击后会出现“注册成功！”的提示框）和“信息重置”按钮（点击后所有输入信息清空），最下面的“已有账号？点击登入”按钮点击后跳转到登录页面。

1.3.4、投稿页面介绍——contribute.html 因为投稿涉及到提交，发送等问题，大作业时间紧，其他子页面投入精力较多，所以设计“该通道暂不开放敬请期待”。

1.3.5、子页面——智慧农业发展历程.html 进入此子页面后，背景音乐自动播放，页面从上到下，首栏有“欢迎您访问智慧农业网站！”欢迎语，点击跳转到河北农业大学官网；插入的音频文件，可以进行声音和是否播放控制；搜索框跳转到百度搜索；鼠标悬停在“RETURN”按钮上，颜色斜向填充，点击后跳转到首页。 中上部分左侧有图片自动切换栏，鼠标悬停出现左右键，可以控制图片切换，图片为智慧农业发展历程中具有影响力的事件。右侧为智慧农业发展历程的讲解，便于人们了解。 中下部分插入相关图片，图片下方为对应的讲解文字。

1.3.6、子页面——智慧农业相关技术.html 进入此子页面后，背景音乐自动播放，页面从上到下，首栏有“欢迎您访问智慧农业网站！”欢迎语，点击跳转到河北农业大学官网；插入的音频文件，可以进行声音和是否播放控制；搜索框跳转到百度搜索；鼠标悬停在“RETURN”按钮上，颜色横向填充，点击后跳转到首页。 上部分为主要标题问题及简要回答，左侧的字号：大 中 小 控制正文字号，后面的图标为分享连接，鼠标悬停会有相应的提示。 中间部分为五张图片，对应智慧农业的五种核心技术，点击图片定位到下方相应的技术讲解，点击技术讲解标题，定位到相应的图片。

1.3.7、子页面——智慧农业相关案例.html 进入此子页面后，背景音乐自动播放，页面从上到下，首栏有“欢迎您访问智慧农业网站！”欢迎语，点击跳转到河北农业大学官网；插入的音频文件，可以进行声音和是否播放控制；搜索框跳转到百度搜索；鼠标悬停在“RETURN”按钮上，颜色纵向填充，点击后跳转到首页。 上部分为主要标题问题，下方导航栏，内容分别为智慧农业案例的相关内容：成功案例、案例视频、新闻资讯、专题研究（分别链接不同页面）。 中间部分为优秀案例展示的照片墙，点击图片定位到下方相应的案例讲解，点击案例讲解标题，定位到相应的图片。

二、网站技术应用 2.1、 index.html页面相关技术 使用div进行页面排版，整体修饰效果使用CSS样式表，使用外部样式表，页面从上到下技术运用： 页首图片为景深效果，六张图片的叠加，并且通过编写js代码实现了鼠标悬停在图片上，图片会随鼠标的走向变换清晰度和图片位置，实现动态效果。 下面的各按钮使用，均用标签链接到相应的页面，搜索使用了表单，将内容提交到www.baidu.com进行搜索。 导航栏使用标签链接到相应的子页面，通过改变hover属性，鼠标悬停时改变背景图片。 使用标签插入视频，设置属性打开页面即加载，自动控制播放（不循环）和音量。 综合动态使用

为综合动态，其中的每一条信息使用标签链接到相应页面，设置hover属性，鼠标悬停颜色变为橙色。 下方使用

---

标签添加两条水平线，设置为渐变颜色。 智慧农业的logo使用标签插入其中，相关索引目录也使用了表格，五行两列，

为“相关索引目录”。 下部分使用

定义列表，加入相关信息，用插入二维码图片。 页面文字的添加使用了

等标签。

2.2、 login.html页面相关技术 整体修饰效果使用CSS样式表，使用外部样式表。页面主体使用

标签放在

块元素中，设置背景图片，使用maxlength属性，用户名限制最大输入四个字符，登陆密码限制最大输入六个字符。使用的按钮标签有,登陆成功提示框使用标签。

2.3、register.html页面相关技术 整体修饰效果使用CSS样式表，使用外部样式表。页面主体使用

标签放在

块元素中，中添加表格，里面填充内容。在“免费获取验证码”的按钮部分使用了js技术，设置倒数时间为60s。

2.4、 contribute.html页面相关技术 此页面为投稿页面，因为涉及内容较少，所以使用的是内联样式表，在body中设置背景图片，使用标签添加文字。

2.5、智慧农业发展历程.html页面相关技术 使用div进行页面排版，整体修饰效果使用CSS样式表，使用外部样式表，页面从上到下技术运用： 页首使用< video>标签插入音频，音频设autoplay="autoplay"属性，页面加载即背景音乐播放。欢迎语与RETURN按钮用标签链接相应内容，搜索使用了表单，将内容提交到www.baidu.com进行搜索。 中上部分左侧的图片设置自动切换效果，使用js技术，图片下部分小方块提示为红色可以体现出当前图片位于第几张，并实现鼠标点击手动切换。 中下部分使用

、标签添加文字、图片。

2.6、智慧农业相关技术.html页面相关技术 使用div进行页面排版，整体修饰效果使用CSS样式表，使用外部样式表，页面从上到下技术运用： 页首使用< video>标签插入音频，音频设autoplay="autoplay"属性，页面加载即背景音乐播放。欢迎语与RETURN按钮用标签链接相应内容，搜索使用了表单，将内容提交到www.baidu.com进行搜索。 上部分字大中小设置使用js技术，id样式名称“news_content”，运用到正文部分可以通过大、中、小直接设置字体，分享标志都用标签链接到相应的分享界面，通过设置标签的title属性，在鼠标悬停时出现提示语句。 中间部分插入图片并使用标签的书签定位功能，通过设置name、href属性将不同图片与之对应的文字解释相关联，下方的文字标题也可以定位到相应的图片，实现返回。

2.7、智慧农业相关案例.html页面相关技术 使用div进行页面排版，整体修饰效果使用CSS样式表，使用外部样式表，页面从上到下技术运用： 页首使用< video>标签插入音频，音频设autoplay="autoplay"属性，页面加载即背景音乐播放。欢迎语与RETURN按钮用标签链接相应内容，搜索使用了表单，将内容提交到www.baidu.com进行搜索。 导航栏使用标签链接到相应的子页面，通过改变hover属性，鼠标悬停时改变背景图片。 优秀案例展示以图像画廊作业为基础，通过设置hover属性、图片的transform、z-index、box-shadow属性，实现图片的倾斜、鼠标悬停在某图片上面，图片摆正并放大。图片使用标签的书签定位功能，通过设置name、href属性将不同图片与之对应的文字解释相关联，下方的文字标题也可以定位到相应的图片，实现返回。

三、设计小结和体会 3.1、小结 本网站以web基础课程期末作品要求为基础，以智慧农业为内容，包括智慧农业发展历程，智慧农业相关技术，智慧农业相关案例等，进行设计。网站包含主页面index.html（一个），二级页面login.html、register.html、contribute.html、智慧农业发展历程.html、智慧农业相关技术.html、智慧农业相关案例.html（六个），logo如下(自行设计的):

在index.html和智慧农业相关案例.html页面中包含导航栏，各个部分的超链接测试确认无误且有效。 主页面及三个子页面均使用div进行页面排版，子页面可通过导航栏跳转到子页面，子页面可通过页首的RETURN按钮返回主页面。 各个页面使用CSS样式表进行页面修饰，外部样式表命名为“相应的页面名称Style.css”，不同页面中有相同布局部分的样式设置一致，统一网站风格。 主页面中插入了有关智慧农业的讲解视频，在三个子页面中均插入了富有农业朴实气息的背景音乐。各个页面均有图片、文字等的插入。不同图片，音频等素材均通过本人修改合适（大小，长短剪辑等方面）后添加进网站。 色彩方面以绿色为主，主题为暖色调，体现农业绿色的主色调，并展现出科技注入农业后，使之焕发出新的活力。

3.2、体会 最初学习web课程的时候就觉得很有意思，所以一下了课我就用那仅有的一点点知识做了一个“网页”，虽然说是网页，但只不过是添加了背景图片、水平线和几行字，看起来着实“寒酸”，可我还是很兴奋的发给了我的同学看，当时想着，怎么这么有意思！ 我什么时候能做出一个具有一定“规模”和主题，而且能够有观赏性的网页呢？我很期待，web期末大作业就给了我这个机会。大作业，平常一听起来挺令人“犯怵”的，但是这次我做的很开心，不论是过程中遇到问题解决问题，还是最后的效果，都是一个很开心很愉快的过程。 设计网页时，一开始我想的是把网页的排版和内容的添加同时进行，这样排版好了，网页也就做好了。但是问题是做完一部分，就不知道下部分该怎么做了，所以最后还是按老师的教导先排版后填充。 我看了大作业的要求，在满足所有条件的基础上，想着增加自己的创新，还想着加入一些更加具有难度的内容，比如多编写一些js代码，使网页“活”起来，添加一些能够和用户互动的部分，让我的网页看起来更加“智能”。因为在大作业要求发下来后我就开始着手思考，所以基本的一些内容，想要加入什么元素大致也有雏形。 有了想法，难点就是要实现。做作业期间，我“无数次的百度”、“无数次上CSDN”、“无数次的看课件”，一方面是因为总达不到自己想要的效果，想多参考参考不同的例子，另一方面也是好多标签的属性记得模糊，需要查看，不过经过这次的大作业，我对标签和div排版的掌握度提高了很多。 总而言之，大作业的过程很“累”也很快乐，按顺序一步步实现，得到自己想要的结果，提高自己web方面的知识运用能力，深入对web的理解，我学到了很多。

附件1—网页结构

  附件二—素材来源 图片来源：百度图片搜索 音频来源：网易云 智慧农业相关内容来源：http://www.castp.cn/sylm/mzss/262060.htm http://www.shsee.com/ http://www.smartag.net.cn/CN/2096-8094/home.shtml 部分灵感来源于CSDN 标签某些属性的使用查询：课件 相关内容查询：知网   附件三—各个站点文件夹说明 “智慧农业”为总文件夹，其中“CSS”文件夹中为各个页面的外部样式表.css文件；“images”文件夹中包含各个页面链接的图片、音频、视频；“js”文件夹中包含页面所需要的js代码；剩下的.html文件为主要页面。