网页美工实训报告

网页美工实训报告

——万里驾校网页设计

一、整体结构及主题

关于万里驾校这个网页，主要包括1个首页和5个子页，首页内容比较丰富，主要从整体上对驾校的信息进行布局，从首页可以很清晰很明了的看出整个网站包含那些信息，使网页更具可读性，亦利于浏览；网页的结构主要为两栏式,上下式和三栏式，整个网页以简洁大方为主题，网页的logo主要包括一行中文字样，一行英文字样，一个简单的奔马型图标，其中中文字样在上，英文字样在下，图标在右，这个logo在整个网页的左上角，在右上角与之对称的则是搜索和导航栏，在首页的设计中，网页留白比较多，相对美观简约，以白色为主色调，简约大气，一目了然。

二、 网站框架结构图

三、 网站色彩搭配

网站主要采用冷色调和中性色调，以棕色和白色为基调，这使得网站看起来简约、而不失大气沉稳，比较有深度，更具说服力和浏览性。

Logo是我根据该公司的名字设计而来，以一个奔跑的马为主体，象征着“万里”二字，其颜色是比较中性的棕色，logo中英文的色彩亦采用与logo相同的色彩，保持统一性。

导航的背景颜色均采用的棕色，文本色彩是白色，这样与背景颜色相异，美观也利于浏览。并根据浏览者所在的页面将其文本颜色设置成与背景相异的明亮色系，黄色，下划线的色彩亦如此，这使得浏览知道自己所在的是哪个网页，利于阅读，也是网站不至于太过单调、沉闷。

整个网站的文本颜色主要以棕色为主，色系较深，更能突出网站所要表达的内容，也利于浏览者查询到自己想要的内容。在一些栏目部分的文本则是采用比较醒目的暖色调橙色，使人一目了然，也使网站不至于太过单调、沉闷。

图片色彩均是采用的深色系，使其看起来更具流动性，不至于单调、呆板。

网站中的方框采用的是棕色和灰色，给人的整体感觉比较正直与坚持，方方正正却不显得呆板，内容简洁的同时又不会单调枯燥乏味，留白部分较多，浅色背景搭配深色文字，二者对比的反差让人能更深刻的记住该网页，同时看字的时候会更清晰。

四、 网站布局设计

1、 整个网站的各页面的页眉页脚均是采用的相同模式，如logo、搜索、导航和网站版权信息，保持统一性，使人一目了然。简洁，明朗。

2、 首页布局

首页的中间部分以上下框架模式来布局，由公司简介、学车班别、新闻中心、新闻动态、通知公告、汽车资讯、你问我答、视频教学等8个栏目组成。视频教学部分以图片为主，以此呈现滚动的模式，使网页更具流动性、观赏性。上框架由一个汽车图片和公司简介两部分构成，与网站主题贴切。下框架则是由五个方框构成，布局紧凑，条理清晰。如左图所示：

3、 子页布局

“关于我们”子页的中间部分以上下框架模式来布局，由公司文化、联系我们、汽车保养等三个栏目组成；其中汽车保养采用与首页视频教学同样模式；其布局是上下框架模式，上框架以三个汽车图片构成，与网站主题贴切，符合驾校所要传达的理念；下框架则是由三个方框构成，布局紧凑，条理清晰。

“在线报名”子页则以左右框架模式布局，整个页面由三个方框组成，布局紧凑，条理清晰。左框架又以上下框架模式布局，由两个方框以及图片构成，图片的插入使网页更具流动性、观赏性，不至于呆板、单调。整个页面由登录、学车流程、服务网点、报名资料、身体条件等5个栏目组成；服务网点以图片链接的方式呈现。

“模拟考试”子页以左右框架模式来布局，由导航、模拟考试、视频教学等三个栏目组成，左框架是一个导航，布局紧凑，条理清晰，符合浏览者的需要。

“学车班别”子页的中间部分以上下框架来布局，上框架由三个图片来呈现，与网站主题贴切，符合驾校所要传达的理念；下框架由经济班、精英班、商务班三个栏目组成，并根据班别设置条件文本。

“学车指南”子页主要由图片构成，使网页更具流动性、观赏性；包括驾驶技巧和汽车保养两个栏目，以上下框架模式来布局，上框架课分割为左右框架模式，均以图片为基调。整个页面布局紧凑，条理清晰，符合浏览者的需要。

五、设计感受

在这次网页设计中，综合运用了PS专业所学课程的理论和实际知识，进行这次网页设计实训，从而也进一步提高了我的设计能力，巩固与扩充了我网页美工课程所学的内容，更灵活的掌握了photoshop、取色器和960网格布局软件的运用，怎样确定设计方案，了解了网页的基本结构，提高了设计能力，熟悉了规范和标准，最重要的是我的独立思考的能力也有了提高。

通过这次实训我知道要做好一个网站效果图并不是想象中的那么简单，需要我们平时多积累多操作，一个网站的整体性当然包括色彩图片的搭配，所以还需要提升自己的审美观。最主要的设计一个网站必须要先制定一个完整合适的框架图，使浏览者对整个页面有种和谐、简易、明了的感觉。同时要收集丰富的主题素材，以展示网页的可读性。

六、参考资料

教材：《Photoshop 网页制作基础与典型范例》 、《Photoshop 从入门到精通》 、《设计师生存手册》

素材文章及图片：百度，搜狗

素材图片：百度，搜狗

本文来源：https://www.2haoxitong.net/k/doc/ccc83ff3aef8941ea76e05dd.html