CscwPages项目总结

发表于

暑假夏令营的最后一个礼拜，我们大一的捞仔们和Java组的两个小伙伴一起合作了CscwPages的项目。这是我们六个人第一次携手做一个项目，有很多东西需要学习与磨合的。
而且因为一个意外，我在遥远的惠州远程开发，所以分配給我的任务是较为离散的首页和联系我们部分。
这个部分的内容比较简单。基本上是页面的html+css的布局，没有什么难度系数大的js。对我来说在完成过程中比较有阻碍的还是讨论方面的问题。

布局的构思与响应式的实现

其实项目一完成的时候，我就写了一篇关于CSS布局的感想，传送门：CSS布局有感。此篇感想是基于做协同主页项目的感受而写的，于此，将简单的说一说这部分的内容。

做任意一个页面之前，为了他的功能的实现，必须得先构思好，这个页面的整体布局方式。因为布局不仅仅是将一些元素纯粹的堆砌在一起，还得考虑他的js实现以及响应式的实现。

首先来谈基本的布局。

在这次的项目中，对于布局，我印象比较深刻的是两种，一种是基于px的布局方式，一种是基于% 的布局方式。

在整体导航栏＋四个大container这部分的实现，由于和鹏腾讨论了一下如何布局并且在自己的页面中的实现过程中也踩了一些坑，尤其思考了这两种布局方式。

无疑，布局方式也要多思考与多一些尝试。最终我所得出的结论是，在各个页面不互相影响的情况下，如果是对于一些导航栏，图片标题，标签等等不适宜根据屏幕分辨率变化而发生大小改变的这类，应当使用基于px的布局方式；然而，如果是一些大容器，自适应屏幕存在的元素，使用基于% 的布局方式更方便。

再者，我们来谈谈响应式的实现。

此次的响应式，我们采取的是用CSS3 @media query和bootstrap的方式来实现。

容易发现的是，一般来说，有固定比例布局且字体变化在一定范围内不是非常明显的页面，可以使用bootstrap+CSS3 @media query的方式来实现响应式，就像是我们的页面的各组简介的入口部分；然而，当页面的布局随着分辨率的减小而改变，字体需要适时变化时，bootstrap就显得不适用了。

bootstrap虽好，可不要贪杯哦~

动画与兼容

jQuery的基础动画

就像之前说的，在这一部分的js比较简单，基本上是一些jQuery的基础的动画。主要的是要理解清楚动画队列的问题，然后处理还节奏的关系。

兼容性问题

此处需要大喊一声，我爱UC浏览器（围笑）

在用手机测试的时候，我们发现一个问题，唯独在UC浏览器中，经过动画之后，页面布局会错位。

当时找了一下解决方法，发现原来UC用的是另外一套标准，而且UC为了追求速度，舍弃了一些功能，然而这对于bug的解决没有什么直接的作用。于是就到了随意试试的阶段。最终发现，原来在用jQuery动画时，如果是给下有几个元素的container使用类名或者id名来让以下各个元素都发生位置改变而产生动画的话，在UC浏览器中，就会错位。

1
2
3
4
5
<div class="mainIntro">
	<div class="uc1">工作室大简</div>
	<span class="uc2">工作室</span>
	<span class="blue">大简介工</span><span class="blue2">作室</span>	
</div>

如以上代码中，如果不给uc1，uc2等设置类名，直接用

1
$(".mainIntro").delay(1000).animate({"margin-top":"60px"},500);

则会发生不可描述的错位，需要把container中的元素也设置类名才能够正常动画。

然而在下方的这段代码中，却不会发生什么错误。

1
2
3
4
5
<div class="intromore">
	<p>工作室小简介工作室小简介工作室小简介工作室小简介工作室小简介工作室小简介工作室小简介工作室小简介工作室小简介</p>
	<p>工作室小简介工作室小简介工作室小简介工作室小简介工作室小简介工作室小简介工作室小简介</p>
	<p>工作室小简介工作室小简介工作室小简介工作室小简介工作室小简介工作室小简介工作室小简介工作室小简介</p>
</div>

神奇的UC。

Git多人协作

最后，得说说Git多人协作的问题。

在考核的时候就有接触过git，不过对于命令行的操作，如果没有真正的去使用，并且对着教程一步步执行的话，对于我来说很容易出错。

在一开始，在做着这个项目的时候，我因为不大熟悉git的操作，一直迟迟没有更新分支，由于离得比较远也没能及时问清楚该怎么做，在网上找的教程也是零零碎碎，实际遇到的情况的解决方法总是在下一个搜索内容中情况常有发生。

最后的最后，还是回来好好抱了小喵的大腿（有一回小喵直接远程控制电脑手把手教学如何push），乖乖的看了廖雪峰的git 多人协作的部分，然后多push了几遍才得以顺利操作了git这玩意儿。

结语

最后的最后，还有一点：

由于这是多人协作完成的一个网页，真的要及时的和伙伴们多交流多沟通呀~