网页美工设计-实验报告.doc

网页美工设计-实验报告网页美工设计-实验报告江苏经贸职业技术学院实验报告(2021/2021学年第一学期)系部信息技术系课程名称网页美工设计学生姓名学号班级指导教师二00六年二月制信息技术系实验报告日期实验地点2021年9月20日指导教师评语与成绩一、实验目的：了解并熟练运用PHOTOSHOPCS3二、实验项目：信息技术系实验报告三、实验步骤:1.打开PHOTOSHOPCS3软件新建图层（名称为“茶壶”，宽为400毫米，高位300毫米，分辨率为300像素/英寸，颜色模式RGB，8位，背景颜色默认为白色）用渐变工具设置左色标RGB值为161、152、131，右色标RGB值为255、255、255确定鼠标从左上角一直拉到右下角完成2.打开“小镇”图片用移动工具移到“茶壶”图层调整图片大小，移到适合的位置将“小镇”图层的不透明度改为30%完成3.新建图层用矩形选框工具在“茶壶”图层画出矩形框，填充背景色RGB值为181、176、163C，TRL+D利用移动工具，将矩形框下移，CTRL+SHIFT+ALT+T进行复制。新建组，将条纹图层放入图层组中，命名为“条纹”4.打开“梅花”图片用移动工具移到“茶壶”图层调整图片大小，移到适合的位置，并将图层命名为“梅花”5.打开“茶壶”图片用移动工具移到“茶壶”图层调整图片大小，移到适合的位置，并将图层命名为“茶壶”6.打开“案几”图片用移动工具移到“茶壶”图层调整图片大小，移到适合的位置，并将图层命名为“案几”7.打开“茶杯”图片用移动工具移到“茶壶”图层（移动四次，即出现四个茶杯）调整图片大小，移到适合的位置，并将图层命名为“茶杯”8.按“CTRL+”，合并“茶壶”、“案几”和“茶杯”图层，命名为“茶壶组合”9.打开“竹子”图片用移动工具移到“茶壶”图层调整图片大小，移到适合的位置，并将图层命名为“竹子”10.选择“直排文字工具”，输入“宜兴紫砂壶”字样，字体为华文行楷，字体大小为点，锐利，字体颜色RGB值为181、176、163右击图层栅格化图层11.完成并保存作业四、实验中遇到的问题及解决方法：无扩展阅读：网页美工设计说明书网页美工与广告设计题目：姓名：学号：班级：指导教师：完成日期：设计说明书歪歪蛋创意生活网站美工的设计与实现王丹2021118012410图文孙俊国2021年6月18日10级选修网页美工与广告卷二实践考核方案课程名称：网页美工与广告课程编号：0704410授课班级：10级选修学分：3考核形式：实践考课程性质：专业课一、考核目的考核学生网页美工与广告设计的综合能力。二、考核方式、内容、要求考核方式：以课程设计做为主要的考核方式。考核项目：自定一个网站主题。根据该网站，用Fireworks与Dreamveawer设计制作成xxx网站的主页与副页及其他页面。要求：1.要有网页美工的规划与设计。2.设计出网页主页与副页效果图，并根据效果图制作网站中的其他页面，并自己设计LOGO、flash广告、栏目、导航、banner、网页内容；界面设计要美观，色彩搭配合理，有新意，超链接正确；网页中要有1个以上的Flash动画3.提交：index.pngfuye.png及网站（5张网页以上）；网页美工设计说明书。三、考试说明与评分标准2评分标准评分标准主页美工设计要求：美观且有创意、内容完整、导航正确、有自己设计的评分标准与分值flash广告动画。副页美工设计要求：布局好，内容完整、导航正确，有1个以上的Flash广告动画设计说明书要求：格式正确、排版规范；分析到位、网页美工设计重点与难点分析深刻。用A4打印，6页以上。303040分值注：网页美工的作品与网站可借鉴其它作品，但严禁复制或他人代做，一经发现类同，按0分处理。执笔人：审核人：院长：2021-5-5目录一、概述.11.1选择缘由.11.2网页美工的定义.11.3网页美工的作用.21.4Firework.21.5色彩的平衡与呼应.3二、网页美工的总体设计.32.1网页设计的制作流程.32.2网站色彩布局.42.3网站结构.62.4图片轮显的制作过程.62.5滚动图片的制作.72.6制作网页的主要内容.72.7形成网页.7三、美工设计总结.8歪歪蛋创意生活网站美工的设计与实现一、概述1.1选择缘由我用网页美工设计的网站是生活家居类的网站。随着今年来家居业“重装饰、轻装饰”的潮流，家居设计从越来越有实用性的作用提升到装饰性的作用，家居行业被前所未有的“激活”了家居产业发展前景光明。首先，以居民住房、宾馆饭店、旅游交通、医疗卫生等为代表的投资型和公共服务型消费热点，都将成为促进中国家居市场不断扩大的因素，随着社会的不断发展、人们生活的不断提高，人们对生活居住的要求不仅仅是为了挡风遮雨了，还加上了时尚、好看，这意味着人们对家居设计的商品越来越关注了，当前中国每年有1000万对新人结婚，因结婚产生的家居设计的消费额将十分可观。各类的家居设计都与我们的生活息息相关，是生活中不可或缺的一部分,广阔的市场,巨大的消费群体对家居行业来说无一不是一个很好的良机。因此我选择了做家居设计方面的网站.1.2网页美工的定义网页美工就是对网页的美化，网页美工要熟悉photoshopfireworksflash等制图软件，也要有一个非常好的视觉功底，创意能力，才能创造出非常美观的页面网页美工也用css来进行美化，css可以控制html标签的元素，当我们鼠标放在超级链接上的时候背景变色网页美工需要掌握DIV+CSS样式；基础HTML语言。基础美术：素描（石膏几何体、静物写生）；色彩（色彩构成、简单色彩静物写生）三大构成：色彩构成、平面构成、立体构成。Photoshop网页配色及排版设计；Illustrator网页设计；网页设计综合、经典网页解析。1.3网页美工的作用对于制作一个网页来说。网页美工起着举足轻重的作用，网页美工设计不单纯从事美术绘画，而需要定位软件使用者、使用环境、使用方式并且最终为软件用户服务，他们进行的是集科学性与艺术性于一身的设计，他们需要完成的，简单说来，正是一个不断为用户设计视觉效果使之满意的过程。网页美工设计的职能大体包括三方面：一是图形设计，即传统意义上的“美工”。当然，实际上他们承担得不是单纯意义上美术工人的工作，而是软件产品的产品“外形”设计。二是交互设计，主要在于设计软件的操作流程、树状结构、操作规范等。一个软件产品在编码之前需要做的就是交互设计，并且确立交互模型，交互规范。三是用户测试/研究，这里所谓的“测试”，其目标恰在于测试交互设计的合理性及图形设计的美观性，主要通过以目标用户问卷的形式衡量网页设计的合理性。1.4Firework在软件界，Fireworks指网页三剑客之一的软件。原为Macromedia公司所有。在Macromedia被Adobe兼并之后，Adobe又进一步发展了此软件，但是与Macromedia的风格差别较大。将来有可能被Photoshop等取代。现最新版本AdobeFireworksCS5.1。fireworks是一个强大的网页图形设计工具，你可以使用它创建和编辑位图、矢量图形，还可以非常轻松的做出各种网页设计中常见的效果，比如翻转图象，下拉菜单等，设计完成以后，如果你要在网页设计中使用，你可以将它输出为html文件，还能输出为可以在photoshop,illustrator和flash等软件中编辑的格式。Fireworks提供专业网络图形设计和制作方案，通过它，你可以编辑网络图形和动画，支持位图和矢量图。同时它能dreamweaver、flash能实现网页的无缝连接，与其它图形程序各HTML编辑也能密切配合，为用户一体化的网络设计方案提供支持.1.5色彩的平衡与呼应1）色彩的平衡。色彩在页面中可以形成很多的效果，通过强烈的对比，可以突出页面的重点。还可以通过色彩调配，达到页面稳重度的改变。一般的情况下，页面上方的颜色总是很重，这样才能压住下面的颜色，如果不采取这种办法，整个页面将显得很不稳重，底下的文字图片，有飘出的意味。因此，要使整个页面显得很平衡，必须要有能镇住其他颜色的色彩。2）色彩的呼应。一种比较突出的色彩，如果很突兀地放在页面中，无论你是突出重点也好，还是logo图标，都给整个页面带来了副作用。为此，你必须在相对称的位置加上该色系（对于页面并不醒目）的色彩以呼应，这样可以弱化这种视觉的冲击。二、网页美工的总体设计2.1网页设计的制作流程第一步：确定网站主题做网站，首先必须要解决的就是网站内容问题，即确定网站的主题。对于内容主题的选择，要做到小而精，主题定位要小，内容要精。不要去试图制作一个包罗万象的站点，这往往会失去网站的特色，也会带来高强度的劳动，给网站的及时更新带来困难。第二步：做好网站规划确定好网站的主题内容、图片、文字材料之后就开始用Firework进行网页设计。首先打开Firework新建一个宽为968、高为660的背景为白色的页面，然后进行网页设计，将页面进行布局。第三步：网页的详细制作步骤网页最上面的是一个长方形条，填充颜色为浅蓝色，还加上了渐变的效果。左边写着歪歪蛋创意生活网,这个网站的主题-设计美丽设计生活。颜色为白色，字体为黑体、大小为26磅，加了蓝色阴影等效果，整体更加好看。如图2-1-1如图2-1-1下面是这个网站的导航条和本期的新看点、家居排行榜。如图2-1-2，2-1-3所示：图2-1-2图2-1-32.2网站色彩布局歪歪蛋创意生活网属于标准的家居行业网站，首页采用大部分的蓝色和少部分的白色、暗绿色、灰色三色搭配，给人一种舒适、温馨家的感觉。这四种色块将网页分成几个不同的部分。蓝色区域为网站logo和banner，并且直接使用了在fireworks里制作好的图片。这样能更好的表达网站的主题，使网站的主题一目了然更加明确。网站的导航条也是采用深蓝色作为导航条的背景色，用浅蓝色做字体的颜色，看起来更加协调。导航条下面还做了一些比较方便的快速链接。如2-1-4所示。白色与浅蓝色的部分放置了网站的FLASH轮显动画和网站的新看点、最新的家居排行榜等内容。然后就是家居设计的图片展示区，共有五张家居设计的图片，这些图片是运用代码做成的滚动效果插入到网站当中去的。最下面的剩下三色部分是歪歪蛋创意生活网一些分类的小看点吗，共有三组内容。副页，一共有十个副页。分别采用了不同的颜色，绿色、灰色、暗黄色、浅蓝色为主要的颜色搭配，同样给人一种小清新的感觉特别是浅蓝色和绿色。同时副页还做登录和注册页面，还有法律声明的页面，算是一个内容比较齐全的网站，所学到的只是基本上全都运用起来了。如图2-2-1所示图2-2-1网站的新闻资讯和精彩专题部分，如图2-2-2所示。图2-2-2网站的中间部分做了一个水平滚动图片展示，如图2-2-3所示。图2-2-3下边是家居分类专题区域展示。如图2-2-9所示。图2-2-42.3网站结构首页网页布局如图2-3-1所示。LOGO图片导航新看点最家新居动TOP态5设计赏精彩专题家居设计家饰生活乐居方式装修手册法律声明首页图2-3-1消费资讯在网站结构布局方面，该网站打破了标准的二分栏布局，这样既有足够的空间放置网站内容，网站也不会太空。2.4图片轮显的制作过程图片轮显的操作步骤如下：1）首先启动Flash2.0建立一个宽297、244的白色画布。2）新建图层，将图层三设为遮罩层，在第一个图层中导入第一张照片到舞台，利用对齐工具将图片与画布对齐重合。3）导入第二张照片到舞台与第一张的步骤完全相同。4）将第三层遮罩层解锁，在第一帧中插入关键帧然后在图片的边上画一个矩形在第四十帧上插入关键帧将这个矩形放大知道把图片盖住，在第一帧与四帧中建补间形状。剩下的与上述步骤完全相同。2.5滚动图片的制作滚动一般有两种制作方向：一是水平方向滚动，二就是垂直方向滚动。直接将现有的代码拷到相应的位置就行。滚动的产品图片在Flash中只需要制作出动态的效果，动态效果将在dreamweaver中体现出来，图片的高度和宽度都可以根据实际情况在代码中进行修改。2.6制作网页的主要内容网站主要内容区域用于放置滚动的产品图片，在firework中只需要制作出静态效果，动态效果将在dreamweaver中进行制作。2.7形成网页当网站在fierwork中设计完成后，只是完成了一部分的工作，还需要将它制作成HTML格式的网页。在制作网页前还需要利用切片工具将设计稿切割成N个部分，然后dreamweaver中创建表格重新组合。切片前也要先观察好，哪些是自己需要的，哪些东西能重复使用，哪些是需要越小越好的，哪些文字是必须用图片的！考虑好这些就进行切片，记住一定要精确！如果有必要将类型相同的图片做成一张图片，以便减少内存。三、美工设计总结注意页面的分块，着手设计一个页面的时候，你必须根据所掌握的内容，以及其风格，对页面的整体进行分块。分块是一个非常必要且难以掌握的技巧。分块可以用不同着色的色块、框、细线、排列整齐的英文等等，还可以混合使用，但是注意不要过于醒目，因为页面的重点在内容，而不在其他。通过学习，了解网站和网页的基本设计思想，使学生提高和掌握对色彩基础知识（色相、明度、纯度、空间混合概念，色彩构成的一般原理、色彩的心理、对色彩的观察能力和对丰富的色彩感知能力，对一般色彩的搭配能力、网页的色彩设计、配色软件的使用等）；平面构成（平面设计构图的形式要素、关系要素、了解平面设计构图与视觉传达的关系，熟悉点、线、面、色彩、肌理等设计元素的基本设计方法，并在实践中能灵活运用；掌握平面设计构图的几种常用的表现方法）；初步掌握CorelDRAW工具的使用，培养对优秀网页版式分析模仿的能力，掌握网页设计的基本方法。10图文网页美工与广告卷二实践考核成绩评价表班级学号10图文姓名20211180124主页美工设计要求：美观且有创意、内容完整、导航正确、有自己设计的flash广告动画。评分标准与分值副页美工设计要求：布局好，内容完整、导航正确，有1个以上的Flash广告动画。网站5张网页以上。设计说明书要求：格式正确、排版规范；分析到位、网页美工设计重点与难点分析深刻。用A4打印，6页以上。总分100303040王丹分值成绩得分任课教师签字：教师评价注：网页美工的作品与网站可借鉴其它作品，但严禁复制或他人代做，一经发现类同，按0分处理。第 11 页 共 11 页