文档介绍：《网页设计》课程
期末考试作业
网站名称：孤独的探戈
设计人：谢岭
班级：电子商务151
学号：37
评阅人：王选勇
学期：2016~2017学年第1学期
成绩：
丽水学院工学院

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

评分项目
评分成绩
（20分）
（20分）
（30）
（10分）
（10分）
6、作业态度（10分）
总分（100分）
最终评定成绩：
最终成绩转化为等级分，以优、良、中、及格、/、及格评定
《孤独的探戈》设计说明书
一、选题的分析
（选题的意义，针对选定的课题，打算如何展开设计，想表达什么内容？）
本次我选的网站主题是音乐，我平时就十分喜欢听音乐，我觉得音乐是一种年轻
人表达自我的一种方式，通过音乐我们能表现自己的喜怒哀乐，表现出自己的生
活态度。音乐能够给我们力量，给我们安慰，给我们无限的希望。我们心里总有
那么一首歌，想唱给心爱的姑娘；总有那么一首歌，慰藉我们孤独的灵魂。因此，
我也想制作一个音乐网站，通过音乐的力量来给更多的人温暖和安慰。
针对这次选定的主体，我打算制作六个网页，分别为首页，歌手，专辑，排行榜，
MVffi自我简介六部分。首先制作之前，我借鉴参考了主流音乐网站QQT乐和网
易云音乐的网页排版布局，取其精华，为我所用。我初步确定了本次网页布局为
简单的上下型，简洁明了方便用户浏览。网页内容为图文并茂，以较少的文字加
上多彩的图片吸引用户兴趣。总而言之，这次网站设计的理念是极简主义，去除
多余的文字，排版内容简单明了，贯穿一种单纯真诚的生活态度。
二、如何运用网络的优点进行更好的表达
（网站的版面风格、版式、颜色、互动性、多媒体等。为什么这样做？）
首先，本次网站页面的版面布局借鉴了一些优秀的音乐网站的排版，版面以上下型为主，风格偏简洁舒适自然，因为过多的东西以及一些花俏的动画，会给人视觉疲劳，看来起来繁重累赘，不利于用户的浏览体验。
网页的颜色以白色，灰色为主，看起来低调却富有内涵，同时加入多彩的图片以至于整体不会太沉闷。色彩协调，给人以自然舒适的感觉。
关于网站的交互性，我设置了六个页面的相互链接和用户登录链接，能够满
足网站必要的互动。网页的互动性通过链接点实现，大部分的网页都需要有很醒目的导航，实现各个页面的跳转。所以在网站的顶部加了各个网页的链接便于用户寻找，方便用户使用。
整个网页制作过程中，采用了多媒体中的文本、图像、链接、表格等内容。通过多媒体的综合运用，使网站变得生动有趣。
、网页的结构与分解
（绘制网站页面结构、网站地图、链接点）
栏目构成
主要功能
首页
首页是网站的精华核心部分，好的首页能过给用户留下良好的―印象。本首页链接各个页面，综合推荐歌曲资讯，底部显示有网站信息。
歌手
通过登陆后可以快速精准查找你想要的歌手
专辑
包含所有的音乐专辑，通过搜索可以快速查找相关专辑。
排行榜
分为总榜，月榜，日榜，反映歌曲的热度，为用户收听提供参考
MV
包含所有的首尔专辑MV通过搜索可以快速查找相关MV
个人简介
包含个人信息介绍
margin-top: 0px;
margin-top: 0px;
四、网页所采用的技术
所采用的技术：CSS，div布局，HTML
使用的软件：Dreamweave，rPhotoshop
通过Dreamweave进行网页的布局和制作，通过Photoshop对图片进行美化
CSSC件：
.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-