静态参考资料网页设计与制作 实训报告.doc

静态网页设计与制作
实训报告
这一周我们进行了为期一周的静态网页设计与制作的实训。在这一个星期中我感触很多,无论是从网站的刚开始的主题的确定设计还是后期的网站的发布与测试。感觉又学到了很多新的东西。
从小到大,在自己的心底就有个音乐梦想。我喜欢唱歌,喜欢跳舞,小的时候学过电子琴,上初中后父母认为学业更加要紧,于是所有与音乐有关的东西通通不被再提起。但是自己还是仍旧喜欢着音乐。上大学之后,自己终于可以重新“正大光明”地重新提起音乐了,于是想制作一个音乐网站的念头就在自己的脑海中闪现着。
我一直比较喜欢的华语男歌手是周杰伦,在上大一的那个10月份,周杰伦照例出着专辑,专辑的名字却很让人耐人寻味,《跨时代》,这我才突然意识到,从小学开始,周杰伦出道10年的十张专辑整整陪我走过了小学、中学的时光。于是在这次比赛中想制作一个关于周杰伦出道十年纪念的这样一个音乐网站。
下面就让阐述下我制作这个网站的整体构思和具体设计方案。
关于网站的框架结构:
在制作之前,我在网上搜索过许多周杰伦的官方网站,例如周杰伦中文网,周杰伦中文音乐网之类的。我发现他们制作时框架紧凑明晰,同时也包括了几个音乐网站必须具有的模块。于是,得到借鉴,我在我的主页上面也就添加了“杰迷必知”、“杰伦贴图”、“杰伦影音”、“每日杰讯”、“歌迷会通道”这样五个模块。在添加这五个模块的时候,我不像一些很正式的网站,模块与模块之间凑得很紧,我尝试了下自由、随机的排放。因为我做的是一个音乐兼娱乐的网站,想让网友们怀着轻松愉悦而不是严肃的心情来看我的这个网站。
关于网站的色彩搭配:
这次制作的网页是主要关乎于歌手周杰伦,访问的人群绝大多数会是周杰伦的粉丝,也绝对是时尚范儿,因此网页的主色调我采用了永不衰竭的经典黑白色调,再者黑白搭配这种反差很大的撞色能够给人很大的视觉冲击力。中间一些板块的边框我选择了用玫红色,玫红色可以提升整个网页的活泼,使黑白色调的网页看起来不死板,严肃而不失华丽。
关于网站的图片:
网页的logo我分为了两个部分,一面是白色背景的10th周年纪念logo,另一面是周杰伦弹着贝斯转动的画面,这个画面是周杰伦超时代世界巡回演唱会的开场秀,超时代演唱会是对杰伦出道十年来的一个总结,因此我认为这个画面做为纪念杰伦出道十年网站的logo是很不错的。
网站的所有的图片处理在互联网上下载的以外,还有相当大的一部分是下载下来以后处理过的。我处理图片的时候不仅用了firework8,还用了photoshop和美图秀秀。在插视频的时候由于只能插flv格式的,因此还下载了转码器。插入视频时老师说过时间不宜太长,否则不利于网页打开的速度,于是就用了会声会影x2进行视频编辑和合成。
正文主体部分分为5个模块
第一个模块“杰迷必知”,左边是杰伦的两张图片,一张是杰伦正面拍摄,另外一张是背面拍摄。两张图片之间的转换运用了“鼠标经过图像”这一基本技术,是网友们在视觉上全方位了解他。图片的右边附着杰伦的简介,在右下角可以点击“更多”来查看杰伦更多的详细资料。
第二个模块“杰伦影音”,左方和下方附着的是杰伦专辑和演唱会上的精彩照片,在模块的右前方,则简要介绍了周杰伦出道十年来所发行的所有音乐专辑,所举办的所有演唱会和所有所参加拍摄的或者自己导演的所有电影的名字。使网友们更加有兴趣深入了解。