2020软件工程作业03

这个作业属于哪个课程	软件工程 https://edu.cnblogs.com/campus/zswxy/2018SE/
这个作业要求在哪里	https://edu.cnblogs.com/campus/zswxy/2018SE/homework/11354
这个作业的目标	用原型工具仿写《去哪儿官网》或《阿里云APP》
我的选题	仿写《去哪儿官网》
使用的原型工具	墨刀
码云地址	https://gitee.com/i-love-my-hairline/codes/0kde5xyurcf8gplbno7sw84
学号	20189604

采用的原型开发工具与所选的题目

使用墨刀仿写《去哪儿官网》

功能截图

1.网页效果

2，动态导航：悬浮到不同的导航项上显示不同的信息

思路

动态导航既然是动态就会有事件，从这个入手，将需要实现效果的部分组合为一个群组，添加不同的组件状态然后根据要实现的效果来链接事件。
如图

实现界面

鼠标悬浮

鼠标单击

3，轮播图功能

思路

开始不知道怎么弄，墨刀有教程，教程使用了墨刀内置组件的轮播图，看了教程觉得是我想要的，于是就在官网把图片另存后用在轮播上了。

实现界面

4，页面包含2个以上的酒店信息，并跳转到指定页面

思路

我在图片上加了同样大的链接区域，链接区域在链接的事件上选择的是跳转页面，再选择目标页面和事件发生的条件（单击/鼠标移入/鼠标移出、、、、）即可
如图

实现界面

总结

步骤
先把网页大体排版弄好了，然后每个板块的区域开始增加相应元素，大概样子弄好后开始功能的实现，
我先做的是鼠标悬浮选择机票那一块的，一开始是准备参照素材的经验，但是发现都是建立页面然后跳转页面，觉得太多页面了有点累赘，就开始自己摸索有没有别的方法来实现自己的目标效果
尝试解决：我首先建立了几个元素以及它们的隐藏版本，设置列表的鼠标移入移出以及对应的事件将它们和选项联系起来，但是后面发现移入移出各自只能对应一个事件，大体可以实现，但是和官网的效果还是有一点点不一样，对一模一样不报太大希望了，想着尝试着排列了它们的顺序想达到最相似的状态，
实现了功能在思考怎么排列顺序可以最相似的时候的时候看到墨刀右上角三个点点有教程，就去点进去学了一下，看到了教程中的Tab切换，感觉是我想要的效果，于是就参照那个做了，将需要实现效果的部分组合为一个群组，添加不同的组件状态然后根据要实现的效果来链接事件。
收获
之前听老师说发布了作业，仿写APP或网页自己任选一个，以为这次的作业特别繁重，毕竟以前从来没用过原型工具不知道是什么，了解之后发现原来还有这种神奇的工具，总的来说这次的作业对我来说是很新奇的体验，关于做作业一开始我建立的元素都是零散的单个的元素，有点不方便，无意中选中了页面中的几个元素发现原来还可以组合，组合也可以打散，组合起来再重命名就会有条理很多，关于鼠标悬浮跳转页面在我看来可以节省大量的时间，但是页面太多我不喜欢，所以还是选择了动态组件来实现，虽然连来连去的有的麻烦比较费时间，但是没那么多页面我觉得比较简洁。，这次的作业花费时间比较多，可能是第一次使用这个还不太熟悉又或者是自己能力不够，做之前看起来很简单，做的时候除了鼠标悬浮那里有点问题也没什么别的了，做完的现在依旧不能理解自己为什么花费了这么多时间，看来做事不能慢悠悠，时间是一点点溜走的。这次的作业让我了解到了一个新的技术，平时也可以多了解了解怎样更加简单的做好网页，也发现了自己日常生活中的一些不好的小习惯。