网页美工实训报告
网页美工实训报告
万里驾校网页设计
一、整体结构及主题
关于万里驾校这个网页，主要包括1个首页和5个子页，首页内容比较丰富，主要从整体上对驾校的信息进行布局，从首页可以很清晰很明了的看出整个网站包含那些信息，使网页更具可读性，亦利于浏览；网页的结构主要为两栏式,上下式和三栏式，整个网页以简洁大方为主题，网页的logo主要包括一行中文字样，一行英文字样，一个简单的奔马型图标，其中中文字样在上，英文字样在下，图标在右，这个logo在整个网页的左上角，在右上角与之对称的则是搜索和导航栏，在首页的设计中，网页留白比较多，相对美观简约，以白色为主色调，简约大气，一目了然。
二、网站框架结构图
武汉万里驾校公司简介子页-在线报名登录学车流程服务网点报名条件图片报名资料身体条件年龄条件户籍条件学车班别你问我答新闻中心新闻动态通知公告汽车资讯视频教学子页-关于我们公司文化联系我们汽车保养-模拟考试子页子页-学车班别-学车指南子页首页小车试题货车试题安全文明客车试题导航仿真试题恢复考试摩托车从业资格软件下载模拟考试视频教学图片经济班精英班商务班驾驶技巧图片汽车保养
三、网站色彩搭配
网站主要采用冷色调和中性色调，以棕色和白色为基调，这使得网站看起来简约、而不失大气沉稳，比较有深度，更具说服力和浏览性。
Logo是我根据该公司的名字设计而来，以一个奔跑的马为主体，象征着“万里”二字，其颜色是比较中性的棕色，logo中英文的色彩亦采用与logo相同的色彩，保持统一性。
导航的背景颜色均采用的棕色，文本色彩是白色，这样与背景颜色相异，美观也利于浏览。并根据浏览者所在的页面将其文本颜色设置成与背景相异的明亮色系，黄色，下划线的色彩亦如此，这使得浏览知道自己所在的是哪个网页，利于阅读，也是网站不至于太过单调、沉闷。
整个网站的文本颜色主要以棕色为主，色系较深，更能突出网站所要表达的内容，也利于浏览者查询到自己想要的内容。在一些栏目部分的文本则是采用比较醒目的暖色调橙色，使人一目了然，也使网站不至于太过单调、沉闷。
图片色彩均是采用的深色系，使其看起来更具流动性，不至于单调、呆板。网站中的方框采用的是棕色和灰色，给人的整体感觉比较正直与坚持，方方正正却不显得呆板，内容简洁的同时又不会单调枯燥乏味，留白部分较多，浅色背景搭配深色文字，二者对比的反差让人能更深刻的记住该网页，同时看字的时候会更清晰。
四、网站布局设计
1、整个网站的各页面的页眉页脚均是采用的相同模式，如logo、搜索、导航和网站版权信
息，保持统一性，使人一目了然。简洁，明朗。2、首页布局
首页的中间部分以上下框架模式来布局，由公司简介、学车班别、新闻中心、新闻动态、通知公告、汽车资讯、你问我答、视频教学等8个栏目组成。视频教学部分以图片为主，以此呈现滚动的模式，使网页更具流动性、观赏性。上框架由一个汽车图片和公司简介两部分构成，与网站主题贴切。下框架则是由五个方框构成，布局紧凑，条理清晰。如左图所示：
3、子页布局
“关于我们”子页的中间部分以上下框架模式来布局，由公司文化、联系
我们、汽车保养等三个栏目组成；其中汽车保养采用与首页视频教学同样模式；其布局是上下框架模式，上框架以三个汽车图片构成，与网站主题贴切，符合驾校所要传达的理念；下框架则是由三个方框构成，布局紧凑，条理清晰。
“在线报名”子页则以左右框架模式布局，整个页面由三个方框组成，布局紧凑，条理清晰。左框架又以上下框架模式布局，由两个方框以及图片构成，图片的插入使网页更具流动性、观赏性，不至于呆板、单调。整个页面由登录、学车流程、服务网点、报名资料、身体条件等5个栏目组成；服务网点以图片链接的方式呈现。
“模拟考试”子页以左右框架模式来布局，由导航、模拟考试、视频教学等三个栏目组成，左框架是一个导航，布局紧凑，条理清晰，符合浏览者的需要。
“学车班别”子页的中间部分以上下框架来布局，上框架由三个图片来呈现，与网站主题贴切，符合驾校所要传达的理念；下框架由经济班、精英班、商务班三个栏目组成，并根据班别设置条件文本。
“学车指南”子页主要由图片构成，使网页更具流动性、观赏性；包括驾驶技巧和汽车保养两个栏目，以上下框架模式来布局，上框架课分割为左右框架模式，均以图片为基调。整个页面布局紧凑，条理清晰，符合浏览者的需要。
五、设计感受
在这次网页设计中，综合运用了PS专业所学课程的理论和实际知识，进行这次网页设计实训，从而也进一步提高了我的设计能力，巩固与扩充了我网页美工课程所学的内容，更灵活的掌握了photoshop、取色器和960网格布局软件的运用，怎样确定设计方案，了解了网页的基本结构，提高了设计能力，熟悉了规范和标准，最重要的是我的独立思考的能力也有了提高。
通过这次实训我知道要做好一个网站效果图并不是想象中的那么简单，需要我们平时多积累多操作，一个网站的整体性当然包括色彩图片的搭配，所以还需要提升自己的审美观。最主要的设计一个网站必须要先制定一个完整合适的框架图，使浏览者对整个页面有种和谐、简易、明了的感觉。同时要收集丰富的主题素材，以展示网页的可读性。
六、参考资料
教材：《Photoshop网页制作基础与典型范例》、《Photoshop从入门到精通》、《设计师生存手册》
素材文章及图片：百度，搜狗素材图片：百度，搜狗
扩展阅读：网站美工实习报告
网站美工实习报告
一、实习目的
随着经济高速发展，社会的竞争也越来越激烈。适者生存，对于初出茅庐的大学生，我们只有不断的充实自己，提高自己，才能在社会中站稳脚跟，才不至于淹没在社会发展的浪潮中，被这个社会淘汰。实习对于我们来说，是一个很宝贵的经验。
于是在今年暑假，我在广州普金计算机科技股份有限公司实习了一个多月，岗位是网站美工。短短一个多月的职生涯真的影响了我很多，我开始不断的对身边的人、事和物去思考，去寻找，去理解，去欣赏，去评价，去表达。就像我用两天的时间制作出一张首页效果图，他人往往只能看到完成品。而这并不是最重要的，最重要的是别人没有经历的我却在珍惜的创作过程。也许这个过程还远远不能称之为创造，但我会努力的。
下面就我这一个多月的职业生涯谈谈我个人的感受
二、实习内容1、实习主要内容
整体工作：我的工作就是负责设计整个网站的页面部分,根据网页设计师或客户所提供的主题要求来设计出整个网站。
（1）、使用photoshop、AI等图片处理软件设计、处理网站上需要的图片。
（2）、使用DIV+CSS样式及基础的HTML语言做页面布局的排版。（3）、PS网页配色及排版设计。通过色彩结构、平面结构和立体结构三大结构构成；
（4）、编写CSS代码使网站页面无论是在IE浏览器里还是在FF浏览器上正常显示；
2、工作过程
在普金公司的一个多月了，我刚开始从处理简单图片到组后让我独自一人修改了公司一个小型网站，收获可谓不少在。下面让我来说一说，我在这段时间做的事情。
（1）、了解主题：刚接到任务时，我对于如何修改毫无头绪，于是我首从网上了解了一些相关基本常识及想类似网站的页面风格。
（2）、思考配色与构图：对整个内容有了一了解后，便要思考作品的色彩和具体的构图，先用笔画出草图，也可以直接在脑海里构思。色彩要显示出稽查的专业与严谨，所以选择蓝色作为主色调。
（3）、查找素材：其实素材这种东西总是数量大于质量，我可以很轻易的下载到许多许多的素材，但却很少用的到它。这里我总结了一种思路，电脑里下载一些专业的“万金油”图库，这种图库通常种类齐全但图片很一般。另外配合专业在线图库网站（通常是国外站点）+Google，百度图片等搜索引擎进行即使的素材查找。再加上自己平时积累的素材，选择是非常大的。
（5）、设计、修改页面：这个阶段时耗时最久的，但总结出来却是非常简单的步骤，即不断地处理页面元素、将处理好的图片、动画等添加进网页、编写HTML/CSS代码。
（6）、修改：作为实习生，上交的任务被打回来重做是正常不过的事，自信的我也没能逃过返工的命运，重新构思、处理元素、写HTML/CSS代码重复一切你做过的事
3、对于页面处理的总结
作为一个网站美工除了要掌握网页三剑客,ps,这些必会的软件以外，还要对HTML、CSS甚至JavaScript用的很熟,对ASP或PHP或jsp也要有一定的了解。除此之外，要想做出来的页面美观、使用方便还需达到以下几点：（1）表达一定的艺术效果一个成功的网站应该把网页设计得吸引人，同时又要传达设计思想和情感。网页作为一种媒体，它必须具有一定的艺术感染力，一个平淡无奇、杂乱无章或毫无美感的网页很难会有浏览者喜欢，更不要说让浏览者去注意它的内容了。（2）页面结构清晰可读性强
经常可以看到这样的页面，上面堆砌了许多内容，却没有考虑它的空间框架，让人看了无法知晓哪些内容才是最具发言权的。没有流畅的视觉流程，这是典型的没有注意到编排清晰度、可读性的表现。好的网页应该将它要突出表现的内容放在浏览者一眼就能看到的地方。网页上每一个像素对浏览者眼睛的吸引力有所不同，浏览者大脑对于不同位置内容的印象也有所不同。通常来说，普通浏览者浏览网页时会忽略网页两端的“广告区”。（3）实现不同的功能
在网络这条信息高速公路上，网页最主要的功能就是一种传递信息的手段。因此，它一切内容都是为了这个目的而服务，都是要围绕这个中心进行设计的。然而，要实现这个功能，网页的美工设计和内容都必须有针对性。所谓针对性，就是指对不同类别的网页要求采用不同的美工艺术效果。（4）网站风格要符合网站的类型
在设计网页之需要做大量的准备工作，需要思考以下几个问题：1、网站的类型：站点属于新闻、娱乐、商务类的综合站点，还是个人主页；不同的类型，决定着网站的不同风格，包括主色调、排版等。如果浏览者主要是年轻人，页面就要设计得基调明快，活泼富有朝气；如果针对的群体是政府工作者或科学工作者，那么页面就要设计得严谨、严肃、理性、科学；如果针对的群体是妇女儿童，页面则要设计得温馨、友爱、轻松；如果针对的群体是恋人或从事艺术工作的人，页面就要设计得浪漫并有艺术感。（5）页面的兼容性强
每个上网的人对于浏览器有着不同的爱好，就大部分来说，IE和firefox
是两个有着很大区别却都拥有不少支持者的浏览器，即使是使用同一浏览器，也有着不同版本，而不同版本间，页面显示或多或少存在着差异。一个好的网页设计，就是至少要使网页在主流浏览器的大部分版本都能较好的显示出效果，而不是在IE上是非常华丽的一个页面，而在firefox上却是杂乱无章。(6)一切用户至上
网页设计不同于艺术设计，只要设计者喜欢，任其天马行空。而网页设计则
不能如此肆意妄为，网页设计必须考虑到用户使用时的方便，以至于网页设计师必须考虑到同一页面在不同分辨率的显示器上、不同浏览器上有什么不同的显示效果。甚至于要考虑到用户浏览器如果关闭了CSS和JavaScript页面将会怎样。只有在各种情况下，用户都能方便浏览网页，这才是一个好的设计。
三、实习体会
做了一个多月的前台美工，终于体会到网页设计无非是图文混排的那点事。不过，当你真正的去努力的创造了之后，结果却并不会每次都是好的。太多自己精心设计的东西，被别人一眼就否定了。当时心情真的很糟糕。不过，现在想想，这都些都没有什么，这也无非是成长中常常要遇到的事罢了。通过实习，我不仅将自己在学校学过的东西通过实践进步一巩固，也通过向公司的人请教学到很多工作上的技巧，更通过实习体会到很多没有人会教授给你的东西，如：如何处理同事间关系、如何面对上司、如何处理工作、如何调整对工作厌烦的心态等等。
工作是人生活的重要部分，是我们毕业生必须面对的，不论是消极还是积极，都会给人带来不同感受。而精彩的生活往往有来源于有意义的工作中，所以我不会让自己因工作的烦恼、困难和压力，困扰自己，使自己工作情绪化、生活情绪化。遇到困难我会用平常的心态实际看待问题，不说“不可能”，而是冷静下来思考如何处理并付诸于实践，告自己justdoit！
友情提示：本文中关于《网页美工实训报告》给出的范例仅供您参考拓展思维使用，网页美工实训报告：该篇文章建议您自主创作。
来源：网络整理 免责声明：本文仅限学习分享，如产生版权问题，请联系我们及时删除。
《网页美工实训报告》
由互联网用户整理提供,转载分享请保留原作者信息,谢谢!
http://m.bsmz.net/gongwen/639164.html
- 上一篇：行业网站美工设计心得
- 下一篇：网页美工设计-实验报告