网页美工学习报告

1/14网页美工学习报告网页美工实训报告万里驾校网页设计一、整体结构及主题关于万里驾校这个网页，主要包括1个首页和5个子页，首页内容比较丰富，主要从整体上对驾校的信息进行布局，从首页可以很清晰很明了的看出整个网站包含那些信息，使网页更具可读性，亦利于浏览；网页的结构主要为两栏式,上下式和三栏式，整个网页以简洁大方为主题，网页的logo主要包括一行中文字样，一行英文字样，一个简单的奔马型图标，其中中文字样在上，英文字样在下，图标在右，这个logo在整个网页的左上角，在右上角与之对称的则是搜索和导航栏，在首页的设计中，网页留白比较多，相对美观简约，以白色为主色调，简约大气，一目了然。二、网站框架结构图三、网站色彩搭配网站主要采用冷色调和中性色调，以棕色和白色为基调，这使得网站看起来简约、而不失大气沉稳，比较有深度，更具说服力和浏览性。Logo是我根据该公司的名字设计而来，以一个奔2/14跑的马为主体，象征着“万里”二字，其颜色是比较中性的棕色，logo中英文的色彩亦采用与logo相同的色彩，保持统一性。导航的背景颜色均采用的棕色，文本色彩是白色，这样与背景颜色相异，美观也利于浏览。并根据浏览者所在的页面将其文本颜色设置成与背景相异的明亮色系，黄色，下划线的色彩亦如此，这使得浏览知道自己所在的是哪个网页，利于阅读，也是网站不至于太过单调、沉闷。整个网站的文本颜色主要以棕色为主，色系较深，更能突出网站所要表达的内容，也利于浏览者查询到自己想要的内容。在一些栏目部分的文本则是采用比较醒目的暖色调橙色，使人一目了然，也使网站不至于太过单调、沉闷。图片色彩均是采用的深色系，使其看起来更具流动性，不至于单调、呆板。网站中的方框采用的是棕色和灰色，给人的整体感觉比较正直与坚持，方方正正却不显得呆板，内容简洁的同时又不会单调枯燥乏味，留白部分较多，浅色背景搭配深色文字，二者对比的反差让人能更深刻的记住该网页，同时看字的时候会更清晰。四、网站布局设计1、整个网站的各页面的页眉页脚均是采用的相同模式，如logo、搜索、导航和网站版权信3/14息，保持统一性，使人一目了然。简洁，明朗。2、首页布局首页的中间部分以上下框架模式来布局，由公司简介、学车班别、新闻中心、新闻动态、通知公告、汽车资讯、你问我答、视频教学等8个栏目组成。视频教学部分以图片为主，以此呈现滚动的模式，使网页更具流动性、观赏性。上框架由一个汽车图片和公司简介两部分构成，与网站主题贴切。下框架则是由五个方框构成，布局紧凑，条理清晰。如左图所示：3、子页布局“关于我们”子页的中间部分以上下框架模式来布局，由公司文化、联系我们、汽车保养等三个栏目组成；其中汽车保养采用与首页视频教学同样模式；其布局是上下框架模式，上框架以三个汽车图片构成，与网站主题贴切，符合驾校所要传达的理念；下框架则是由三个方框构成，布局紧凑，条理清晰。“在线报名”子页则以左右框架模式布局，整个页面由三个方框组成，布局紧凑，条理清晰。左框架又以上下框架模式布局，由两个方框以及图片构成，图片的插入使网页更具流动性、观赏性，不至于呆板、单调。整个4/14页面由登录、学车流程、服务网点、报名资料、身体条件等5个栏目组成；服务网点以图片链接的方式呈现。“模拟考试”子页以左右框架模式来布局，由导航、模拟考试、视频教学等三个栏目组成，左框架是一个导航，布局紧凑，条理清晰，符合浏览者的需要。“学车班别”子页的中间部分以上下框架来布局，上框架由三个图片来呈现，与网站主题贴切，符合驾校所要传达的理念；下框架由经济班、精英班、商务班三个栏目组成，并根据班别设置条件文本。“学车指南”子页主要由图片构成，使网页更具流动性、观赏性；包括驾驶技巧和汽车保养两个栏目，以上下框架模式来布局，上框架课分割为左右框架模式，均以图片为基调。整个页面布局紧凑，条理清晰，符合浏览者的需要。五、设计感受在这次网页设计中，综合运用了PS专业所学课程的理论和实际知识，进行这次网页设计实训，从而也进一步提高了我的设计能力，巩固与扩充了我网页美工课程所学的内容，更灵活的掌握了photoshop、取色器和960网格布局软件的运用，怎样确定设计方案，了解了网页的基本结构，提高了设计能力，熟悉了规范和标准，最重要的5/14是我的独立思考的能力也有了提高。通过这次实训我知道要做好一个网站效果图并不是想象中的那么简单，需要我们平时多积累多操作，一个网站的整体性当然包括色彩图片的搭配，所以还需要提升自己的审美观。最主要的设计一个网站必须要先制定一个完整合适的框架图，使浏览者对整个页面有种和谐、简易、明了的感觉。同时要收集丰富的主题素材，以展示网页的可读性。六、参考资料教材：Photoshop网页制作基础与典型范例、Photoshop从入门到精通、设计师生存手册素材文章及图片：百度，搜狗素材图片：百度，搜狗二、项目学时数本实训项目预计实训学时数为6课时。三、项目目标1、能够制作框架网页。2、能够使用JavaScript脚本制作导航菜单。3、能够常见风格的后台管理网页。四、项目中的具体任务1、创建框架网页。2、创建顶部网页。3、创建左边导航网页。4、制作折叠导航效果。6/14五、教师知识和能力要求教师应具备网页美工的项目实践经验，对网页美工有深刻的认识和独特的见解，能够熟练运用各种网页设计技术实现网页的效果。还应该认真准备该实训项目所需要的实训素材，并能够在实训过程中给学生准确的提示和解答，指导学生进行项目设计与创新，促进学生出色地完成实训项目。六、学生知识和能力准备网页美工-项目指导书实训环境要求：安装网页设计三剑客软件，具有Internet网络连接。八、辅助教学资料网页制作综合技术教程，温谦，人民邮电出版社，XX年。美工与创意网页设计艺术，徐延章，科学出版社，XX年。九、实施步骤与技术要点创建模板创建站点，把准备好的图像素材放在网站根目录的images文件夹中，新建CSS样式表，保存为。创建一个网页文件，保存为，把新建的CSS新式表导入网页中，代码为：。作为后台网站的框架网页，其源7/14代码如下：新建顶部网页，保存为，设置网页边距属性为0px，宽度为100%，网页美工-项目指导书页如图6-2所示。每一个模块单独放在一个div中，包括父级标题菜单和子级菜单，父级标题菜单使用标签存放；子级菜单使用另一个div存放，并且设置其id值。例如关于我们的子级菜单divrid设置为child1，新闻中心的子级菜单divr的id设置为child2，以此类推，依次递增。图6-2左侧导航在每一个父级菜单的链接上添加JS脚本，例如“关于我们”的源代码为：关于我们；“新闻中心”的源代码为：新闻中心，以此类推，其他标题菜单调用expand函数的参数依次递增。设置子级菜单的链接地址，链接目标全部设置为target=”main”。在网页的之间，编写JS脚本，代码如下所示：8/14functionexpand网页美工-项目指导书制作网页主休部分的默认网页，当点击左侧的菜单，链接的网页将在网页的主体位置显示，使用IE浏览网页效果，如图6-3所示。图6-3网站后台管理网页十、考核或评价标准网页美工-项目指导书二、项目学时数本实训项目预计实训学时数为6课时。三、项目目标1、能够编辑JavaScript脚本。2、能够制作常见的网页特效。3、能够灵活地使用特效美化网页。四、项目中的具体任务1、布局网页。2、编写JavaScript脚本。3、调整网页显示效果。五、教师知识和能力要求9/14教师应具备网页美工的项目实践经验，对网页美工有深刻的认识和独特的见解，能够熟练运用各种网页设计技术实现网页的效果。还应该认真准备该实训项目所需要的实训素材，并能够在实训过程中给学生准确的提示和解答，指导学生进行项目设计与创新，促进学生出色地完成实训项目。六、学生知识和能力准备1、掌握JavaScript的语法基础。网页美工-项目指导书网页美工学习设计经验总结一、配色其实对色彩的感觉是设计师应具备的最基本素质，其作品不管是对网页界面、系统界面、还是产品包装等等都有广泛应用。基本的一些理论，什么冷暖色、对比色/补色、色彩心理、搭配原则等等，满大街都是，有意者随便搜一两篇看看就行。色彩对于美工设计师来说，更重要的是一种感觉，就像打篮球投篮的手感一样，多看，多练，这种感觉是可以后天练出来的。Mars刚接触设计时，连坐公交车时也会注意路边某公司、饭店的招牌是如何配色，处处留意生活中色彩搭配的美，关于色彩截图就更记不清有多少张了。Mars觉得，设计师对颜色的运用一般有这么10/14几个阶段：初级阶段：用自己首映感觉最好的12种颜色，不考虑其他因素、他人感觉；过度阶段：开始感觉一两种颜色单调，尽量多尝试不同色彩，该阶段极容易出现没目的的乱搭现象；成熟阶段：该阶段了解了大众对色彩的审美，开始理性的用12种色系搭配，能体会到同种颜色不同色值的细微差别，大多设计师都在这个阶段；终极阶段：把一种色彩用至极致，甚至只用黑白灰，完全沉浸某种颜色，甚至有点变态，但其创作效果让处于第三阶段的设计师一看就是大师所为。其实这也是个不断练习积累的过程，这样色彩的感觉才会提升。二、布局美工设计师除了对色彩要有好的感觉外，对布局也要有很好的把握，组合的好坏直接影响作品的效果。其实做好布局设计也不是很难，无非就以下几步：布局准备：明确你表达内容的主体部分需要哪些必要的文字和图片。不要考虑太多细节。布局版式：关于布局的版式多种多样，在将重点内容放在最显眼的前提下，可自由选择版式。对于网页来讲，根据大多数人从上到下、从左到右的浏览顺序来考虑，应11/14该将最主要的内容、图片等放在页面的左边和上边。精细布局：整体配色、字体、各模块的间距、插图、增减内容等各个方面的推敲。这一步是细活。Mars觉得最锻炼布局的方法是制作PPT。想把PPT制作美观、精简并不是件容易的事。对于软件行业的售前来说，如何制作漂亮的PPT应该是他们自我内修的一门必修课。PPT的布局做好了，其他网页、宣传册等平面布局应该都信手捏来。三、细节至理名言“细节决定成败”，在设计领域了这句话更显得重要。很多细节可能会被浏览者忽略，但对设计师来说绝不可放过，比如背景色、色彩渐变、各组件间间距、标题样式、高亮样式、字体/大小/颜色、行/段间距、插图位置/边缘处理、输入框宽高/边框色/背景色、按钮的位置等等太多了。还是之前的话，只有你看得多了，比较得多了，才能看得出这些细节。有人觉得这些细节没有什么大碍，但多个细节组合在一起就和让人觉得不舒服。举例说一下，以下是某系统里一篇文章下面的添加批注表单。上半部分是没有经过美化、由程序员直接写的程序，下半部分是有设计师协助设计美化完成的表单界面。一般正常审美的人肯定觉得下面的好看，但却不知12/14好在哪？听Mars从各个角度详解一下：配色：字体颜色像是直接从32色板上取的，没经过考究；表单边框色太重；表单背景与页面背景相同，没突出层次。布局版式：此组件又没有多行操作，无需使用列表形式；上图保存按钮在该组件标题之上俨然不合理；组件的标题的位置大小不够醒目。用户体验：明确这是一个系统里的界面组件，所以这个人既然都登进来了，还用填记录人吗？时间也肯定就是提交时间啊；提交人主要是提交自己的批注，所以给他提供大片的提交内容的输入框即可，简单明了；提交按钮，上图需要再填完批注内容后折回到左上角“保存”显然不合理，下图的界面大大方方右手边一个按钮，看起来明显，操作起来舒服。以上几方面都是关于个人审美观方面的提升，如果你不是打算进行美学研究，我觉得过多的纯理论学习不会对你的审美观有太多提高。所以我的建议就是：多看，多模仿，多做，多比。切忌自己没有什么审美观就盲目创作，其实模仿没什么可耻的，是学习的毕竟阶段。好比有人模仿MJ跳舞，尽管不是很像，但最少会得到一小部分人的喜爱和追捧，比如在某校/班的圣诞晚会上；而如果不了解大众审美，就很可能像芙蓉姐姐跳舞，只会是笑料罢了。13/14养成良好的审美观可以运用到生活的方方面面，而生活的方方面面也锻炼你的审美观，像摄影、布置自己的房间办公桌、服装的搭配等，能提高你的生活品味。四、心态在累计阶段，心态平和、踏实耐心，切忌急躁，美工本身就是细活，着急是没用的。有了基本的审美观，需要创作时心情放松，做些想做的事，吃点想吃的东西，随心所欲，给提供自己创作灵感环境。不要意味的坐在电脑前去想，事倍功半，会把自己郁闷死。五、技能有了良好的审美基础和创意，接下来就是制作了。相比较审美观的培养和创意的来临，Mars觉得一些工具技能是很好学得，无非就是我用铅笔、还是毛笔画的问题。大概介绍下Mars接触到的工具：制图技能：Photoshop、Illustrator/CorelDraw、Flash、PremierePro等等这些只是应用的工具；页面编程技能：html、css、JavaScript等；优化技能：压缩图片、网页优化等。以上工具网上的教程一抓一大把，推荐网易教