1 / 15
文档名称:

网页设计与制作期末作业.doc

格式:doc   大小:2,879KB   页数:15页
下载后只包含 1 个 DOC 格式的文档,没有任何的图纸或源代码,查看文件列表

如果您已付费下载过本站文档,您可以点这里二次下载

分享

预览

网页设计与制作期末作业.doc

上传人:511709291 2020/7/25 文件大小:2.81 MB

下载得到文件列表

网页设计与制作期末作业.doc

相关文档

文档介绍

文档介绍:《网页设计》课程期末考试作业名称:孤独的探戈设计人:岭班级:电子商务151学号:37评阅人:王选勇学期:2016~2017学年第1学期成绩::本人所完成的《网页设计基础》期末考试作品均系本人独立完成,没有抄袭行为,凡涉及其他作者的观点和材料,均作了注释,若有不实,后果由本人承担。承诺人(签名):岭2016年12月25日《网页设计》(20分) (20分) (30) (10分) (10分)6、作业态度(10分) 总分(100分)最终评定成绩:最终成绩转化为等级分,以优、良、中、及格、不及格评定《孤独的探戈》设计说明书一、选题的分析(选题的意义,针对选定的课题,打算如何展开设计,想表达什么容?)本次我选的主题是音乐,我平时就十分喜欢听音乐,我觉得音乐是一种年轻人表达自我的一种方式,通过音乐我们能表现自己的喜怒哀乐,表现出自己的生活态度。音乐能够给我们力量,给我们安慰,给我们无限的希望。我们心里总有那么一首歌,想唱给心爱的姑娘;总有那么一首歌,慰藉我们孤独的灵魂。因此,我也想制作一个音乐,通过音乐的力量来给更多的人温暖和安慰。针对这次选定的主体,我打算制作六个网页,分别为首页,歌手,专辑,排行榜,MV和自我简介六部分。首先制作之前,我借鉴参考了主流音乐QQ音乐和网易云音乐的网页排版布局,取其精华,为我所用。我初步确定了本次网页布局为简单的上下型,简洁明了方便用户浏览。网页容为图文并茂,以较少的文字加上多彩的图片吸引用户兴趣。总而言之,这次设计的理念是极简主义,去除多余的文字,排版容简单明了,贯穿一种单纯真诚的生活态度。二、如何运用网络的优点进行更好的表达(的版面风格、版式、颜色、互动性、多媒体等。为什么这样做?)首先,本次页面的版面布局借鉴了一些优秀的音乐的排版,版面以上下型为主,风格偏简洁舒适自然,因为过多的东西以及一些花俏的动画,会给人视觉疲劳,看来起来繁重累赘,不利于用户的浏览体验。网页的颜色以白色,灰色为主,看起来低调却富有涵,同时加入多彩的图片以至于整体不会太沉闷。色彩协调,给人以自然舒适的感觉。关于的交互性,我设置了六个页面的相互和用户登录,能够满足必要的互动。网页的互动性通过点实现,大部分的网页都需要有很醒目的导航,实现各个页面的跳转。所以在的顶部加了各个网页的便于用户寻找,方便用户使用。整个网页制作过程中,采用了多媒体中的文本、图像、、表格等容。通过多媒体的综合运用,使变得生动有趣。三、网页的结构与分解(绘制页面结构、地图、点)栏目构成主要功能首页首页是的精华核心部分,好的首页能过给用户留下良好的第一印象。本首页各个页面,综合推荐歌曲资讯,底部显示有信息。歌手通过登陆后可以快速精准查找你想要的歌手专辑包含所有的音乐专辑,通过搜索可以快速查找相关专辑。排行榜分为总榜,月榜,日榜,反映歌曲的热度,为用户收听提供参考MV包含所有的音乐专辑MV,通过搜索可以快速查找相关MV。个人简介包含个人信息介绍四、网页所采用的技术所采用的技术:CSS,div布局,HTML使用的软件:Dreamweaver,Photoshop通过Dreamweaver进行网页的布局和制作,通过Photoshop对图片进行美化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;}.left1ulli{ font-size:16px; list-style-type:none; 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/); background-repeat:repeat-y;}.right1{