网页设计与制作期末作业

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

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

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

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

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

6、ight:auto;width:960px;margin-right:auto;margin-left:auto;.topheight:auto;width:960px;margin-right:auto;margin-left:auto;.left1background-color:#F36;float:left;height:200px;width:250px;list-style-type:none;text-align:center;.left1ullifont-size:16px;list-style-type:none;margin-top: 0px;margin-bottom:0

7、px;background-color:#F36;height:35px;width:80px;margin-right:0px;margin-left:0px;text-align:center;color:#FFF;font-weight:bold;.content1background-image:url(./images/20.jpg);background-repeat:repeat-y;.right1float:right;height:200px;width:710px;background-image:url(./images/1.jpg);background-color:#

8、FFF;background-repeat:repeat-x;.contentheight:auto;width:960px;clear:both;background-image:none;background-repeat:repeat-y;.zhongmargin-right: 40px;background-color:#9F6;height:auto;width:360px;margin-left:300px;.contentullifont-family:"微软雅黑"font-size:16px;float:left;height:20px;width:80px

9、;list-style-type:none;margin-left:85px;margin-top:10px;.footheight:100px;width:960px;margin-top:15px;text-align:center;.footullitext-align:center;height:25px;width:80px;list-style-type:none;float:left;margin-top:5px;margin-bottom:5px;margin-left:50px;首页代码:Cb3dy><dlV<diYal<div公)号5营=.1号

10、63;：词<ultyp-"sqjiai；e”>WLOibha.h8(T-,3.S3.Jlfl/a/1ii<1crnnt-'s"点天皿<八3£，11;<1i><ahrnf=，青”=现音乐。a></li><1i><ahref=*#irR个性电台</a></1二><LiXa我的趾单</G</1£></LiD<div-1as"rih-t1">C/div>：(liv二I'ji

11、9;sr-'Cufllt*工Jt"><ul><li><ahiruf-4'indei.htnl"，首页£f>><71<LiXaLlit>r>教手<liXahEef='&Kill、寿帽baX/li><LiXa-l&lrtKLAflr行榜</liL>pXahrgf="胃总看工力mh"im,cc/3.IP，'vidh&SO'heiffht=J184w/XfaX/p><akref

12、=tiSr0133=11111fT2E-tdn*style=*font-weigkx:bold;coldi:F30,Tont-siae:1即式.>玛i-3推£aUlh.lh崔印”>华的<<.3<3paeLa55*JliiV5*>|</3f(an><ahirnf-'#anl口">；稀行(Fas<syajLclawa='3|</ws)<acl-'l£g3。接遍<s£pjit、iz!La/S-T1itie*|</ip:ari><3h3&

13、#163;W/耳”'LEKr>民谣"G<spancls-J11me">|</span><ahref="Wuc3"A电子/a?1口出_cJLaNH-'jiLufs/XsLlue£="il*:法国日一.9一£二3"二兔多<73%<3ilLuih/A/=""口容61物&"/)<tihl#wid'th-cqri/"h口1rli书:r"0”广.：113rp啤匚：inw“口餐二再p.diiin

14、E03口LCtr><xh s cop m= !，q n 1' >< > "a hrM " Xing src!= " zi酒 we白m/ 4. j口巴”<p> a hHefl返端/财的星费鸨火诟<th tcQp#="OTl*><p><a hi«f=fixing - "w/m 八门日国徐电最一&3o</s/p></th><t.h sco?- cl", a i.ret* *1' Xing -eic- if注

15、gmf E- 1口£ .433><ahy *"?# it宜版的电告"，z0 i</th>th ocopdw"c31hrflf-u3i，><ijic -e4aBlijkcif电口JT* ia"a Ili ef = Y"：,好听到雨同爆炸'"G</p></th></tr>«r><th sOD'el" ><p>- fi irftw，SuXiris M£*“工，"0小口士&qu

16、ot; 的>C Mef 1M)熠印词它的古脚音千 /»,/口、03、eth scop* co l * ><p >< a hr efXing eh c鼻. 曰£19 + zin餐<p><a hi ef=一祭为H必技们没能在一起仃3></P5 <7诟wi dt-h=" L 后启" widtlhl W wt. dUL* L 66" widths* L6e"vn 4+七"L 66" widtll66*heietit-1* 142* h*ighl="

17、142A heifi-h."* " J 42A hQid"Wheieht-"!42- heiffht=*142'i/X/a></D> 62"/X->/X/aX/p><th stopc-*l*><p><a href-Xiag xri. iu堂 u】IL 加工“ wi.d£h-v l£fiv huagkSF*/ /X/a></p><P><0 h选甑泡 M的耳呆,、X/p 7/th><th eccpocDlXpXa

18、hr9i=A，1lwXi*e "。=*1y啜&5Qjj Mr"，140>=" heielrt=" 142" F74/X/pA 0wq hre±=*知手网应称评 西安OaX/nXGlS-。士工<AAtlfrl</D1.V>d-_-+ont'"<ul>13*hruf>.心逅回的却/1l><liXahrLF""力eF匏啻卢瑞</&></Li><li>SLtM=rr3关于秩们din.Emhref&qu

19、ot;"''>inAft/n<LiXahref="K">用户反渭“ax/li</liL><p7+,1ui中cwt-eli?i!ccTi+cr-?Go/tiDchftcopy:电孑所帚B17卜丁/,“乱h*E1"潮i啥<，用>J7</p></div></匕口)五、网站设计日志设计制作过程中出现的疑难问题，以及如何解决方法？本次网站设计，还是出现了很多让我头疼的问题。最先面临的，网页结构的布局版式的构造。因为想做的与众不同和具有自己的风格，所以我在脑海里构造了很久也

20、没有满意的，最后参考了QQ1乐和网易云音乐的优秀布局版式，在结合自己的想法，做出了现在的布局。无奈想象和显示还是有很大差距的，做出来的效果远远没达到我的预期。再说说制作过程中的遇到的问题吧。由于经过之前几次的制作，基本的Div插入还是掌握了，但是在制作过程中还是出现了很多小问题，让我差点脑袋炸裂。举例来说，在插入一个Menui后再插入其他Div就很难对齐了，我试过了很多方法都没用，最后关了重做；又比如说CSS勺应用，我新建一个html制作，可做好了之后保存发现前面几个网页格式也变了。这样的小问题还有就多，虽然小，但真的就让人头疼，就难发现错误。最后就是网站细节的优化，毫不夸张的说这比制作网页还难。细节的优化需要好费废你大量的精力，且难度不小，总而言之，想要做一个精美的网站真的是难上加难，一个小小的问题也许就会耗费你几个小时。六、作品自我评价写出对自已做出的网站后，个人感想或看法？关于本次网页的制作，我的第一感受是做网页太辛苦了，做一个精美让自己满意的网页需要耗费大量的时间和脑力。但当你完成最后一个布局，敲完最后一个代码，保存查看自己的网站时，内心是无比自豪和兴奋的，一个文科生和计算机基础薄弱的人竟然有天能独立制作出一个网站，太不可思议了