《网页设计与制作期末作业》.docVIP

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