网页美工设计说明书电商.docx

1、网页美工设计说明书电商网页美工与广告课程卷二实践考核方案网页美工与广告设计说明书设计题目：水星家纺美工的设计与实现姓 名： 白晓琼 学 号： 20101290101 班 级： 10电子商务一班 指导教师： 俊国 完成日期： 2011-6-27 10电商网页美工与广告卷二实践考核方案课程名称：网页美工与广告 课程编号： 0704410授课班级：10电商 学 分：3考核形式：实践考课程性质：专业课一、 考核目的考核学生网页美工与广告设计的综合能力。二、考核方式、容、要求考核方式：以课程设计作为主要的考核方式。考核项目：根据所学容，完成xxx的主页index、副页fuye的设计与制作。具体要求：1.

2、 用Fireworks设计出xxx的主页与副页效果图index.png与fuye.png。（自找素材，自定栏目、导航及网页容；要求界面设计要美观，色彩搭配合理，有创意。）2. 根据主、副页效果图，切片导出网页。3. 用Dreamweaver把导出的主页与副页制成真正的网页页面index.html、fuye.html。（自行设计LOGO、banner、flash广告、flash按钮等，超正确；主副网页中要有2个以上的Flash动画）。3. 提交：index.png fuye.png index.html fuye.html与相关素材（包括源文件）；网页美工设计说明书。三、考试说明与评分标准2评分

3、标准评分标准与分值评分标准 分值主页及美工设计：网页美观且有创意、容完整、导航正确、有自己设计的logo，banner及flash广告。40副页及美工设计：网页布局好，容完整、导航正确，有2个以上的Flash广告。20设计说明书要求：格式正确、排版规；有网页美工的分析与规划，重点美工问题的构思与解决过程，网页美工设计重点与难点分析与体会等。用A4打印，7页以上。40执笔人： 审核人： 院长：2011-5-5水星家纺美工的设计与实现一、 概述简要说明选题的缘由，网页美工设计的目的意义、围，理论基础的分析、研究方法、研究容、实践方法，预期结果，需求分析等。二、 网页美工的总体设计根据需求分析的容，

4、进行主页与副页的整体美工规划与创意设计，重点是色彩设计、布局设计、栏目设计、导航容设计、logo设计、banner设计、flash广告设计等。三、 主页与副页美工的详细设计1、 用Fireworks设计主页与副页的效果图2、 切片导出网页与素材3、 用DW与HTML编码编辑主副网页，制作成真正的网页页面。4、 重要网页元素（如logo、banner、图片轮显、flash广告、片头动画等）的制作详细过程四、 总结与体会水星家纺设计说明书一、概述1.1选择缘由我用网页美工设计的是水星家纺。上海水星家用纺织品股份是水星控股集团下属主要成员企业，也是国最早涉足家用纺织品并形成优势品牌的大型家纺企业之一

5、，是中国现代家纺业的重要奠基者。经过10年的发展，已快速成为集研发、设计、生产、销售于一体，专注于家用纺织品行业的专业化、多品牌企业，企业生产、销售规模及综合实力居行业前列，2009年通过国家高新技术企业评审。公司坐落于上海奉贤综合工业开发区，下辖上海百丽丝家纺、上海水星电子商务，拥有“水星”、“百丽丝”两大著名家纺品牌。公司产品涵盖床罩多件套、被子、枕芯、单件组合、靠坐垫、儿童用品、夏令用品、床垫沙发、餐厨卫浴、毛毯等十大系列300多个品种。现拥有专利和等知识产权80余项。随着今年来家居业“重装饰、轻装饰”的潮流，家用纺织品越来越有实用性的作用提升到装饰性的作用，家纺行业被前所未有的“激活”

6、了家纺产业发展前景光明。首先，以居民住房、宾馆饭店、旅游交通、医疗卫生等为代表的投资型和公共服务型消费热点，都将成为促进中国家纺市场不断扩大的因素，随着社会的不断发展、人们生活的不断提高，人们对这些床上用品的要求不仅仅是为了取暖、舒适了，还加上了时尚、好看，这意味着人们对家纺公司生产的商品越来越关注了，当前中国每年有1000万对新人结婚，因结婚产生的家纺产品的消费额将十分可观。上海水星家纺生产的商品都与我们的生活息息相关，是不可或缺的生活用品。因此我选择了为水星家纺设计，而且我们那还有一个水星家纺专卖超市。每天都有络绎不绝的客源。1.2网页美工的定义网页美工就是对网页的美化，网页美工要熟悉ph

7、otoshop fireworks flash等制图软件，也要有一个非常好的视觉功底，创意能力，才能创造出非常美观的页面网页美工也用css来进行美化，css可以控制html标签的元素，当我们鼠标放在超级上的时候背景变色网页美工需要掌握DIV+CSS样式；基础HTML语言。 基础美术：素描（石膏几何体、静物写生）；色彩（色彩构成、简单色彩静物写生） 三大构成：色彩构成、平面构成、立体构成。 Photoshop网页配色及排版设计；Illustrator网页设计；网页设计综合、经典网页解析。1.3网页美工的作用对于制作一个网页来说。网页美工起着举足轻重的作用，网页美工设计不单纯从事美术绘画，而需要定

8、位软件使用者、使用环境、使用方式并且最终为软件用户服务，他们进行的是集科学性与艺术性于一身的设计，他们需要完成的，简单说来，正是一个不断为用户设计视觉效果使之满意的过程。 网页美工设计的职能大体包括三方面：一是图形设计，即传统意义上的“美工”。当然，实际上他们承担得不是单纯意义上美术工人的工作，而是软件产品的产品“外形”设计。二是交互设计，主要在于设计软件的操作流程、树状结构、操作规等。一个软件产品在编码之前需要做的就是交互设计，并且确立交互模型，交互规。三是用户测试/研究，这里所谓的“测试”，其目标恰在于测试交互设计的合理性及图形设计的美观性，主要通过以目标用户问卷的形式衡量网页设计的合理性

9、。1.4 Firework在软件界，Fireworks指网页三剑客之一的软件。原为Macromedia公司所有。在Macromedia被Adobe兼并之后，Adobe又进一步发展了此软件，但是与Macromedia的风格差别较大。将来有可能被Photoshop等取代。现最新版本Adobe Fireworks CS5.1。fireworks是一个强大的网页图形设计工具，你可以使用它创建和编辑位图、矢量图形，还可以非常轻松的做出各种网页设计中常见的效果，比如翻转图象，下拉菜单等，设计完成以后，如果你要在网页设计中使用，你可以将它输出为html文件，还能输出为可以在photoshop,illustr

10、ator和flash等软件中编辑的格式。Fireworks提供专业网络图形设计和制作方案，通过它，你可以编辑网络图形和动画，支持位图和矢量图。同时它能dreamweaver、flash能实现网页的无缝连接，与其它图形程序各HTML编辑也能密切配合，为用户一体化的网络设计方案提供支持.1.5色彩的平衡与呼应 1）色彩的平衡。色彩在页面中可以形成很多的效果，通过强烈的对比，可以突出页面的重点。还可以通过色彩调配，达到页面稳重度的改变。一般的情况下，页面上方的颜色总是很重，这样才能压住下面的颜色，如果不采取这种办法，整个页面将显得很不稳重，底下的文字图片，有飘出的意味。因此，要使整个页面显得很平衡，

11、必须要有能镇住其他颜色的色彩。 2）色彩的呼应。一种比较突出的色彩，如果很突兀地放在页面中，无论你是突出重点也好，还是logo图标，都给整个页面带来了副作用。为此，你必须在相对称的位置加上该色系（对于页面并不醒目）的色彩以呼应，这样可以弱化这种视觉的冲击。二、网页美工的总体设计2.1 网页设计的制作流程第一步：确定主题做，首先必须要解决的就是容问题，即确定的主题。对于容主题的选择，要做到小而精，主题定位要小，容要精。不要去试图制作一个包罗万象的站点，这往往会失去的特色，也会带来高强度的劳动，给的及时更新带来困难。第二步：做好规划确定好的主题容、图片、文字材料之后就开始用Firework进行网页

12、设计。首先打开Firework新建一个宽为950、高为660的背景为白色的页面，然后进行网页设计，将页面进行布局。第三步：网页的详细制作步骤网页最上面的是一个长方形条，填充颜色为红褐色，右边写着八个字,水星家纺公司的主题-连一床，爱一个家。颜色为白色，字体为宋体、大小为26磅，加了斜角的效果，整体更加好看。如图2-1-1如图2-1-1下面是水星家纺的标志图片和导航条和标志宣传图片的右边是企业新闻和企业简介。如图2-1-2，2-1-3所示：图2-1-2图2-1-32.2色彩布局水星家纺属于标准的中型商业，首页采用白色、红褐色、黄色、黑色四色搭配，给人一种文静、舒适、温馨的感觉。这四种色块将网页分

13、成5大部分，黄色区域为banner，并且直接使用了水星家纺公司的一纺织品设计效果图作为背景将其利用Flash制作的图片轮显，这样能更好的表达的主题，白色与浅黄色的件表面部分分别放置了公司的标志性图片和的Logo、导航菜单与快速，白色区域为共有两部分:一部分是介绍公司的简介，另一部分是新闻动态。最下面的白色区域是水星家纺公司的产品展示区域，共有六纺织品的照片，将这六图片利用代码制作成滚动图片。红褐色主要是起到点睛的作用，用于最上面再加上公司的主题连一床、爱一个家，字体为宋体，颜色为白色，还添加上了斜角的效果，给人感觉甚是温馨。副页采用白色、黑色、粉色、褐色四种搭配，同样给人一种温馨的感觉特别是粉

14、色，这四种色块将网页分成5大部分，褐色作背景是副页的一个小banner，是利用文字特效制作的，如图2-2-1所示图2-2-1主体部分是企业详细简介和最新播报。如图2-2-2所示图2-2-2企业简介的右边做了一个垂直滚动的图片展示。如图2-2-3图2-2-3下边是家纺大世界和合作媒体照片展示。如图2-2-4所示图2-2-42.3结构 首页网页布局如图2-3所示；副页如图2-3-1所示ABCDE首页 图2-3-1ABCDEF副页 图2-3-2在结构布局方面，该打破了标准的二分栏布局，这样既有足够的空间放置容，也不会太空。2.4图片轮显的制作过程 图片轮显的操作步骤如下：1）首先启动Flash2.0

15、建立一个宽500、高476的白色画布。2）新建3个图层，将图层三设为遮罩层，在第一个图层中导入第一照片到舞台，利用对齐工具将图片与画布对齐重合。3）导入第二照片到舞台与第一的步骤完全相同。4）将第三层遮罩层解锁，在第一帧中插入关键帧然后在图片的边上画一个矩形在第四十帧上插入关键帧将这个矩形放大知道把图片盖住，在第一帧与四帧中建补间形状。剩下的与上述步骤完全相同。2.5滚动图片的制作 滚动一般有两种制作方向：一是水平方向滚动，二就是垂直方向滚动。直接将现有的代码拷到相应的位置就行。滚动的产品图片在Flash中只需要制作出动态的效果，动态效果将在dreamweaver中体现出来，图片的高度和宽度都

16、可以根据实际情况在代码中进行修改。2.6制作网页的主要容主要容区域用于放置滚动的产品图片，在firework中只需要制作出静态效果，动态效果将在dreamweaver中进行制作。2.7形成网页当在fierwork中设计完成后，只是完成了一部分的工作，还需要将它制作成HTML格式的网页。在制作网页前还需要利用切片工具将设计稿切割成N个部分，然后dreamweaver中创建表格重新组合。切片前也要先观察好，哪些是自己需要的，哪些东西能重复使用，哪些是需要越小越好的，哪些文字是必须用图片的！考虑好这些就进行切片，记住精确精确再精确！如果有必要将类型相同的图片做成一图片！ 三、美工设计总结注意页面的分

17、块，着手设计一个页面的时候，你必须根据所掌握的容，以及其风格，对页面的整体进行分块。分块是一个非常必要且难以掌握的技巧。分块可以用不同着色的色块、框、细线、排列整齐的英文等等，还可以混合使用，但是注意不要过于醒目，因为页面的重点在容，而不在其他。通过学习，了解和网页的基本设计思想，使学生提高和掌握对色彩基础知识（色相、明度、纯度、空间混合概念，色彩构成的一般原理、色彩的心理、对色彩的观察能力和对丰富的色彩感知能力，对一般色彩的搭配能力、网页的色彩设计、配色软件的使用等）；平面构成（平面设计构图的形式要素、关系要素、了解平面设计构图与视觉传达的关系，熟悉点、线、面、色彩、肌理等设计元素的基本设计

18、方法，并在实践中能灵活运用；掌握平面设计构图的几种常用的表现方法）；初步掌握CorelDRAW工具的使用，培养对优秀网页版式分析模仿的能力，掌握网页设计的基本方法。信息工程学院网页美工与广告实践环节考核报告单2010-2011学年度第二学期期末排课编号：(2010-2011-2)-0704410-00425- 1 批阅日期： 年 月 日白晓琼 班级10电商1学号20101290101评分标准及得分评分标准满分得分主页及美工设计：网页美观且有创意、容完整、导航正确、有自己设计的logo，banner及flash广告。40副页及美工设计：网页布局好，容完整、导航正确，有1个以上的Flash广告。20设计说明书：要求：格式正确、排版规；有网页美工的分析与规划，重点美工问题的构思与解决过程，网页美工设计重点与难点分析与体会等。用A4打印，7页以上。40合 计100考核成绩任课教师签名