网页设计与制作期末作业.docx

网页设计与制作期末作业.docx

《网页设计与制作期末作业.docx》由会员分享，可在线阅读，更多相关《网页设计与制作期末作业.docx（12页珍藏版）》请在冰豆网上搜索。

网页设计与制作期末作业

《网页设计》课程

期末考试作业

网站名称：

孤独的探戈

设计人：

谢岭

班级：

电子商务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:

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/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;

}

.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，页面特色：

白色为主色调以绿色浅蓝色为主，给人轻快舒适自然的感受）