1、网页美工与广告课程卷二实践考核方案网页美工与广告设计说明书设计题目：水星家纺网站美工的设计与实现姓 名： 白晓琼 学 号： 20101290101 班 级： 10 电子商务一班 指导教师： 孙俊国 完成日期： 2011-6-27 10 电商网页美工与广告卷二实践考核方案课程名称：网页美工与广告 课程编号： 0704410授课班级：10 电商 学 分：3考核形式：实践考课程性质：专业课一、 考核目的考核学生网页美工与广告设计的综合能力。二、考核方式、内容、要求考核方式：以课程设计作为主要的考核方式。考核项目：根据所学内容，完成 xxx 网站的主页 index、副页 fuye 的设计与制作。具体要
2、求：1. 用 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 与相关素材（包括
3、源文件） ；网页美工设计说明书。三、考试说明与评分标准2评分标准评分标准 分值主页及美工设计：网页美观且有创意、内容完整、导航正确、有自己设计的 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 广告、片头动画等）的制作详细过程四、总结与体会目录一、概述 51.1 选择缘由 51.2 网页美工的定义 61.3
5、 网页美工的作用 61.4 Firework.6二、网页美工的总体设计 72.1 网页设计的制作流程 .72.2 网站色彩布局 82.3 网站结构 102.4 图片轮显的制作过程 112.5 滚动图片的制作 112.6 制作网页的主要内容 112.7 形成网页 11三、美工设计总结 12水星家纺网站设计说明书一 、 概 述1.1 选择缘由我用网页美工设计的网站是水星家纺。上海水星家用纺织品股份有限公司是水星控股集团下属主要成员企业，也是国内最早涉足家用纺织品并形成优势品牌的大型家纺企业之一，是中国现代家纺业的重要奠基者。经过 10 年的发展，已快速成为集研发、设计、生产、销售于一体，专注于家用
6、纺织品行业的专业化、多品牌企业，企业生产、销售规模及综合实力居行业前列，2009 年通过国家高新技术企业评审。公司坐落于上海奉贤综合工业开发区，下辖上海百丽丝家纺有限公司、上海水星电子商务有限公司，拥有“水星” 、 “百丽丝”两大著名家纺品牌。公司产品涵盖床罩多件套、被子、枕芯、单件组合、靠坐垫、儿童用品、夏令用品、床垫沙发、餐厨卫浴、毛毯等十大系列 300 多个品种。现拥有专利和版权等知识产权 80 余项。随着今年来家居业“重装饰、轻装饰”的潮流，家用纺织品越来越有实用性的作用提升到装饰性的作用，家纺行业被前所未有的“激活”了家纺产业发展前景光明。首先，以居民住房、宾馆饭店、旅游交通、医疗卫
7、生等为代表的投资型和公共服务型消费热点，都将成为促进中国家纺市场不断扩大的因素，随着社会的不断发展、人们生活的不断提高，人们对这些床上用品的要求不仅仅是为了取暖、舒适了，还加上了时尚、好看，这意味着人们对家纺公司生产的商品越来越关注了，当前中国每年有 1000 万对新人结婚，因结婚产生的家纺产品的消费额将十分可观。上海水星家纺有限公司生产的商品都与我们的生活息息相关，是不可或缺的生活用品。因此我选择了为水星家纺有限公司设计网站，而且我们那还有一个水星家纺专卖超市。每天都有络绎不绝的客源。1.2 网页美工的定义网页美工就是对网页的美化，网页美工要熟悉 photoshop fireworks fl
8、ash 等制图软件，也要有一个非常好的视觉功底，创意能力，才能创造出非常美观的页面网页美工也用 css 来进行美化，css 可以控制 html 标签的元素，当我们鼠标放在超级链接上的时候背景变色网页美工需要掌握 DIV+CSS 样式；基础 HTML 语言。 基础美术：素描（石膏几何体、静物写生） ；色彩（色彩构成、简单色彩静物写生）三大构成：色彩构成、平面构成、立体构成。 Photoshop 网页配色及排版设计；Illustrator 网页设计；网页设计综合、经典网页解析。1.3 网页美工的作用对于制作一个网页来说。网页美工起着举足轻重的作用，网页美工设计不单纯从事美术绘画，而需要定位软件使用
9、者、使用环境、使用方式并且最终为软件用户服务，他们进行的是集科学性与艺术性于一身的设计，他们需要完成的，简单说来，正是一个不断为用户设计视觉效果使之满意的过程。 网页美工设计的职能大体包括三方面：一是图形设计，即传统意义上的“美工” 。当然，实际上他们承担得不是单纯意义上美术工人的工作，而是软件产品的产品“外形”设计。二是交互设计，主要在于设计软件的操作流程、树状结构、操作规范等。一个软件产品在编码之前需要做的就是交互设计，并且确立交互模型，交互规范。三是用户测试/研究，这里所谓的“测试” ，其目标恰在于测试交互设计的合理性及图形设计的美观性，主要通过以目标用户问卷的形式衡量网页设计的合理性。
10、1.4 Firework在软件界，Fireworks 指网页三剑客之一的软件。原为 Macromedia 公司所有。在Macromedia 被 Adobe 兼并之后，Adobe 又进一步发展了此软件，但是与 Macromedia 的风格差别较大。将来有可能被 Photoshop 等取代。现最新版本 Adobe Fireworks CS5.1。fireworks 是一个强大的网页图形设计工具，你可以使用它创建和编辑位图、矢量图形，还可以非常轻松的做出各种网页设计中常见的效果，比如翻转图象，下拉菜单等，设计完成以后，如果你要在网页设计中使用，你可以将它输出为 html 文件，还能输出为可以在 ph
11、otoshop,illustrator 和 flash 等软件中编辑的格式。Fireworks 提供专业网络图形设计和制作方案，通过它，你可以编辑网络图形和动画，支持位图和矢量图。同时它能 dreamweaver、flash 能实现网页的无缝连接，与其它图形程序各 HTML 编辑也能密切配合，为用户一体化的网络设计方案提供支持.1.5 色彩的平衡与呼应 1）色彩的平衡。色彩在页面中可以形成很多的效果，通过强烈的对比，可以突出页面的重点。还可以通过色彩调配，达到页面稳重度的改变。一般的情况下，页面上方的颜色总是很重，这样才能压住下面的颜色，如果不采取这种办法，整个页面将显得很不稳重，底下的文字图
12、片，有飘出的意味。因此，要使整个页面显得很平衡，必须要有能镇住其他颜色的色彩。 2）色彩的呼应。一种比较突出的色彩，如果很突兀地放在页面中，无论你是突出重点也好，还是 logo 图标，都给整个页面带来了副作用。为此，你必须在相对称的位置加上该色系（对于页面并不醒目）的色彩以呼应，这样可以弱化这种视觉的冲击。二 、 网 页 美 工 的 总 体 设 计2.1 网页设计的制作流程第一步：确定网站主题做网站，首先必须要解决的就是网站内容问题，即确定网站的主题。对于内容主题的选择，要做到小而精，主题定位要小，内容要精。不要去试图制作一个包罗万象的站点，这往往会失去网站的特色，也会带来高强度的劳动，给网站
13、的及时更新带来困难。第二步：做好网站规划确定好网站的主题内容、图片、文字材料之后就开始用 Firework 进行网页设计。首先打开 Firework 新建一个宽为 950、高为 660 的背景为白色的页面，然后进行网页设计，将页面进行布局。第三步：网页的详细制作步骤网页最上面的是一个长方形条，填充颜色为红褐色，右边写着八个字,水星家纺公司的主题-连一张床，爱一个家。颜色为白色，字体为宋体、大小为 26 磅，加了内斜角的效果，整体更加好看。如图 2-1-1如图 2-1-1下面是水星家纺的标志图片和导航条和标志宣传图片的右边是企业新闻和企业简介。如图 2-1-2，2-1-3 所示：图 2-1-2图
14、 2-1-32.2 网站色彩布局水星家纺网站属于标准的中型商业网站，首页采用白色、红褐色、黄色、黑色四色搭配，给人一种文静、舒适、温馨的感觉。这四种色块将网页分成 5 大部分，黄色区域为网站 banner，并且直接使用了水星家纺公司的一张纺织品设计效果图作为背景将其利用 Flash 制作的图片轮显，这样能更好的表达网站的主题，白色与浅黄色的件表面部分分别放置了公司的标志性图片和网站的 Logo、导航菜单与快速链接，白色区域为共有两部分:一部分是介绍公司的简介，另一部分是新闻动态。最下面的白色区域是水星家纺公司的产品展示区域，共有六张纺织品的照片，将这六张图片利用代码制作成滚动图片。红褐色主要是
15、起到点睛的作用，用于最上面再加上公司的主题连一张床、爱一个家，字体为宋体，颜色为白色，还添加上了内斜角的效果，给人感觉甚是温馨。副页采用白色、黑色、粉色、褐色四种搭配，同样给人一种温馨的感觉特别是粉色，这四种色块将网页分成 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 所示；副
16、页如图 2-3-1 所示AB C DE首页 图 2-3-1AB C DEF副页 图 2-3-2在网站结构布局方面，该网站打破了标准的二分栏布局，这样既有足够的空间放置网站内容，网站也不会太空。2.4 图片轮显的制作过程 图片轮显的操作步骤如下：1）首先启动 Flash2.0 建立一个宽 500、高 476 的白色画布。2）新建 3 个图层，将图层三设为遮罩层，在第一个图层中导入第一张照片到舞台，利用对齐工具将图片与画布对齐重合。3）导入第二张照片到舞台与第一张的步骤完全相同。4）将第三层遮罩层解锁，在第一帧中插入关键帧然后在图片的边上画一个矩形在第四十帧上插入关键帧将这个矩形放大知道把图片盖住
17、，在第一帧与四帧中建补间形状。剩下的与上述步骤完全相同。2.5 滚动图片的制作 滚动一般有两种制作方向：一是水平方向滚动，二就是垂直方向滚动。直接将现有的代码拷到相应的位置就行。滚动的产品图片在 Flash 中只需要制作出动态的效果，动态效果将在 dreamweaver 中体现出来，图片的高度和宽度都可以根据实际情况在代码中进行修改。2.6 制作网页的主要内容网站主要内容区域用于放置滚动的产品图片，在 firework 中只需要制作出静态效果，动态效果将在 dreamweaver 中进行制作。2.7 形成网页当网站在 fierwork 中设计完成后，只是完成了一部分的工作，还需要将它制作成HT
18、ML 格式的网页。在制作网页前还需要利用切片工具将设计稿切割成 N 个部分，然后dreamweaver 中创建表格重新组合。切片前也要先观察好，哪些是自己需要的，哪些东西能重复使用，哪些是需要越小越好的，哪些文字是必须用图片的！考虑好这些就进行切片，记住精确精确再精确！如果有必要将类型相同的图片做成一张图片！ 三 、 美 工 设 计 总 结注意页面的分块，着手设计一个页面的时候，你必须根据所掌握的内容，以及其风格，对页面的整体进行分块。分块是一个非常必要且难以掌握的技巧。分块可以用不同着色的色块、框、细线、排列整齐的英文等等，还可以混合使用，但是注意不要过于醒目，因为页面的重点在内容，而不在其
19、他。通过学习，了解网站和网页的基本设计思想，使学生提高和掌握对色彩基础知识（色相、明度、纯度、空间混合概念，色彩构成的一般原理、色彩的心理、对色彩的观察能力和对丰富的色彩感知能力，对一般色彩的搭配能力、网页的色彩设计、配色软件的使用等） ；平面构成（平面设计构图的形式要素、关系要素、了解平面设计构图与视觉传达的关系，熟悉点、线、面、色彩、肌理等设计元素的基本设计方法，并在实践中能灵活运用；掌握平面设计构图的几种常用的表现方法） ；初步掌握 CorelDRAW工具的使用，培养对优秀网页版式分析模仿的能力，掌握网页设计的基本方法。信息工程学院网页美工与广告实践环节考核报告单2010-2011 学年
20、度第二学期期末排课编号：(2010-2011-2)-0704410-00425- 1 批阅日期： 年 月 日姓名 白晓琼 班级 10 电商 1 学号 20101290101评分标准 满分 得分主页及美工设计：网页美观且有创意、内容完整、导航正确、有自己设计的 logo，banner 及 flash 广告。40副页及美工设计：网页布局好，内容完整、导航正确，有 1 个以上的 Flash 广告。 20评分标准及得分设计说明书：要求：格式正确、排版规范；有网页美工的分析与规划，重点美工问题的构思与解决过程，网页美工设计重点与难点分析与体会等。用 A4打印，7 页以上。40合 计 100考核成绩 任课教师 签名
