网页美工设计-实验报告

1、网页美工设计-实验报告 网页美工制定-实验报告 江苏经贸职业技术学院 实验报告 (201*/201*学年第一学期) 系部信息技术系课程名称网页美工制定学生姓名学号班级指导教师 二00六年二月制 信息技术系实验报告 日期实验地点201*年9月20日指导教师评语与成绩一、实验目的：了解并熟练运用photoshopcs3二、实验项目：信息技术系实验报告 三、实验步骤: 1.打开photoshopcs3软件新建图层名称为“茶壶，宽为400毫米，高位300毫米， 分辨率为300像素/英寸，颜色模式rgb，8位，背景颜色默认为白色用渐变工具设置 左色标rgb值为161、152、131，右色标rgb值为25

2、5、255、255确定鼠标从左上角一直拉到右下角完成 2.打开“小镇图片用移动工具移到“茶壶图层调整图片大小，移到合适的位置 将“小镇图层的不透明度改为30%完成 3.新建图层用矩形选框工具在“茶壶图层画出矩形框，填充背景色rgb值为181、176、 163c，trl+d利用移动工具，将矩形框下移，ctrl+shift+alt+t进行复制。新建组，将条纹图层放入图层组中，命名为“条纹 4.打开“梅花图片用移动工具移到“茶壶图层调整图片大小，移到合适的位置， 并将图层命名为“梅花 5.打开“茶壶图片用移动工具移到“茶壶图层调整图片大小，移到合适的位置， 并将图层命名为“茶壶 6.打开“案几图片用

3、移动工具移到“茶壶图层调整图片大小，移到合适的位置， 并将图层命名为“案几 7.打开“茶杯图片用移动工具移到“茶壶图层移动四次，即出现四个茶杯调 整图片大小，移到合适的位置，并将图层命名为“茶杯 8.按“ctrl+，合并“茶壶、“案几和“茶杯图层，命名为“茶壶组合 9.打开“竹子图片用移动工具移到“茶壶图层调整图片大小，移到合适的位置， 并将图层命名为“竹子 10.选择“直排文字工具，输入“宜兴紫砂壶字样，字体为华文行楷，字体大小为 点，锐利，字体颜色rgb值为181、176、163右击图层栅格化图层11.完成并保存作业 四、实验中碰到的问题及解决方法： 无 扩大阅读：网页美工制定说明书 网页

4、美工与广告 制定题目：姓名：学号：班级：指导教师：完成日期：制定说明书 歪歪蛋创意生活网站美工的制定与实现王丹201*118012410图文孙俊国201*年6月18日 10级选修网页美工与广告卷二施行考核方案 课程名称：网页美工与广告课程编号：0704410授课班级：10级选修学分：3考核形式：施行考课程性质：专业课 一、考核目的 考核学生网页美工与广告制定的综合能力。 二、考核方式、内容、要求 考核方式：以课程制定做为主要的考核方式。 考核项目：自定一个网站主题。依据该网站，用fireworks与dreamveawer制定制作成xxx网站的主页与副页及其他页面。 要求： 1.要有网页美工的规

5、划与制定。 2.制定出网页主页与副页效果图，并依据效果图制作网站中的其他页面，并自己制定logo、flash广告、栏目、导航、banner、网页内容；界面制定要美观，色彩搭配合理，有新意，超链接正确；网页中要有1个以上的flash动画3.提交：index.pngfuye.png及网站5张网页以上；网页美工制定说明书。 三、考试说明与评分标准 2评分标准评分标准主页美工制定要求：美观且有创意、内容完整、导航正确、有自己制定的评分标准与分值flash广告动画。副页美工制定要求：布局好，内容完整、导航正确，有1个以上的flash广告动画制定说明书要求：格式正确、排版规范；分析到位、网页美工制定重点与

6、难点分析深入。用a4打印，6页以上。303040分值注：网页美工的作品与网站可借鉴其它作品，但严禁复制或他人代做，一经发现类同，按0分处理。执笔人：审核人：院长： 201*-5-5 目录 一、概述.1 1.1选择缘由.11.2网页美工的定义.11.3网页美工的作用.21.4firework.21.5色彩的平衡与呼应.3二、网页美工的总体制定.3 2.1网页制定的制作流程.32.2网站色彩布局.42.3网站结构.62.4图片轮显的制作过程.62.5滚动图片的制作.72.6制作网页的主要内容.72.7形成网页.7三、美工制定总结.8 歪歪蛋创意生活网站美工的制定与实现 一、概述 1.1选择缘由 我

7、用网页美工制定的网站是生活家居类的网站。 随着今年来家居业“重装饰、轻装饰的潮流，家居制定从越来越有有用性的作用提升到装饰性的作用，家居行业被前所未有的“激活了 家居产业发展前景光明。首先，以居民住房、宾馆饭店、旅游交通、医疗卫生等为代表的投资型和公共服务型消费热点，都将成为促进中国家居市场不断扩展的因素，随着社会的不断发展、人们生活的不断提升，人们对生活居住的要求不仅仅是为了挡风遮雨了，还加上了时尚、好看，这意味着人们对家居制定的商品越来越关注了，当前中国每年有1000万对新人结婚，因结婚产生的家居制定的消费额将十分可观。 各类的家居制定都与我们的生活息息相关，是生活中不可或缺的一部分,广阔

8、的市场,庞大的消费群体对家居行业来说无一不是一个很好的良机。因此我选择了做家居制定方面的网站. 1.2网页美工的定义 网页美工就是对网页的美化，网页美工要熟悉photoshopfireworksflash等制图软件，也要有一个非常好的视觉功底，创意能力，才干创造出非常美观的页面 网页美工也用css来进行美化，css可以控制html标签的元素，当我们鼠标放在超级链接上的时候背景变色网页美工需要掌握div+css样式；基础html语言。 基础美术：素描石膏几何体、静物写生；色彩色彩构成、简单色彩静物写生 三大构成：色彩构成、平面构成、立体构成。 photoshop网页配色及排版制定；illustr

9、ator网页制定；网页制定综合、 经典网页解析。 1.3网页美工的作用 关于制作一个网页来说。网页美工起着举足轻重的作用，网页美工制定不单纯从事美术绘画，而需要定位软件使用者、使用环境、使用方式并且最终为软件用户服务，他们进行的是集科学性与艺术性于一身的制定，他们需要完成的，简单说来，正是一个不断为用户制定视觉效果使之满意的过程。 网页美工制定的职能大体包括三方面：一是图形制定，即传统意义上的“美工。当然，实际上他们承当得不是单纯意义上美术工人的工作，而是软件产品的产品“外形制定。二是交互制定，主要在于制定软件的操作流程、树状结构、操作规范等。一个软件产品在编码之前需要做的就是交互制定，并且确

10、立交互模型，交互规范。三是用户测试/研究，这里所谓的“测试，其目标恰在于测试交互制定的合理性及图形制定的美观性，主要通过以目标用户问卷的形式衡量网页制定的合理性。 1.4firework 在软件界，fireworks指网页三剑客之一的软件。原为macromedia公司所有。在macromedia被adobe兼并之后，adobe又进一步发展了此软件，但是与macromedia的风格差别较大。将来有可能被photoshop等取代。现最新版本adobefireworkscs5.1。 fireworks是一个强大的网页图形制定工具，你可以使用它创建和编辑位图、矢量图形，还可以非常轻松的做出各种网页制定

11、中常见的效果，比如翻转图象，下拉菜单等，制定完成以后，如果你要在网页制定中使用，你可以将它输出为html文件，还能输出为可以在photoshop,illustrator和flash等软件中编辑的格式。 fireworks提供专业网络图形制定和制作方案，通过它，你可以编辑网络图形和动画，支持位图和矢量图。同时它能dreamweaver、flash能实现网页的无缝连接，与其它图形程序各html编辑也能密切配合，为用户一体化的网络制定方案提供支持. 1.5色彩的平衡与呼应 1色彩的平衡。色彩在页面中可以形成很多的效果，通过激烈的对比，可以特别页面的重点。还可以通过色彩调配，达到页面稳重度的改变。一般

12、的状况下，页面上方的颜色总是很重，这样才干压住下面的颜色，如果不采用这种办法，整个页面将显得很不稳重，底下的文字图片，有飘出的意味。因此，要使整个页面显得很平衡，必须要有能镇住其他颜色的色彩。2色彩的呼应。一种比较特别的色彩，如果很突兀地放在页面中，无论你是特别重点也好，还是logo图标，都给整个页面带来了副作用。为此，你必须在相对称的位置加上该色系关于页面并不醒目的色彩以呼应，这样可以弱化这种视觉的冲击。 二、网页美工的总体制定 2.1网页制定的制作流程 第一步：确定网站主题 做网站，首先必须要解决的就是网站内容问题，即确定网站的主题。关于内容主题的选择，要做到小而精，主题定位要小，内容要精

13、。不要去试图制作一个包罗万象的站点，这往往会失去网站的特色，也会带来高强度的劳作，给网站的及时更新带来困难。 第二步：做好网站规划 确定好网站的主题内容、图片、文字材料之后就开始用firework进行网页制定。 首先打开firework新建一个宽为968、高为660的背景为白色的页面，然后进行网页制定，将页面进行布局。 第三步：网页的具体制作步骤 网页最上面的是一个长方形条，填充颜色为浅蓝色，还加上了渐变的效果。左边写着歪歪蛋创意生活网,这个网站的主题-制定美丽制定生活。颜色为白色，字体为黑体、大小为26磅，加了蓝色阴影等效果，整体更加好看。如图2-1-1 如图2-1-1 下面是这个网站的导航

14、条和本期的新看点、家居排行榜。如图2-1-2，2-1-3所示： 图2-1-2 图2-1-3 2.2网站色彩布局 歪歪蛋创意生活网属于标准的家居行业网站，首页采纳大部分的蓝色和少部分的白色、暗绿色、灰色三色搭配，给人一种舒适、温馨家的感觉。这四种色块将网页分成几个不同的部分。蓝色区域为网站logo和banner，并且直接使用了在fireworks里制作好的图片。这样能更好的表达网站的主题，使网站的主题一目了然更加明确。网站的导航条也是采纳深蓝色作为导航条的背景色，用浅蓝色做字体的颜色，看起来更加协调。导航条下面还做了一些比较方便的快速链接。如2-1-4所示。白色与浅蓝色的部分放置了网站的flas

15、h轮显动画和网站的新看点、最新的家居排行榜等内容。然后就是家居制定的图片展示区，共有五张家居制定的图片，这些图片是运用代码做成的滚动效果插入到网站当中去的。最下面 的剩下三色部分是歪歪蛋创意生活网一些分类的小看点吗，共有三组内容。 副页，一共有十个副页。分别采纳了不同的颜色，绿色、灰色、暗黄色、浅蓝色为主要的颜色搭配，同样给人一种小清新的感觉特别是浅蓝色和绿色。同时副页还做登录和注册页面，还有法律声明的页面，算是一个内容比较齐全的网站，所学到的只是基本上全都运用起来了。如图2-2-1所示 图2-2-1 网站的新闻资讯和出色专题部分，如图2-2-2所示。 图2-2-2 网站的中间部分做了一个水平

16、滚动图片展示，如图2-2-3所示。 图2-2-3 下边是家居分类专题区域展示。如图2-2-9所示。 图2-2-4 2.3网站结构 首页网页布局如图2-3-1所示。 logo图片导航新看点最家新居动top态5制定赏出色专题家居制定家饰生活乐居方式装修手册法律声明首页图2-3-1 消费资讯在网站结构布局方面，该网站打破了标准的二分栏布局，这样既有足够的空间放置网站内容，网站也不会太空。 2.4图片轮显的制作过程 图片轮显的操作步骤如下： 1首先启动flash2.0建立一个宽297、244的白色画布。 2新建图层，将图层三设为遮罩层，在第一个图层中导入第一张照片到舞台，利用对齐工具将图片与画布对齐重

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

18、作出静态效果，动态效果将在dreamweaver中进行制作。 2.7形成网页 当网站在fierwork中制定完成后，只是完成了一部分的工作，还需要将它制作成html格式的网页。在制作网页前还需要利用切片工具将制定稿切割成n个部分，然后dreamweaver中创建表格重新组合。切片前也要先观察好，哪些是自己需要的，哪些东西能重复使用，哪些是需要越小越好的，哪些文字是必须用图片的！合计好这些就进行切片，记住一定要准确！如果有必要将类型相同的图片做成一张图片，以便减少内存。 三、美工制定总结 注意页面的分块，着手制定一个页面的时候，你必须依据所掌握的内容，以及其风格，对页面的整体进行分块。分块是一个非常必要且难以掌握的技巧。分块可以用不同着色的色块、框、细线、排列整齐的英文等等，还可以混合使用，但是注意不要过于醒目，因为页面的重点在内容，而不在其他。 通过