网页设计与制作期末作业

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

2、16.12.25 评分项目 评分成绩 1网站设计规划（ 20分） 2 .视觉效果（20分） 3网站内容（30） 4.网站交互（10分） 5.特色和创意（10分） 6、作业态度（10分） 总分（100分） 最终评定成绩： 最终成绩转化为等级分，以优、良、中、及格、不及格评定 孤独的探戈设计说明书 一、选题的分析 （选题的意义，针对选定的课题，打算如何展开设计，想表达什么内容？） 本次我选的网站主题是音乐，我平时就十分喜欢听音乐，我觉得音乐是一种年轻 人表达自我的一种方式，通过音乐我们能表现自己的喜怒哀乐， 表现出自己的生 活态度。音乐能够给我们力量，给我们安慰，给我们无限的希望。我们心里总有 那

3、么一首歌，想唱给心爱的姑娘；总有那么一首歌，慰藉我们孤独的灵魂。因此, 我也想制作一个音乐网站，通过音乐的力量来给更多的人温暖和安慰。 针对这次选定的主体，我打算制作六个网页，分别为首页，歌手，专辑，排行榜， MV和自我简介六部分。首先制作之前，我借鉴参考了主流音乐网站QQt乐和网 易云音乐的网页排版布局，取其精华，为我所用。我初步确定了本次网页布局为 简单的上下型，简洁明了方便用户浏览。网页内容为图文并茂，以较少的文字加 上多彩的图片吸引用户兴趣。总而言之，这次网站设计的理念是极简主义， 去除 多余的文字，排版内容简单明了，贯穿一种单纯真诚的生活态度。 二、如何运用网络的优点进行更好的表达

4、（网站的版面风格、版式、颜色、互动性、多媒体等。为什么这样做？） 首先，本次网站页面的版面布局借鉴了一些优秀的音乐网站的排版， 版面以 上下型为主，风格偏简洁舒适自然，因为过多的东西以及一些花俏的动画， 会给 人视觉疲劳，看来起来繁重累赘，不利于用户的浏览体验。 网页的颜色以白色，灰色为主，看起来低调却富有内涵，同时加入多彩的图 片以至于整体不会太沉闷。色彩协调，给人以自然舒适的感觉。 关于网站的交互性，我设置了六个页面的相互链接和用户登录链接，能够满 足网站必要的互动。网页的互动性通过链接点实现，大部分的网页都需要有很醒 目的导航，实现各个页面的跳转。所以在网站的顶部加了各个网页的链接便于用

5、 户寻找，方便用户使用。 整个网页制作过程中，采用了多媒体中的文本、图像、链接、表格等内容。 通过多媒体的综合运用，使网站变得生动有趣。 、网页的结构与分解 （绘制网站页面结构、网站地图、链接点） 栏目构成 主要功能 首页 首页是网站的精华核心部分，好的首页能过给 用户留下良好的第一印象。本首页链接各个页 面，综合推荐歌曲资讯， 底部显示有网站信息。 歌手 通过登陆后可以快速精准查找你想要的歌手 专辑 包含所有的音乐专辑，通过搜索可以快速查找 相关专辑。 排行榜 分为总榜，月榜，日榜，反映歌曲的热度，为 用户收听提供参考 MV 包含所有的音乐专辑 MV,通过搜索可以快速查 找相关MV。 个人简

6、介 包含个人信息介绍 网站 苜页 戳手 专辑 个人简介 华谨嗽手 华语 总榜 T 外酿手 英文 日轄 四、网页所采用的技术 所采用的技术：CSS, div布局，HTML 使用的软件： Dreamweave, Photoshop 通过Dreamweave进行网页的布局和制作，通过 Photoshops图片进行美化 CSS文 件： big height: auto; width: 960px; margin-right: auto; margin-left: auto; top height: auto; width: 960px; margin-right: auto; margin-left:

7、 auto; .leftl backgro un d-color: #F36; float: left; height: 200px; width: 250px; list-style-type: none; text-alig n: cen ter; .leftl ul li fon t-size: 16px; list-style-type: none; marg in-top: 0px; margi n-bottom: Opx; backgro un d-color: #F36; height: 35px; width: 80px; margin-right: 0px; margin-l

8、eft: 0p x; text-alig n: cen ter; color: #FFF; fon t-weight: bold; .content1 backgro un d-image: url(./images/20.jpg); backgro un d-repeat: repeat-y; .right1 float: right; height: 200px; width: 710px; backgro un d-image: url(./images/1.jpg); backgro un d-color: #FFF; backgro un d-repeat: repeat-x; .c

9、ontent height: auto; width: 960px; clear: both; backgro un d-image: none; backgro un d-repeat: repeat-y; .zhong backgro un d-color: #9F6; height: auto; width: 360px; margin-left: 300px; .content ul li font-family: 微软雅黑; fon t-size: 16px; float: left; height: 20px; width: 80px; list-style-type: none;

10、 margin-left: 85px; margin-top: 10px; .foot height: 100px; width: 960px; margin-top: 15px; text-alig n: cen ter; .foot ul li text-alig n: cen ter; height: 25px; width: 80px; list-style-type: none; float: left; margin-top: 5px; margin-bottom: 5px; marg in-right: 40px; marg in-left: 50px; 首页代码: clasE,

11、topJr iLV class-left ul typesquare CliXa屁分捫音乐天 a hrJ卅京现音乐 UiXa个性电台 QiXa href-*我的歆单 CiiXa hreflndez- html 首 页 UiXa href-l.htl5?手f CCi UiXa href-*2. ht1S a href-*13. htnl7排行犒 n.bsp: /p、 且class-tit f-f 2 ffdn rtyls-*f out-we 1 ght: bold; color: #F30: fondt-sizB： lEps： 热门推 a href旷 das出* s-f 口即华 1S | /sp

12、an? ;R 行 | i./ spazi? a href旷 cl as s-* s-f | a hr ef 旷 d as 出s-f 匚即；民 谨 | /span? 电子 tth scope*co 1*XpXa hrefXing sre jjti空e此吗/4 丁口巴 延编海淵的星孩禹火/QV/ 拍軒僅电朗一样的KV a hrefXiag 三工匚耳* ini注已匕芒jue 听最顶镰的电音 a href*3Xia si:匚】nt诅匕匕衣/T口百 好断 到瞬直| 尬炸 t-h scope-col/XpXa hrefXisg 寻工匚-int=aECi；5/lP pe i 强记忆的古典音乐 a hrXin

13、g 壽壬匚耳ifiike 七芒9 jue pXa么我们潼能在一起 Vth scopes * c o 1* a hzruf# Xisg 娄疋匚- ini 浊 e匕吉/ 1 j：PE“ 唤 孵沆睡的耳朵 t-h scope*Xing sh匸zm注e出芒/ 1口电心 知乎网友神评西安 c/a wi dtrh-* 166 width-*166 Tidth*166 width*166 height J 1.4 旷 height-142 height42 heiht，ir42 width-*166 height-142* / width-* 166 heifiht-142* /X/a width-166*

14、 height-*142 / width-166 height-142 / 廳回 as 下载容户端 关于黑们 / a hrdQ 加入菲们 用户 i Cp sty 1 e- teKt- al i : cent e r Coy r infiht4tc opy.电子商 1 51 谢岭（/言37 /p 五、网站设计日志 设计制作过程中出现的疑难问题，以及如何解决方法？ 本次网站设计，还是出现了很多让我头疼的问题。 最先面临的，网页结构的 布局版式的构造。因为想做的与众不同和具有自己的风格，所以我在脑海里构造 了很久也没有满意的，最后参考了 QQ音乐和网易云音乐的优秀布局版式，在结 合自己的想法，做出了

15、现在的布局。无奈想象和显示还是有很大差距的， 做出来 的效果远远没达到我的预期。 再说说制作过程中的遇到的问题吧。由于经过之前几次的制作，基本的Div 插入还是掌握了，但是在制作过程中还是出现了很多小问题，让我差点脑袋炸裂。 举例来说，在插入一个Menu之后再插入其他Div就很难对齐了，我试过了很多方 法都没用，最后关了重做；又比如说 CSS的应用，我新建一个html制作，可做好 了之后保存发现前面几个网页格式也变了。 这样的小问题还有很多，虽然小，但 真的很让人头疼，很难发现错误。最后就是网站细节的优化，毫不夸张的说这比 制作网页还难。细节的优化需要好费废你大量的精力，且难度不小，总而言之，

16、 想要做一个精美的网站真的是难上加难，一个小小的问题也许就会耗费你几个小 时。 六、作品自我评价 写出对自已做出的网站后，个人感想或看法? 关于本次网页的制作，我的第一感受是做网页太辛苦了，做一个精美让自己 满意的网页需要耗费大量的时间和脑力。 但当你完成最后一个布局，敲完最后一 个代码，保存查看自己的网站时，内心是无比自豪和兴奋的，一个文科生和计算 机基础薄弱的人竟然有天能独立制作出一个网站，太不可思议了！ 总的来说，我对自己这次的作品还算满意，尽管还有很多待完善的地方，但 能做到这个水平我还是很满足了。 尽管说我并不是计算机专业，对网页制作的要 求不那么高，以后也许也用不着，但我觉得学习制

17、作网站还是很重要的。 我觉得 在以后工作生活当中一定会给我们带来很多帮助。 这门课很快就结束了，也代表着自己一个学期的结束。总的回顾下来，自己 真正觉得有用的知识，也就是网页制作了。因此，我很感谢老师的辛勤教学，也 希望自己以后勤加练习，能制作出更加精美的网页。 七、网站页面打印稿 所有不同风格网页页面均截图出来， 并做简要说明（如：该页面所采用的技 术、页面特色等）。 址弊黑稱的星議挥置 柏带0理一样曲IV 新用妞的电音 蚌听到聆间曲炸 旦记配的古負音尿 她触am录 知乎 用户険憎 （用到了 CSS PS,Html,页面特色：色调以浅色为主，给人轻快、自然舒适的感 觉，整个页面图文并茂，提高

18、了用户体验，贯穿着极简主义，去除多余花哨的部 分） 連冈顶部 下款农户曲 关于琳 加只盘们 用户反馈 （用到了 css，html，页面特色：颜色以灰色为主，显得低调却有内涵） 音乐天站 伞註电直 艰；W欄脈 ivmiam.-uer,hi XiitP4UBURL LBIB KSS Sffl庄行険 （用到了 CSS HTML页面特色：白色为主，白色给人以洁白、明快、纯洁、干 净的感受，图文并茂，给用户极好的印象） 亦懵MV as Ww*t MfSpi.liV.!： W?WS 牌暉虜百 sr!F WfHfl .TIFSWTMf I.IMJ 乔 W”韋Ji. Mm. 全關 5 6 !W；g： jpr en： PW14 肯衲FTf 鼻空 載VI 郵顶却尚客户Ji奸蹴 工二轴 用户反演 （用到了 CSS HTML页面特色：白色为主，白色给人以洁白、明快、纯洁、干 净的感受，图文并茂，专辑分类多而细，方便用户快速查找和收听） 艰脈 ZiKlPIUWJ4. im 晅屈顶部 下魅农户曲 关于我旳 扯丸我们 用户反馈 （用到了 CSS HTML页面特