文档介绍：该【网页设计与制作期末作业 】是由【读书之乐】上传分享，文档一共【18】页，该文档可以免费在线阅读，需要了解更多关于【网页设计与制作期末作业 】的内容，可以使用淘豆网的站内搜索功能，选择自己适合的文档，以下文字是截取该文章内的部分文字，如需要获得完整电子版，请下载此文档到您的设备，方便您编辑和打印。:.
精品教育
《网页设计》课程
期末考试作业
网站名称:孤独的探戈
设计人:谢岭
班级:电子商务151
学号:37
评阅人:王选勇
学期:2016~2017学年第1学期
成绩:
丽水学院工学院
-可编辑-:.
精品教育
诚信承诺
我谨在此承诺:本人所完成的《网页设计基础》期末考试作品均
系本人独立完成,没有抄袭行为,凡涉及其他作者的观点和材料,均
作了注释,若有不实,后果由本人承担。
承诺人(签名):谢岭
2016年12月25日
-可编辑-:.
精品教育
《网页设计》课程期末考试作业成绩评定表
姓名谢岭学号37
班级电子商务151授课教师王选勇
评分项目评分成绩
(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{
float:right;
height:200px;
width:710px;
background-image:url(../images/);
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;
}
.contentulli{
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;
}
.footulli{
text-align:center;
height:25px;
width:80px;
list-style-type:none;
-可编辑-:.
精品教育
float:left;
margin-top:5px;
margin-bottom:5px;
margin-right:40px;
margin-left:50px;
}
首页代码:
-可编辑-:.
精品教育
-可编辑-:.
精品教育
五、网站设计日志
设计制作过程中出现的疑难问题,以及如何解决方法?
本次网站设计,还是出现了很多让我头疼的问题。最先面临的,网页结构的
布局版式的构造。因为想做的与众不同和具有自己的风格,所以我在脑海里构造
了很久也没有满意的,最后参考了QQ音乐和网易云音乐的优秀布局版式,在结
合自己的想法,做出了现在的布局。无奈想象和显示还是有很大差距的,做出来
的效果远远没达到我的预期。
再说说制作过程中的遇到的问题吧。由于经过之前几次的制作,基本的Div
插入还是掌握了,但是在制作过程中还是出现了很多小问题,让我差点脑袋炸裂。
举例来说,在插入一个Menu之后再插入其他Div就很难对齐了,我试过了很多方
法都没用,最后关了重做;又比如说CSS的应用,我新建一个html制作,可做好
了之后保存发现前面几个网页格式也变了。这样的小问题还有很多,虽然小,但
真的很让人头疼,很难发现错误。最后就是网站细节的优化,毫不夸张的说这比
制作网页还难。细节的优化需要好费废你大量的精力,且难度不小,总而言之,
想要做一个精美的网站真的是难上加难,一个小小的问题也许就会耗费你几个小
时。
-可编辑-:.
精品教育
六、作品自我评价
写出对自已做出的网站后,个人感想或看法?
关于本次网页的制作,我的第一感受是做网页太辛苦了,做一个精美让自己
满意的网页需要耗费大量的时间和脑力。但当你完成最后一个布局,敲完最后一
个代码,保存查看自己的网站时,内心是无比自豪和兴奋的,一个文科生和计算
机基础薄弱的人竟然有天能独立制作出一个网站,太不可思议了!
总的来说,我对自己这次的作品还算满意,尽管还有很多待完善的地方,但
能做到这个水平我还是很满足了。尽管说我并不是计算机专业,对网页制作的要
求不那么高,以后也许也用不着,但我觉得学****制作网站还是很重要的。我觉得
在以后工作生活当中一定会给我们带来很多帮助。
这门课很快就结束了,也代表着自己一个学期的结束。总的回顾下来,自己
真正觉得有用的知识,也就是网页制作了。因此,我很感谢老师的辛勤教学,也
希望自己以后勤加练****能制作出更加精美的网页。
-可编辑-:.
精品教育
七、网站页面打印稿
所有不同风格网页页面均截图出来,并做简要说明(如:该页面所采用的技
术、页面特色等)。
(用到了CSS、PS,Html,页面特色:色调以浅色为主,给人轻快、自然舒适的感
觉,整个页面图文并茂,提高了用户体验,贯穿着极简主义,去除多余花哨的部
分)
-可编辑-:.
精品教育
,
(用到了css,html页面特色:颜色以灰色为主,显得低调却有内涵)
(用到了CSS,HTML,页面特色:白色为主,白色给人以洁白、明快、纯洁、
干净的感受,图文并茂,给用户极好的印象)
-可编辑-:.
精品教育
(用到了CSS,HTML,页面特色:白色为主,白色给人以洁白、明快、纯洁、
干净的感受,图文并茂,专辑分类多而细,方便用户快速查找和收听)
(用到了CSS,HTML,页面特色:图文并茂,增强了网页的可读性和趣味性,
简单明了,便于用户快速查找和观看)
-可编辑-:.
精品教育
(用到了CSS,HTML,页面特色:白色为主色调以绿色浅蓝色为主,给人轻快
舒适自然的感受)
-可编辑-