爱.港湾

一直以来就想写这篇文章，因为考试以及考试后的一连串事情，一直没有时间来写，今天终于有时间了，于是，这篇文章即将问世。以这篇文章来记录我们第一次做网页的总结。

有这个想法还是在这学期开学初，一方面是我想学习一下网页的开发，另一方面受到学长的鼓动，于是我决定参加那个叫做富士通杯的网页设计大赛，因为这个比赛的工作量相对较小，于是我便想到一个人做，但是介于我的美工没有什么功底，于是我便想到了宝贝，我们可以一起来完成这个作品，我写代码，她做美工，很完美的结合，而且主题自然就定位我们之间的故事。我把想法告诉了宝贝，宝贝很开心，于是，我们一同作了这个决定。

介于这个学期的功课比较忙，特别是那个烦人的软工实践项目，弄得人头很大。于是这件事便放在了一边，直到比较作品要截止的前一周多，差不多我们开始准备这个比赛（这个过程中还有几天是写创新杯参赛文档和初赛答辩）。我这学期之前学过一点flex，但是那点微薄的代码经验不足以支撑我做出一个好看的flash，于是我选择了开源代码。以下我就详细的说一下这一个多星期做的事情。

我，首先是分析比赛的性质，作为网页设计大赛，主要在于网页的审美和效果，重要的是内容给人感动和效果给人震撼力。于是我开始学习网页设计3大技术，html，css和javascript，但是只学了些皮毛，知道基本的用法，配置了像dw之类的一些软件，当然重点还是从网上找些代码来进行复用，于是写了之前那篇初涉网页设计，总结了一些网上的开源库，特别是jquery很好用。用这些库我尝试写了一些简单的效果，必如淡入淡出啊，跳动啊一大堆效果，我觉得这样的比赛需要的是炫。其实刚开始是想学一些flex的开源库，然后经过修改而变为己用，但是发现jquery的效果更为强大，而且简便易用，于是抛弃了以flex为主流而改用jquery，潜心研究jquery，记录了很多好的jquery效果备用。

宝贝，我从图书馆帮她借了几本网页配色和网页整体设计方面的书，于是宝贝潜心研究网页的色彩和布局设计，配合从网上看到的一些做的比较好的网站，于是在宝贝心中好的网站审美逐渐形成，再加上以前的ps功底，于是开始准备一些基本的网页元素。

开始做页面了，首先是第一个页面，我说要做的比较震撼而且新颖，于是宝贝想到了在全城热恋中看到的那个由一张张便签拼成的心型，于是想起可以做一个用照片拼成的心型，加上我之前看到的那个照片放大的效果，于是主页的主体定位为心型的照片墙，在制作的时候，宝贝负责p图，我写了一个js文件来计算每个照片的位置，然后通过照片点击变大，元素延迟移动，和元素跳动效果的嵌套把心型墙通过一天的时间完成，另外还加了一个可爱的小气球和一个小便签来制造出隆重登场的震撼效果，不错，第一个页面完工。

接着是第4个页面，关于我们，想法比较简单，同样是嵌套了照片分时展示效果和tip效果的嵌套，以及元素延迟移动效果做出了好看的第4个页面。

想想还有关于爱情出题的页面2和关于生活主题的页面3，于是我和宝贝分工，我先为3号页面加上jquery的weight，充分利用每一个效果，表现出很强大的功能，宝贝重在第二个也页面的内容，因为第二个页面内容是我们俩各一半，但是我的那一半早就写好，于是重任就落在宝贝身上。2，3两个页面很快就完成了一半，宝贝还在想着怎么去加一些小东西让页面更加可爱，我就尝试着把我以前通过zmaker做的一份电子杂志放到页面上，我发现zmaker是可以发布网页版的，这帮了我的大忙，我把之前的做的那个诗集作成一个页面，并且通过一个图片放大的效果显示出来，试了好几次，最后终于做出来，很好很强大，成功的喜悦让我异常的激动。

四个页面都做好了，剩下的便是音乐了，我选取了一首很让人动容的乐曲《卡农》，特别是高潮部分让人很是的感动，因为乐曲的前奏时间太长，于是我费了一晚上的时间去截取音乐的中间一段，并和网页很好的结合，可以怎么把音乐放到网页上去呢？网上有很多方法，有windows播放器的，有html播放的，但是在不同的浏览器下不是有个很难看的播放条就是不播放音乐，很郁闷，于是想到每个浏览器都能很流畅播放的flash，这个时候先前学的flex派上用场，用flex做了一个1*1像素的只有音乐的flash，然后嵌入到网页的左上角，搞定，效果很好～

好不容易，终于在一个星期的辛苦创作下做完了这个网页。看上去效果很好，但是在浏览器兼容性上又出问题了，由于IE于其他浏览器的格格不如，让我不得不好好研究一下IE，于是我知道了，IE是前台人员的克星，总有一些代码需要写上<–if IE–><if not IE>…于是我有知道了png在IE下的alpha通道的问题，在网上找到了解决方案，顺利解决。

到了25号，终于把心爱的作品提交给了大赛组委会～心想，就算不得奖也值了。

过了几天，就在我回家参加姐的婚礼的时候，收到短信说，通过初赛，后天复赛答辩，悲剧了，我第二天急忙赶回学校，害的我连姐的婚礼都没有参加，姐，你原谅我吧～

参加答辩我们早早的去到现场，那天才发现好多比较好的作品，当然也有比较一般的。不过中午吃饭的时间听说我们的作品是初赛的第一名，于是信心倍增，作为下午第一组答辩，我们压力不大，很好的诠释了我们的创作，赢得了阵阵好评。最后结果出来的时候，我们的分数再次高居第一，但是就在准备确定结果的时候，传来老师需要微调结果的声音，结果，我们落到了第二，于是奖金也从2000落到了1000。对于这次微调，大家众说纷纭，我们也不想再追究，在大家的心中，我们的作品是最棒的。

以后的比赛还有很多，我相信这只是个起点～

在这里附上网页说明：

1.参赛小组成员及联系方式：

…

2.访问方式：

直接在本地打开index.html 或者访问http://www.njuopen.com/web/index.html

（本网站在火狐测试没有问题，在IE8浏览器下测试仅有life页面的生活日历功能不能实现，对于其他浏览器尚未测试，请评委尽量用以上两种浏览器查看，谢谢！）

3.作品介绍：

本作品为情侣网站，主要为介绍我们之间的故事以及记录生活中的一些点滴。

本网站分为4个页面，home，love，life和about。

(1)home页面（our.html）：

主体为一个照片墙，介绍我们的风采。点击照片小图标可查看该照片。

(2)love页面(love.html)：

向大家展示我们之间的故事。

分为两部分。左边是我们的故事介绍，点击pre和next可向前和向后翻页。右边是一个诗集的链接，点击图标可查看诗集(该诗集是男主人公与2010年寒假赠与给女主人公的^-^)。右下角是一个表情小装饰，可以点击转动，表现出当前的心情。

(3)life页面(life.html)：

记录我们生活中的点滴。

左边是一些生活小便签，记录一些生活感悟，这些便签可在页面内指定区域移动到任何位置，点击sort按钮可以对便签进行排序。右上是一个生活日历，按日期记录生活的事情，点击5月15号到5月23号中的任意一天，可以弹出该天要做的事情。右下角是一些收藏链接，可以点击跳转。

(4)about页面（about.html）：

介绍我们，两个头像图片会过一段时间切换，鼠标移动到头像图片上会显示出话语。

4.注：

(1)本网站除了诗集以外动态效果均以javascript和ajax实现

(2)本网站文字部分全部为原创作品

Tags: 富士通杯, 网页设计