网页设计与制作期末作业
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
2016.12
诚信承诺
我谨在此承诺:本人所完成的《网页设计基础》期末考试作品均系本人独立完成,没有抄袭行为,凡涉及其他作者的观点和材料,均作了注释,若有不实,后果由本人承担。
承诺人(签名):谢岭
2016 年12 月25日
《网页设计》课程期末考试作业成绩评定表
《孤独的探戈》设计说明书
一、选题的分析
(选题的意义,针对选定的课题,打算如何展开设计,想表达什么内容?)
本次我选的网站主题是音乐,我平时就十分喜欢听音乐,我觉得音乐是一种年轻人表达自我的一种方式,通过音乐我们能表现自己的喜怒哀乐,表现出自己的生活态度。音乐能够给我们力量,给我们安慰,给我们无限的希望。我们心里总有那么一首歌,想唱给心爱的姑娘;总有那么一首歌,慰藉我们孤独的灵魂。因此,我也想制作一个音乐网站,通过音乐的力量来给更多的人温暖和安慰。
针对这次选定的主体,我打算制作六个网页,分别为首页,歌手,专辑,排行榜,MV和自我简介六部分。首先制作之前,我借鉴参考了主流音乐网站QQ音乐和网易云音乐的网页排版布局,取其精华,为我所用。我初步确定了本次网页布局为简单的上下型,简洁明了方便用户浏览。网页内容为图文并茂,以较少的文字加上多彩的图片吸引用户兴趣。总而言之,这次网站设计的理念是极简主义,去除多余的文字,排版内容简单明了,贯穿一种单纯真诚的生活态度。
二、如何运用网络的优点进行更好的表达
(网站的版面风格、版式、颜色、互动性、多媒体等。为什么这样做?)
首先,本次网站页面的版面布局借鉴了一些优秀的音乐网站的排版,版面以上下型为主,风格偏简洁舒适自然,因为过多的东西以及一些花俏的动画,会给人视觉疲劳,看来起来繁重累赘,不利于用户的浏览体验。
网页的颜色以白色,灰色为主,看起来低调却富有内涵,同时加入多彩的图片以至于整体不会太沉闷。色彩协调,给人以自然舒适的感觉。
关于网站的交互性,我设置了六个页面的相互链接和用户登录链接,能够满足网站必要的互动。网页的互动性通过链接点实现,大部分的网页都需要有很醒目的导航,实现各个页面的跳转。所以在网站的顶部加了各个网页的链接便于用户寻找,方便用户使用。
整个网页制作过程中,采用了多媒体中的文本、图像、链接、表格等内容。通过多媒体的综合运用,使网站变得生动有趣。
四、网页所采用的技术
所采用的技术: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 {
background-color: #9F6; height: auto;
width: 360px;
margin-left: 300px;
}
.content ul li {
font-family: "微软雅黑"; font-size: 16px;
float: left;
height: 20px;
width: 80px;
list-style-type: none; margin-left: 85px; margin-top: 10px;
}
.foot {
height: 100px;
width: 960px;
margin-top: 15px;
text-align: center;