1、 电子商务网页美工实训实训指导书编写者：袁 鑫二一年五月网页美工与图像处理实训指导书目 录一、 总体说明 11、实训目的与 要求 12、实训内容 13、参考课时 14、实训材料准 备 15、考核办法 26、实训方法与 步骤： 27、实训范例 2实训一 网页导航按钮制作篇 2实训二 网页广告条制作篇 3实训三 网页站点标志制作篇 5实训四 网页图像处理篇 6实训五 网页首页制作篇 7实训六 网页内容页制作篇 80网页美工与图像处理实训指导书一、 总体说明1、实训目的与要求随着互联网的快速发展，网页美工设计与图像处理技术进入了一个崭新的阶段。网页作为网络信息的载体，不再是简单的文字与图片的展示，而
2、是更加强调美观性、交互性，这也是当前网页美工设计与图像处理的发展趋势。为了加强学生的网页美工设计水平，提高学生的图像处理实际动手能力，同时为了推进我国信息化人才建设的培养，适用将来的社会的需要，提高学生的竞争力，本学期开设了为期一周的网页美工与图像处理实训。该门课程的学习，实践性很强，学生必须通过大量的上机练习，才能够灵活地用它来解决实际的问题，通过集中一段时间利用 PHOTOSHOP 制作网页导航按钮、网页广告条、网页站点标志、网页图像处理、网站首页制作、网站内容页制作进行综合实训，熟练掌握该软件的各种功能，提高解决实际问题的能力。2、实训内容网页美工与图像处理3、参考课时 28 课时4、实
3、训材料准备硬件：一个性能较高的机房。软件：Windows xp 操作系统;Photoshop cs2 完全安装；Flash mx 2004；Acdsee 。资料：网页美工与图像处理精讲 、 网页美工与图像处理实验指导书。15、考核办法出勤情况：10 分纪律表现：10 分实验报告：10 分实训一 网页导航按钮制作篇 10实训二 网页广告条制作篇 10实训三 网页站点标志制作篇 10实训四 网页图像处理篇 10实训五 网页首页制作入篇 15实训六 网页内容页制作入篇 156、实训方法与步骤：实训方法：学生四人一组，选出一个组长和第二责任人。在组长的调动下，充分发挥主观能动性和团结精神，根据实训步骤
4、完成网页美工设计。7、实训范例实训一 网页导航按钮制作篇1、实训目的与要求掌握网页按钮以及导航条的制作方法，掌握通道、滤镜的使用方法；掌握对象排列对齐的方法；2、实训内容制作几款网页按钮以及导航条23、实训准备硬件：一个性能较高的机房。软件：Windows xp 操作系统 ;Photoshop cs2 完全安装；Flash mx 2004；Acdsee。资料：网页美工与图像处理精讲 、 网页美工与图像处理实验指导书。4、实验步骤1) 制作透明按钮新建文件，400*400新建图层 1，绘制椭圆选取（200*200） ，并使用蓝色到深蓝色线性渐变填充在图层 1 上添加投影效果新建图层 2，载入图层
5、 1 的选区，缩放 6 像素，从上至下，填充白色至透明色的线性渐变。使用钢笔工具绘制高亮区，选中图层 2，载入钢笔工具绘制的选区，删除（删除多余的白色区域） ，设置透明度 78%新建图层 3，在图层中绘制椭圆选区，从下至上，填充白色至透明色的线性渐变。选择选取工具，羽化 4，画椭圆，删除图层 3 多余的部分，设置透明度 78%绘制图形，如杏叶等保存文件。2）制作导航条将按钮以一定的方式排列组合到一起就形成了导航条。导航条的制作方法其实就是多个按钮的制作方法，这里就不再重复介绍。5、实训方法 机房上机完成所有操作题。6、考核办法考核分为四个级别：即优秀、良好、合格、不合格优秀：能在规定时间内完成
6、所有的操作题 90%以上良好：能在规定时间内完成所有操作题的 80%-90%合格：能在规定时间内完成所有操作题的 60%-80%不合格：能在规定时间内完不成所有操作题的 60%7、思考与练习如何设置网页导航条？3实训二 网页广告条制作篇1、实训目的与要求掌握广告条的制作原理，掌握利用 ImageReady 和 Photoshop 制作动态、静态广告条的方法；掌握动画制作的方法；2、实训内容静态广告条动态广告条3、实训准备硬件：一个性能较高的机房。软件：Windows xp 操作系统 ;Photoshop cs2 完全安装；Flash mx 2004；Acdsee。资料：网页美工与图像处理精讲
7、、 网页美工与图像处理实验指导书。4、实验步骤1) 新建文件，确定广告条的尺寸（468*60） ，如果是通栏尺寸可设置为 778*120。2) 通过钢笔工具、文字工具、变形工具等，制作标志中的图形。3) 如果图形会发生变化，则新建图层，将运动路径记录在各个图层中。3) 输入文字，将文字转换为路径，利用选择工具，修改文字的形状，并将修改后的文字放置在不同的图层4) 调整对象的位置。达到最佳效果5) 制作动画面板，制作动画5、实训方法 机房上机完成所有操作题。6、考核办法考核分为四个级别：即优秀、良好、合格、不合格优秀：能在规定时间内完成所有的操作题 90%以上良好：能在规定时间内完成所有操作题的
8、 80%-90%合格：能在规定时间内完成所有操作题的 60%-80%不合格：能在规定时间内完不成所有操作题的 60%47、思考与练习如何设计网页广告条？实训三 网页站点标志制作篇1、实训目的与要求掌握站点标志的制作原理，掌握几款站点标志的制作方法；掌握文字、变形、选取等工具的使用方法2、实训内容掌握几款 LOGO 制作的方法3、实训准备硬件：一个性能较高的机房。软件：Windows xp 操作系统 ;Photoshop cs2 完全安装；Flash mx 2004；Acdsee。资料：网页美工与图像处理精讲 、 网页美工与图像处理实验指导书。4、实验步骤1) 新建文件，确定标志的尺寸（120*
9、90）2) 通过钢笔工具、文字工具、变形工具等，制作标志中的图形。3) 输入文字，将文字转换为路径，利用选择工具，修改锚点，形成特殊文字4) 输入站点 URL 地址5) 调整对象的位置。达到最佳效果。5、实训方法 机房上机完成所有操作题。6、考核办法考核分为四个级别：即优秀、良好、合格、不合格优秀：能在规定时间内完成所有的操作题 90%以上良好：能在规定时间内完成所有操作题的 80%-90%合格：能在规定时间内完成所有操作题的 60%-80%不合格：能在规定时间内完不成所有操作题的 60%57、思考与练习制作站点标志的过程？如果设计网站的站点标志？实训四 网页图像处理篇1、实训目的与要求掌握几
10、种背景处理效果；掌握图像抽丝效果的制作；掌握图像颜色调整，掌握几种滤镜效果和图层效果的使用等与图像处理相关的操作。2、实训内容1) 网页背景图像无缝连接的制作2) 图像抽丝效果3) 浮点效果4) 图像阴影效果3、实训准备硬件：一个性能较高的机房。软件：Windows xp 操作系统 ;Photoshop cs2 完全安装；Flash mx 2004；Acdsee。资料：网页美工与图像处理精讲 、 网页美工与图像处理实验指导书。4、实验步骤1) 网页背景图像无缝连接的制作2) 图像抽丝效果3) 浮点效果4) 图像阴影效果5、实训方法 机房上机完成所有操作题。6、考核办法考核分为四个级别：即优秀、
11、良好、合格、不合格优秀：能在规定时间内完成所有的操作题 90%以上良好：能在规定时间内完成所有操作题的 80%-90%合格：能在规定时间内完成所有操作题的 60%-80%6不合格：能在规定时间内完不成所有操作题的 60%7、思考与练习实训五 网页首页制作篇1、实训目的与要求首页设计历来是网站建设的重要一环，不仅因为“第一印象”至关重要，而且直接关系到网站各频道以下各级栏目首页的风格和框架布局的协调统一等连锁性问题，是整个网站建设的“龙头工程” 。所以说首页编排的优劣，将直接影响到它是否吸引更多网民进入站内浏览。本例中将学习利用 Photoshop 和 ImageReady 制作页面后，使用网页
12、编辑软件Dreamweaver 生成最终的 Html 页面。2、实训内容制作一个完整的页面3、实训准备硬件：一个性能较高的机房。软件：Windows xp 操作系统 ;Photoshop cs2 完全安装；Flash mx 2004；Acdsee。资料：网页美工与图像处理精讲 、 网页美工与图像处理实验指导书。4、实验步骤1) 版面整体设计2) 页面尺寸的确定3) 辅助线的创建4) 背景的设置5) 标题的制作6) 主题图像的制作7) 人物的处理8) 导航菜单的制作9) 制作切片10) 优化效果11) 制作翻转效果12) 存储网页文件713) 在 Dreamweaver 中编辑网页5、实训方法
13、机房上机完成所有操作题。6、考核办法考核分为四个级别：即优秀、良好、合格、不合格优秀：能在规定时间内完成所有的操作题 90%以上良好：能在规定时间内完成所有操作题的 80%-90%合格：能在规定时间内完成所有操作题的 60%-80%不合格：能在规定时间内完不成所有操作题的 60%7、思考与练习Photoshop 制作网页的步骤？实训六 网页内容页制作篇1、实训目的与要求掌握使用 photoshop 制作 WEB 页面的方法，掌握图像蒙版效果的制作，掌握文字特殊效果的制作，掌握直线的灵活运用，掌握栏式页面的制作方法。2、实训内容制作一个完整的网页，对网页进行切片，并导出为 HTML。3、实训准备
14、硬件：一个性能较高的机房。软件：Windows xp 操作系统 ;Photoshop cs2 完全安装；Flash mx 2004；Acdsee。资料：网页美工与图像处理精讲 、 网页美工与图像处理实验指导书。4、实验步骤1）新建文件：1000*1160，背景为白色2）背景处理：此页面背景为全白，不用再进行特殊处理83）添加参考线：打开标尺，布局网页，栏间距 30 像素，第 1 栏 130 像素，第 2 栏430 像素，第 2 栏 180 像素，广告条高度为 70 像素，导航条高度为 30 像素，第一块内容高度为 500 像素，第二块内容高度为 440 像素。4）添加广告条（模幅图像的处理）：
15、a)导入蓝天图像b)加入石狮图像c)输入文字，并用黑/白渐变色描边5）添加导航条：橙色（eb832e）矩形框，白色文字6）制作栏目内容区a) 第一行第一列、第一行第二列、第二行第一列添加灰色矩形区域b) 在第一行第一列中添加直线，并等距离分布复制的线条c) 用同样的方法制作其他栏目内容7）添加页面中所需要的文字8）切片9）优化并导出为 HTML 页面5、实训方法 机房上机完成所有操作题。6、考核办法考核分为四个级别：即优秀、良好、合格、不合格优秀：能在规定时间内完成所有的操作题 90%以上良好：能在规定时间内完成所有操作题的 80%-90%合格：能在规定时间内完成所有操作题的 60%-80%不
16、合格：能在规定时间内完不成所有操作题的 60%7、思考与练习利用 Photoshop 制作网页时，如何做好页面的布局？9附录 1：首页制作步骤版面整体设计1) 新建文件：800*550，背景白色，RGB 色彩模式，文件名为 index.psd2) 新建文件：5*3，前景色为 R：72，G：72，B：72，拖出 p 像素的选择范围，将前景色设为 R：83，G：83，B：83，然后填充。3) 定义图案：选择全部，定义为图案。并将文件保存为 GIF 格式，文件名为bg.gif。在后面制作网页时需要将该文件作为底图进行平铺。4) 填充图案：打开 index.psd，用刚定义的图案填充。5) 选择选框工
17、具，固定尺寸：776*470，用鼠标在图像窗口中拖动，将选区移到居中的位置，用白色填充选区。6) 建立图层组。为图层组添加蒙版。这样作将所有图层放在图层组中，对图层组添加蒙版，限制图层组内图层的显示范围。7) 标题的制作8) 打开素材 logo_bigd.jpg，移动图片到合适位置。并对素材进行比例缩放至合适大小。9) 打开素材栏目按钮.psd，位置至合适位置10) 输入文本11) 绘制参考线。CTRL+R 显示标尽，从标尺处向下搬运两个辅助线，新建图层，前景色 R：200，G：200，B ： 200，按住 Shift 键在图像窗口上绘制直线。12) 主题图像的制作13) 打开素材风景.tif
18、，移动至适当位置，并用变形工具，对其进行缩放。14) 创建选区。用矩形选框工具，在风景图上方建立一个矩形选区15) 变形选区。拖拽上面的控制点至合适位置。确定操作后，取消选区。16) 建立选区。使用矩形工具，选区风景图中央位置。17) 设置蒙版属性。建立快速蒙版。18) 说明：快速蒙版是建立选区的一种直观、快捷的方法，蒙版编辑的优点是几乎可以使用任何 photoshop 工具或滤镜进行修改。而且如果处理正确，它可以制作一些特别精确，而且富有创意的艺术选区效果，并且这些选区是用其他任何一种方法都无法创意的。19) 选择毛笔工具，在红色边缘进行喷绘。20) 人物的处理21) 打开素材文件飞鸽.ti
19、f。使用钢笔工具，进行抠图。22) 翻转图像。23) 建立选区，按住 CTRL 点击风景图层24) 添加图层蒙版。选择飞鸽图层，添加蒙版效果25) 添加图层特效。外发光。26) 导航菜单的制作27) 添加文字28) 对方文字。使用鼠标选中全部文字，在段落面板中选择左右强迫对齐。29) 添加文字图层特效。添加投影、描边（大小为 1，颜色为 0,65,126）30) 选择毛笔工具，在工具选项栏上选择一个蜡笔画效果的笔刷样式，大小为 15，将鼠标移至文字周围开始喷绘。31) 修饰边框。32) 制作分割线1033) 为边框图层添加投影。34) 添加自定义形状，放置在文字的后面。35) 颜色填充，选择工
20、具箱中的椭圆选框工具，按住 SHIFT 键在图像窗口上绘制一正圆，用径向渐变填充正圆。36) 复制图标37) 填充颜色。新建一图层，命名为光晕，用黑色填充，并将该层放在飞鸽图层的下方38) 使用滤镜效果，镜头光晕。并将光晕图层设置为“screen”39) 制作切片40) 裁切图像。去掉灰色背景41) 注意：在 photoshop 中绘制元素，如背景底纹和文字等，在存储为 html 时可以不出现，这些内容可以在网页编辑软件中完成。在 photoshop 中制作时可以看到整个效果，便于调整。42) 制作切片：将标志、导航条、功能按钮单独切出。其余部分按表格样式切出43) 优化图像44) 制作翻转效果45) 打开 WEB 内容面板，为导航条添加翻转效果（over ：文字颜色变为橙色）46) 添加链接47) 存储网页文件：存储优化结果48) 在 Dreamweaver 中编辑网页49) 添加背景50) 添加会员
