网页设计与制作期末作业

1、网页设计课程期末考试作业网站名称：孤独的探戈设 计 人：谢岭班 级：电子商务151学 号：37评 阅 人：王选勇学 期：20162017学年第1学期成 绩：丽水学院工学院2016.12诚 信 承 诺我谨在此承诺：本人所完成的网页设计基础期末考试作品均系本人独立完成，没有抄袭行为，凡涉及其他作者的观点和材料，均作了注释，若有不实，后果由本人担当。 承诺人（签名）： 谢岭 2016 年 12 月 25日网页设计课程期末考试作业成果评定表姓 名谢岭学 号37班 级电子商务151授课老师王选勇课程设计题目孤独的探戈音乐网站提交日期评分项目评分成果1网站设计规划（20分）2视觉效果 (20分)3网站内容

2、（30）4网站交互（10分）5特色和创意（10分）6、作业看法（10分）总分（100分）最终评定成果：最终成果转化为等级分，以优、良、中、及格、不及格评定 孤独的探戈设计说明书一、选题的分析（选题的意义，针对选定的课题，准备如何绽开设计，想表达什么内容？）本次我选的网站主题是音乐，我平常就非常喜爱听音乐，我觉得音乐是一种年轻人表达自我的一种方式，通过音乐我们能表现自己的喜怒哀乐，表现出自己的生活看法。音乐能够给我们力气，给我们劝慰，给我们无限的希望。我们心里总有那么一首歌，想唱给心爱的姑娘；总有那么一首歌，安慰我们孤独的灵魂。因此，我也想制作一个音乐网站，通过音乐的力气来给更多的人温温煦劝慰。

3、针对这次选定的主体，我准备制作六个网页，分别为首页，歌手，专辑，排行榜，MV和自我简介六部分。首先制作之前，我借鉴参考了主流音乐网站QQ音乐和网易云音乐的网页排版布局，取其精华，为我所用。我初步确定了本次网页布局为简洁的上下型，简洁明白便利用户阅读。网页内容为图文并茂，以较少的文字加上多彩的图片吸引用户爱好。总而言之，这次网站设计的理念是极简主义，去除多余的文字，排版内容简洁明白，贯穿一种单纯真诚的生活看法。二、如何运用网络的优点进行更好的表达（网站的版面风格、版式、颜色、互动性、多媒体等。为什么这样做？）首先，本次网站页面的版面布局借鉴了一些优秀的音乐网站的排版，版面以上下型为主，风格偏简洁

4、舒适自然，因为过多的东西以及一些花俏的动画，会给人视觉疲惫，看来起来繁重累赘，不利于用户的阅读体验。网页的颜色以白色，灰色为主，看起来低调却富有内涵，同时加入多彩的图片以至于整体不会太沉闷。色调协调，给人以自然舒适的感觉。关于网站的交互性，我设置了六个页面的相互链接和用户登录链接，能够满足网站必要的互动。网页的互动性通过链接点实现，大部分的网页都须要有很醒目的导航，实现各个页面的跳转。所以在网站的顶部加了各个网页的链接便于用户找寻，便利用户运用。整个网页制作过程中，采纳了多媒体中的文本、图像、链接、表格等内容。通过多媒体的综合运用，使网站变得生动好玩。三、网页的结构和分解(绘制网站页面结构、网

5、站地图、链接点)栏目构成主要功能首页首页是网站的精华核心部分，好的首页能过给用户留下良好的第一印象。本首页链接各个页面，综合举荐歌曲资讯，底部显示有网站信息。歌手通过登陆后可以快速精准查找你想要的歌手专辑包含全部的音乐专辑，通过搜寻可以快速查找相关专辑。排行榜分为总榜，月榜，日榜，反映歌曲的热度，为用户收听供应参考MV包含全部的音乐专辑MV，通过搜寻可以快速查找相关MV。个人简介包含个人信息介绍四、网页所采纳的技术所采纳的技术：CSS，div布局，HTML运用的软件：Dreamweaver，Photoshop通过Dreamweaver进行网页的布局和制作，通过Photoshop对图片进行美化

6、CSS文件：.big height: auto;width: 960px;margin-right: auto;margin-left: auto;.top height: auto;width: 960px;margin-right: auto;margin-left: auto;.left1 background-color: #F36;float: left;height: 200px;width: 250px;list-style-type: none;text-align: center;.left1 ul li font-size: 16px;list-style-type: no

7、ne;margin-top: 0px;margin-bottom: 0px;background-color: #F36;height: 35px;width: 80px;margin-right: 0px;margin-left: 0px;text-align: center;color: #FFF;font-weight: bold;.content1 background-image: url(./images/20.jpg);background-repeat: repeat-y;.right1 float: right;height: 200px;width: 710px;backg

8、round-image: url(./images/1.jpg);background-color: #FFF;background-repeat: repeat-x;.content height: auto;width: 960px;clear: both;background-image: none;background-repeat: repeat-y;.zhong background-color: #9F6;height: auto;width: 360px;margin-left: 300px;.content ul li font-family: 微软雅黑;font-size:

9、 16px;float: left;height: 20px;width: 80px;list-style-type: none;margin-left: 85px;margin-top: 10px;.foot height: 100px;width: 960px;margin-top: 15px;text-align: center;.foot ul li text-align: center;height: 25px;width: 80px;list-style-type: none;float: left;margin-top: 5px;margin-bottom: 5px;margin

10、-right: 40px;margin-left: 50px;首页代码：五、网站设计日志设计制作过程中出现的疑难问题，以及如何解决方法？本次网站设计，还是出现了许多让我头疼的问题。最先面临的，网页结构的布局版式的构造。因为想做的和众不同和具有自己的风格，所以我在脑海里构造了很久也没有满足的，最终参考了QQ音乐和网易云音乐的优秀布局版式，在结合自己的想法，做出了现在的布局。无奈想象和显示还是有很大差距的，做出来的效果远远没达到我的预期。再说说制作过程中的遇到的问题吧。由于经过之前几次的制作，基本的Div插入还是驾驭了，但是在制作过程中还是出现了许多小问题，让我差点脑袋炸裂。举例来说，在插入一个M

11、enu之后再插入其他Div就很难对齐了，我试过了许多方法都没用，最终关了重做；又比如说CSS的应用，我新建一个html制作，可做好了之后保存发觉前面几个网页格式也变了。这样的小问题还有许多，虽然小，但真的很让人头疼，很难发觉错误。最终就是网站细微环节的优化，毫不夸张的说这比制作网页还难。细微环节的优化须要好费废你大量的精力，且难度不小，总而言之，想要做一个精致的网站真的是难上加难，一个小小的问题或许就会耗费你几个小时。六、作品自我评价写出对自已做出的网站后，个人感想或看法？关于本次网页的制作，我的第一感受是做网页太辛苦了，做一个精致让自己满足的网页须要耗费大量的时间和脑力。但当你完成最终一个布

12、局，敲完最终一个代码，保存查看自己的网站时，内心是无比骄傲和兴奋的，一个文科生和计算机基础薄弱的人竟然有天能独立制作出一个网站，太不行思议了！总的来说，我对自己这次的作品还算满足，尽管还有许多待完善的地方，但能做到这个水平我还是很满足了。尽管说我并不是计算机专业，对网页制作的要求不那么高，以后或许也用不着，但我觉得学习制作网站还是很重要的。我觉得在以后工作生活当中肯定会给我们带来许多帮助。这门课很快就结束了，也代表着自己一个学期的结束。总的回顾下来，自己真正觉得有用的学问，也就是网页制作了。因此，我很感谢老师的辛勤教学，也希望自己以后勤加练习，能制作出更加精致的网页。七、网站页面打印稿全部不同风格网页页面均截图出来，并做简要说明（如：该页面所采纳的技术、页面特色等）。（用到了CSS、PS,Html,页面特色：色调以浅色为主，给人轻快、自然舒适的感觉，整个页面图文并茂，提高了用户体验，贯穿着极简主义，去除多余花哨的部分）(用到了css，html，页面特色：颜色以灰色为主，显得低调却有内涵）（用到了CSS，HTML，页面特色：白色为主，白色给人以雪白、明