网页设计与制作期末作业
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
《网页设计》课程
期末考试作业
网站名称:孤独的探戈
设计人:谢岭
班级:电子商务151
学号:37
评阅人:王选勇
学期:2016~2017学年第1学期成绩:
丽水学院工学院
2016.12
诚信承诺
我谨在此承诺:本人所完成的《网页设计基础》期末考试作品均系本人独立完成,没有抄袭行为,凡涉及其他作者的观点和材料,均作了注释,若有不实,后果由本人承担。
承诺人(签名):谢岭
2016 年 12 月 25日
《网页设计》课程期末考试作业成绩评定表
《孤独的探戈》设计说明书
一、选题的分析
(选题的意义,针对选定的课题,打算如何展开设计,想表达什么内容?)本次我选的网站主题是音乐,我平时就十分喜欢听音乐,我觉得音乐是一种年轻人表达自我的一种方式,通过音乐我们能表现自己的喜怒哀乐,表现出自己的生活态度。音乐能够给我们力量,给我们安慰,给我们无限的希望。我们心里总有那么一首歌,想唱给心爱的姑娘;总有那么一首歌,慰藉我们孤独的灵魂。因此,我也想制作一个音乐网站,通过音乐的力量来给更多的人温暖和安慰。
针对这次选定的主体,我打算制作六个网页,分别为首页,歌手,专辑,排行榜,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;
}
.left1 ul li {
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/20.jpg);
background-repeat: repeat-y;
}
.right1 {
float: right;
height: 200px;
width: 710px;
background-image: url(../images/1.jpg);
background-color: #FFF;
background-repeat: repeat-x;
}
.content {
height: auto;
width: 960px;
clear: both;
background-image: none;
background-repeat: repeat-y;
}
.zhong {