静态网页设计与制作实训报告.docxVIP

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