2022年网页美工设计说明书 .pdf

《2022年网页美工设计说明书 .pdf》由会员分享，可在线阅读，更多相关《2022年网页美工设计说明书 .pdf（12页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、网页美工与广告设计说明书设计题目： 歪歪蛋创意生活网站美工的设计与实现姓名：王 丹学号： 20101180124 班级： 10图文指导教师：孙俊国完成日期： 2012年 6 月 18 日名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 12 页 - - - - - - - - - 10 级选修网页美工与广告卷二实践考核方案课程名称： 网页美工与广告课程编号： 0704410授课班级： 10级选修学分： 3考核形式：实践考课程性质： 专业课一、考核目的考核学生网页美工与广告设

2、计的综合能力。二、考核方式、内容、要求考核方式：以课程设计做为主要的考核方式。考核项目：自定一个网站主题。根据该网站，用Fireworks 与 Dreamveawer设计制作成 xxx 网站的主页与副页及其他页面。要求：1. 要有网页美工的规划与设计。2. 设计出网页主页与副页效果图，并根据效果图制作网站中的其他页面，并自己设计 LOGO 、flash广告、栏目、导航、 banner、网页内容；界面设计要美观，色彩搭配合理， 有新意，超链接正确； 网页中要有 1 个以上的 Flash动画3. 提交： index.png fuye.png 及网站（ 5 张网页以上）；网页美工设计说明书。三、考试

3、说明与评分标准2评分标准评分标准与分值评分标准分值主页美工设计要求： 美观且有创意、内容完整、导航正确、有自己设计的flash广告动画。40 副页美工设计要求： 布局好， 内容完整、 导航正确， 有 1 个以上的Flash广告动画30 设计说明书要求： 格式正确、排版规范；分析到位、网页美工设计重点与难点分析深刻。用A4打印， 6 页以上。30 注：网页美工的作品与网站可借鉴其它作品，但严禁复制或他人代做，一经发现类同，按0 分处理。执笔人：审核人：院长：2012-5-5 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心

4、整理 - - - - - - - 第 2 页，共 12 页 - - - - - - - - - 目录一、概述 . . 11.1 选择缘由 . . 11.2 网页美工的定义 . . 11.3 网页美工的作用 . . 21.4 Firework . 21.5 色彩的平衡与呼应 . . 3二、网页美工的总体设计. . 32.1 网页设计的制作流程. 32.2 网站色彩布局 . . 42.3 网站结构 . . 62.4 图片轮显的制作过程 . . 62.5 滚动图片的制作 . . 72.6 制作网页的主要内容 . . 72.7 形成网页 . . 7三、美工设计总结 . . 8名师资料总结 - - -精

5、品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页，共 12 页 - - - - - - - - - 1 歪歪蛋创意生活网站美工的设计与实现一 、 概 述1.1 选择缘由我用网页美工设计的网站是生活家居类的网站。随着今年来家居业“重装饰、轻装饰”的潮流，家居设计从越来越有实用性的作用提升到装饰性的作用，家居行业被前所未有的“激活”了家居产业发展前景光明。首先，以居民住房、宾馆饭店、旅游交通、医疗卫生等为代表的投资型和公共服务型消费热点，都将成为促进中国家居市场不断扩大的因素，随着社会的不断发展、人们生活的

6、不断提高， 人们对生活居住的要求不仅仅是为了挡风遮雨了，还加上了时尚、好看，这意味着人们对家居设计的商品越来越关注了，当前中国每年有1000 万对新人结婚，因结婚产生的家居设计的消费额将十分可观。各类的家居设计都与我们的生活息息相关，是生活中不可或缺的一部分, 广阔的市场 , 巨大的消费群体对家居行业来说无一不是一个很好的良机。因此我选择了做家居设计方面的网站.1.2 网页美工的定义网页美工就是对网页的美化，网页美工要熟悉photoshop fireworks flash等制图软件，也要有一个非常好的视觉功底，创意能力， 才能创造出非常美观的页面网页美工也用 css 来进行美化， css 可以

7、控制 html 标签的元素，当我们鼠标放在超级链接上的时候背景变色网页美工需要掌握DIV+CSS样式；基础 HTML语言。基础美术：素描（石膏几何体、静物写生）；色彩（色彩构成、简单色彩静物写生）三大构成：色彩构成、平面构成、立体构成。Photoshop 网页配色及排版设计； Illustrator网页设计；网页设计综合、名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页，共 12 页 - - - - - - - - - 2 经典网页解析。1.3 网页美工的作用对于制作一个网页来

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

9、于测试交互设计的合理性及图形设计的美观性，主要通过以目标用户问卷的形式衡量网页设计的合理性。1.4 Firework 在软件界， Fireworks指网页三剑客之一的软件。原为Macromedia 公司所有。在 Macromedia 被 Adobe兼并之后， Adobe又进一步发展了此软件，但是与Macromedia的风格差别较大。将来有可能被 Photoshop 等取代。 现最新版本 Adobe Fireworks CS5.1 。fireworks是一个强大的网页图形设计工具， 你可以使用它创建和编辑位图、矢量图形，还可以非常轻松的做出各种网页设计中常见的效果，比如翻转图象，下拉菜单等，设计

10、完成以后，如果你要在网页设计中使用，你可以将它输出为html 文件，还能输出为可以在photoshop,illustrator和 flash等软件中编辑的格式。Fireworks 提供专业网络图形设计和制作方案，通过它，你可以编辑网络图形和动画，支持位图和矢量图。同时它能dreamweaver、flash能实现网页的无缝连接，与其它图形程序各HTML 编辑也能密切配合，为用户一体化的网络设计方案提供支持 . 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 5 页，共 12 页 - -

11、 - - - - - - - 3 1.5 色彩的平衡与呼应 1）色彩的平衡。色彩在页面中可以形成很多的效果，通过强烈的对比，可以突出页面的重点。还可以通过色彩调配，达到页面稳重度的改变。一般的情况下，页面上方的颜色总是很重，这样才能压住下面的颜色，如果不采取这种办法，整个页面将显得很不稳重，底下的文字图片，有飘出的意味。因此，要使整个页面显得很平衡，必须要有能镇住其他颜色的色彩。 2 ）色彩的呼应。一种比较突出的色彩，如果很突兀地放在页面中，无论你是突出重点也好，还是logo 图标，都给整个页面带来了副作用。为此，你必须在相对称的位置加上该色系（对于页面并不醒目）的色彩以呼应，这样可以弱化这种

12、视觉的冲击。二 、 网 页 美 工 的 总 体设 计2.1 网页设计的制作流程第一步：确定网站主题做网站，首先必须要解决的就是网站内容问题，即确定网站的主题。对于内容主题的选择，要做到小而精，主题定位要小，内容要精。不要去试图制作一个包罗万象的站点，这往往会失去网站的特色，也会带来高强度的劳动， 给网站的及时更新带来困难。第二步：做好网站规划确定好网站的主题内容、图片、文字材料之后就开始用Firework 进行网页设计。首先打开 Firework 新建一个宽为968、高为 660 的背景为白色的页面，然后进行网页设计，将页面进行布局。第三步：网页的详细制作步骤网页最上面的是一个长方形条，填充颜

13、色为浅蓝色，还加上了渐变的效果。左边写着歪歪蛋创意生活网, 这个网站的主题 - 设计美丽设计生活。颜色为白色，字体为黑体、大小为 26 磅， 加了蓝色阴影等效果， 整体更加好看。如图 2-1-1 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 6 页，共 12 页 - - - - - - - - - 4 如图 2-1-1 下面是这个网站的导航条和本期的新看点、家居排行榜。如图 2-1-2 ，2-1-3所示：图 2-1-2 图 2-1-3 2.2 网站色彩布局歪歪蛋创意生活网属于标准的

14、家居行业网站，首页采用大部分的蓝色和少部分的白色、暗绿色、灰色三色搭配，给人一种舒适、温馨家的感觉。这四种色块将网页分成几个不同的部分。蓝色区域为网站logo 和 banner，并且直接使用了在 fireworks里制作好的图片。 这样能更好的表达网站的主题，使网站的主题一目了然更加明确。 网站的导航条也是采用深蓝色作为导航条的背景色，用浅蓝色做字体的颜色，看起来更加协调。导航条下面还做了一些比较方便的快速链接。如 2-1-4 所示。白色与浅蓝色的部分放置了网站的FLASH 轮显动画和网站的新看点、最新的家居排行榜等内容。 然后就是家居设计的图片展示区，共有五张家居设计的图片， 这些图片是运用

15、代码做成的滚动效果插入到网站当中去的。最下面名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 7 页，共 12 页 - - - - - - - - - 5 的剩下三色部分是歪歪蛋创意生活网一些分类的小看点吗，共有三组内容。副页，一共有十个副页。分别采用了不同的颜色，绿色、灰色、暗黄色、浅蓝色为主要的颜色搭配， 同样给人一种小清新的感觉特别是浅蓝色和绿色。同时副页还做登录和注册页面， 还有法律声明的页面， 算是一个内容比较齐全的网站，所学到的只是基本上全都运用起来了。如图2-2-1 所示

16、图 2-2-1 网站的新闻资讯和精彩专题部分，如图2-2-2 所示。图 2-2-2 网站的中间部分做了一个水平滚动图片展示，如图2-2-3 所示。图 2-2-3 下边是家居分类专题区域展示。如图2-2-9 所示。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 8 页，共 12 页 - - - - - - - - - 6 图 2-2-4 2.3 网站结构首页网页布局如图2-3-1 所示。LOGO 图片导航新看点最新动态家居TOP 5 设计赏消费资讯精彩专题家居设计家饰生活乐居方式装修手

17、册法律声明首页图 2-3-1 在网站结构布局方面， 该网站打破了标准的二分栏布局，这样既有足够的空间放置网站内容，网站也不会太空。2.4 图片轮显的制作过程图片轮显的操作步骤如下：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 9 页，共 12 页 - - - - - - - - - 7 1）首先启动 Flash2.0 建立一个宽 297、244的白色画布。2）新建图层，将图层三设为遮罩层，在第一个图层中导入第一张照片到舞台，利用对齐工具将图片与画布对齐重合。3）导入第二张照片到舞台

18、与第一张的步骤完全相同。4）将第三层遮罩层解锁，在第一帧中插入关键帧然后在图片的边上画一个矩形在第四十帧上插入关键帧将这个矩形放大知道把图片盖住，在第一帧与四帧中建补间形状。剩下的与上述步骤完全相同。2.5 滚动图片的制作滚动一般有两种制作方向： 一是水平方向滚动，二就是垂直方向滚动。直接将现有的代码拷到相应的位置就行。滚动的产品图片在Flash 中只需要制作出动态的效果， 动态效果将在 dreamweaver中体现出来， 图片的高度和宽度都可以根据实际情况在代码中进行修改。2.6 制作网页的主要内容网站主要内容区域用于放置滚动的产品图片，在firework中只需要制作出静态效果，动态效果将在

19、dreamweaver中进行制作。2.7 形成网页当网站在 fierwork中设计完成后，只是完成了一部分的工作，还需要将它制作成 HTML格式的网页。在制作网页前还需要利用切片工具将设计稿切割成N个部分，然后 dreamweaver中创建表格重新组合。切片前也要先观察好，哪些是自己需要的，哪些东西能重复使用，哪些是需要越小越好的， 哪些文字是必须用图片的！考虑好这些就进行切片， 记住一定要精确！ 如果有必要将类型相同的图片做成一张图片，以便减少内存。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - -

20、- - - 第 10 页，共 12 页 - - - - - - - - - 8 三、 美 工 设 计 总 结注意页面的分块， 着手设计一个页面的时候，你必须根据所掌握的内容，以及其风格，对页面的整体进行分块。分块是一个非常必要且难以掌握的技巧。分块可以用不同着色的色块、框、细线、排列整齐的英文等等，还可以混合使用，但是注意不要过于醒目，因为页面的重点在内容，而不在其他。通过学习，了解网站和网页的基本设计思想，使学生提高和掌握对色彩基础知识（色相、明度、纯度、空间混合概念，色彩构成的一般原理、色彩的心理、对色彩的观察能力和对丰富的色彩感知能力，对一般色彩的搭配能力、 网页的色彩设计、配色软件的使

21、用等） ；平面构成（平面设计构图的形式要素、关系要素、了解平面设计构图与视觉传达的关系，熟悉点、线、面、色彩、肌理等设计元素的基本设计方法， 并在实践中能灵活运用； 掌握平面设计构图的几种常用的表现方法） ；初步掌握 CorelDRAW 工具的使用， 培养对优秀网页版式分析模仿的能力，掌握网页设计的基本方法。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 11 页，共 12 页 - - - - - - - - - 10 图文网页美工与广告卷二实践考核成绩评价表班级10 图文姓名王丹成

22、绩学号20101180124 分值得分评分标准与分值主页美工设计要求：美观且有创意、内容完整、导航正确、有自己设计的flash广告动画。40 副页美工设计要求：布局好，内容完整、导航正确，有1 个以上的 Flash 广告动画。网站5 张网页以上。30 设计说明书要求：格式正确、排版规范；分析到位、网页美工设计重点与难点分析深刻。用A4 打印， 6页以上。30 总分100 教师评价任课教师签字：注：网页美工的作品与网站可借鉴其它作品，但严禁复制或他人代做， 一经发现类同，按 0 分处理。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 12 页，共 12 页 - - - - - - - - -