网页设计制作教程期末考试-网页设计和制作期末作业

1.网页设计课程期末考试作业 网站名称：孤独探戈 设计师：谢凌 班级：电子商务151 学号：37 审稿人：王选勇 学期：2016 2017学年第一学期 成绩：丽水学院工程学院 2016.12 诚信承诺书 我愿意在此承诺：本人完成的所有网页设计基础期末考试作品均为本人独立完成，不存在抄袭行为，所有涉及其他作者的意见和材料均已注明。承诺人（签名）：谢凌 2016年12月25日网页设计课程期末考试作业成绩评价表 姓名 谢玲 学号 37 班 电子商务 151 老师 王选勇 课程设计 题目 孤独探戈 音乐 网站提交日期 2016.12.25 评分项目 分数 1 级 网站设计策划（20 分）2 视觉效果

2.（20分） 3.网站内容（30分） 4.网站互动（10分） 5.特色创意（10分） 6.作业态度（10分） 总分（100分） 最终评价分数：最终成绩转换为成绩分，分为优秀、良好、中等、及格、不及格。 Lonely Tango设计手册 1.选题分析（选题的意义，如何针对所选选题进行设计，想要表达什么内容？） 这次我选择的网站主题是音乐。 我平时非常喜欢听音乐。 我认为音乐是年轻人表达自我的一种方式。 通过音乐，我们可以表达我们的情感和生活态度。 音乐可以给我们力量、安慰和希望。 我们心里总有一首歌想唱给我们所爱的女孩； 总有一首歌曲可以安慰我们孤独的心灵。所以，我也想做一个音乐网站，通过音乐的力量

3、给更多人温暖和安慰。 这次选定的主题，我计划制作六个网页，分别是主页、歌手、专辑、排行榜、MV和自我介绍。 首先，在制作之前，我参考了主流音乐网站QQ音乐和网易云音乐的网页布局布局，取其精华为自己所用。 我初步确定这个网页的布局是简单的上下式，简洁明了，方便用户浏览。 网页内容以图文为主，文字较少，图片色彩丰富网页设计制作教程期末考试，以吸引用户的兴趣。 总而言之，本网站的设计理念是极简主义，去掉多余的文字，排版内容简单明了网页设计制作教程期末考试，贯穿着一种简单而真诚的生活态度。2． 如何利用互联网的优势更好的表达（页面布局风格、布局、色彩、交互性、多媒体等。为什么这样做？）首先，本网站页面的布局借鉴了一些优秀的音乐网站排版、布局

4、上下式为主风格，风格简单、舒适、自然，因为太多的东西和一些花哨的动画会给人视觉疲劳，而且看起来厚重、累赘，不利于用户的浏览体验。 网页颜色以白色和灰色为主，看起来低调但内涵丰富。 同时加入了色彩缤纷的图片，让整体不会太过沉闷。 色彩的协调给人一种自然、舒适的感觉。 关于网站的交互性，我设置了六个页面的相互链接和用户登录链接，可以满足网站必要的交互性。 网页的交互性是通过链接点来实现的，大多数网页需要有非常醒目的导航来实现各个页面的跳转。 因此，在网站顶部添加了各个网页的链接，以方便用户查找和使用。 在网页制作的整个过程中，都会用到文本、图像、链接、表格等多媒体内容。 通过多媒体的综合运用，使网站变得生动有趣。 3． 网页的结构和分解

5.（绘制网站页面结构、站点地图、链接点）栏目构成主页主要功能主页是网站的本质和核心部分。 一个好的主页可以给用户留下良好的第一印象。 该主页链接各个页面，综合推荐歌曲信息，底部显示网站信息。 歌手登录后可以快速准确地找到您想要的歌手专辑，包括所有音乐专辑，并且您可以通过搜索快速找到相关专辑。 排名分为总排名、月排名、日排名，反映了歌曲的受欢迎程度，并为用户收听提供参考MV，包括所有音乐专辑MV。 您可以通过搜索快速找到相关MV。 个人简介包括个人信息的介绍 4、网页所使用的技术 使用的技术：CSS、div布局、HTML 使用的软件：Dreamweaver、Photoshop 使用Dreamweaver布局制作网页，并使用照片

6.跳转美化图片CSS文件：.big height: auto;width: 960px;margin-right: auto;margin-left: auto;.top height: auto;width: 960px;margin-right: auto;margin-左：自动；.left1 背景颜色：#F36；浮动：左；高度：200px；宽度：250px；列表样式类型：无；文本对齐：中心；.left1 ul li 字体大小：16px；列表-麦粒肿

7. le-type: none;margin-top: 0px;margin-bottom: 0px;background-color: #F36;height: 35px;width: 80px;margin-right: 0px;margin-left: 0px;text-align : 中心;颜色: #FFF;字体粗细: 粗体;.content1 背景图像: url(./images/20.jpg);背景重复: 重复-y;.right1 浮动: 右;高度: 200px;宽度：

8. 710px;背景图像: url(./images/1.jpg);背景颜色:#FFF;背景重复:重复-x;.内容高度:自动;宽度: 960px;清晰:两者;背景-图片：无；背景重复：重复-y；.中背景颜色：#9F6；高度：自动；宽度：360px；左边距：300px；.content ul li 字体系列：微软雅黑

9.;字体大小：16px;浮动：左;高度：20px;宽度：80px;列表样式类型：无;左边距：85px;上边距：10px;.脚高度：100px;宽度：960px ;margin-top: 15px;text-align: center;.foot ul li text-align: center;height: 25px;width: 80px;list-style-type: none;float: left;margin-top: 5px;margin -底部：

10. 5 像素； 右边距：40px； 左边距：50px； 首页代码： 5、网站设计日志设计制作过程中出现的困难，如何解决？ 在这个网站设计中，还存在很多让我头疼的问题。 首先要面对的是网页结构布局的构建。 因为我想做的事情不一样，有自己的风格，所以我在脑子里构建了很久，并不满足。 最后，我参考了QQ音乐和网易云音乐优秀的Layout布局，结合自己的想法ip形象，做出了现在的Layout。 但与想象和展示还是有很大差距，效果与我预想的相差甚远。 下面说说生产过程中遇到的问题。 经过前面的几次制作，基本的Div插入还是掌握了，但是制作过程中还是出现了很多小问题，差点把我的头炸坏了。

11、比如插入一个Menu再插入其他Div后很难对齐。 尝试了很多方法都没有效果，最后关掉了redo； 另一个例子是CSS的应用，我新建了一个html，但是保存后发现前几个网页的格式也发生了变化。 诸如此类的小问题还有很多。 虽然很小，但确实很让人头疼，而且很难发现错误。 最后是网站细节的优化。 毫不夸张地说，这比制作网页还要困难。 细节的优化需要你大量的精力，而且难度也不小。 总而言之，制作一个漂亮的网站确实很困难，一个小问题可能会花费你几个小时。 6. 作品的自我评价 写完我做的网站后，我个人的印象或看法是什么？ 对于这个网页的制作，我的第一感觉就是制作一个网页太难了，需要花费大量的时间和脑力才能做出一个让我满意的漂亮网页。但是当你

12. 当我完成最后一个布局，输入最后一个代码，保存并检查我的网站时，我感到非常自豪和兴奋。 一个文科生和一个计算机基础薄弱的人有一天能够独立制作一个网站，真是不可思议。 ！ 总的来说，我对这次的工作还是比较满意的。 虽然还有很多需要改进的地方，但是能够达到这个水平我还是很满足的。 虽然我不是计算机专业的，制作网页的要求没有那么高，以后可能也用不到，但是我觉得学会制作网站还是很重要的。 我想它一定会给我们以后的工作和生活带来很大的帮助。 这门课程马上就要结束了，也代表着我这个学期的结束。 总的来说，回想起来，我真正觉得有用的知识就是网页的创建。 因此，我非常感谢老师的辛勤教导，希望通过我的后勤和实践，能够制作出更加精美的网页。 7． 网站页面

13、打印稿中所有不同风格的网页截图吉祥物设计，并给出简要说明（如：本页面使用的技术、页面特点等）。 （采用CSS、PS、Html，页面特点：色调以浅色为主，给人一种轻盈、自然、舒适的感觉，整个页面充满图文，提高了用户体验，贯穿极简主义，去除多余花哨的部分）（使用css、html时，页面特点：颜色以灰色为主，低调但有内涵）（使用CSS、HTML，页面特点：白色为主色，白色赋予给人一种洁白、清澈、纯净、干净的感觉，图文丰富，给用户留下极佳的印象）（使用了CSS、HTML，页面特点：以白色为主，白色给人一种洁白、清澈、纯净的感觉干净整洁，图文丰富，专辑分类多而详细，方便用户快速查找、收听）（使用CSS、HTML，页面特点：图文丰富，增强了可读性和趣味性）网页，简单明了，方便用户快速搜索和查看）（采用CSS、HTML，页面特点：白色为主色调，浅绿色为蓝色为主色调，给人一种轻盈、舒适、自然的感觉）。