网页设计作业
-
2023年3月2日发(作者：秋声赋)网页设计与制作期末作业
《网页设计》课程
期末考试作业
网站名称：孤独的探戈
设计人：谢岭
班级：电子商务151
学号：37
评阅人：王选勇
学期：2016~2017学年第1学期
成绩：
丽水学院工学院
2016.12
诚信承诺
我谨在此承诺：本人所完成的《网页设计基础》期末考试作品均
系本人独立完成，没有抄袭行为，凡涉及其他作者的观点和材料，均
作了注释，若有不实，后果由本人承担。
承诺人（签名）：谢岭
2016年12月25日
二、如何运用网络的优点进行更好的表达
（网站的版面风格、版式、颜色、互动性、多媒体等。为什么这样做？）
首先，本次网站页面的版面布局借鉴了一些优秀的音乐网站的排版，版面
以上下型为主，风格偏简洁舒适自然，因为过多的东西以及一些花俏的动画，
会给人视觉疲劳，看来起来繁重累赘，不利于用户的浏览体验。
网页的颜色以白色，灰色为主，看起来低调却富有内涵，同时加入多彩的
图片以至于整体不会太沉闷。色彩协调，给人以自然舒适的感觉。
关于网站的交互性，我设置了六个页面的相互链接和用户登录链接，能够
满足网站必要的互动。网页的互动性通过链接点实现，大部分的网页都需要有
很醒目的导航，实现各个页面的跳转。所以在网站的顶部加了各个网页的链接
便于用户寻找，方便用户使用。
整个网页制作过程中，采用了多媒体中的文本、图像、链接、表格等内容。
通过多媒体的综合运用，使网站变得生动有趣。
三、网页的结构与分解
(绘制网站页面结构、网站地图、链接点)
栏目构成主要功能
首页首页是网站的精华核心
部分，好的首页能过给用
户留下良好的第一印象。
本首页链接各个页面，综
合推荐歌曲资讯，底部显
示有网站信息。
歌手通过登陆后可以快速精
准查找你想要的歌手
专辑包含所有的音乐专辑，通
过搜索可以快速查找相
关专辑。
排行榜分为总榜，月榜，日榜，
反映歌曲的热度，为用户
收听提供参考
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，页面特色：白色为主色调以绿色浅蓝色为主，给人轻快舒
适自然的感受）